Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#18020 closed enhancement (fixed)

Use browser default "sans-serif" instead of Arial or Helvetica.

Reported by: iammattthomas Owned by: ryan
Milestone: 3.2.1 Priority: normal
Severity: normal Version: 3.2
Component: Graphic Design Keywords: ui-feedback ux-feedback
Focuses: Cc:


I've seen a few suggestions that, rather than forcing Arial upon Mac users or Helvetica upon Windows users, we should just specify "sans-serif" as the font family for the dashboard and use the browser default. Mac users would get Helvetica, Windows users get Arial. People who bother to set their browser default font get whatever they want. This seems fair and reasonable, and I like the added side effect of Mac users seeing Helvetica.

Instead of Bitstream Vera Sans, Linux users would probably see Deja Vu as the browser default, which looks less like what Windows and Mac users will see. Not sure how they'd feel about that.

At any rate, this patch is submitted for your consideration.

Attachments (5)

browser-default-sans-serif.diff (7.2 KB) - added by iammattthomas 4 years ago.
Replaces Arial/Helvetica font stacks with "sans-serif" default.
win-arial.png (80.7 KB) - added by iammattthomas 4 years ago.
Windows - Arial font
ubuntu-dejavu.png (85.3 KB) - added by iammattthomas 4 years ago.
Ubuntu - Deja Vu text
mac-helvetica.png (97.6 KB) - added by iammattthomas 4 years ago.
Mac screenshot - Helvetica text (corrected)
pt_BR-broken-menu.jpg (168.2 KB) - added by catiakitahara 4 years ago.
pt_BR menu broken by new font stack

Download all attachments as: .zip

Change History (21)

@iammattthomas4 years ago

Replaces Arial/Helvetica font stacks with "sans-serif" default.

@iammattthomas4 years ago

Windows - Arial font

@iammattthomas4 years ago

Ubuntu - Deja Vu text

comment:1 @ryanduff4 years ago

  • Cc ryanduff added

I'm not a designer, but based on the screenshots I'd say it seems a fairly decent alternative. Looks similar enough over various operating systems and, well... consistency is good.

+1 based on screenshots.

@iammattthomas4 years ago

Mac screenshot - Helvetica text (corrected)

comment:2 @jkudish4 years ago

+1 as well, I like doing the old sans-serif trick on sites I design as well :)

comment:3 @saracannon4 years ago

  • Cc sararcannon@… added

I like it. But, what is the reaction on not just PC's but mobile devices, tablets, consoles, refrigerators (they have internet on fridges?!?), etc.. Does it always default to either arial or helvetica if you're not specific?

comment:4 @nacin4 years ago

  • Milestone changed from Awaiting Review to 3.2.1

comment:5 @downstairsdev4 years ago

This is how they do it in HTML5 boilerplate: http://html5boilerplate.com/. Paul Irish also has a video somewhere where he recommends this approach. I'm a +1.

comment:6 @dremeda4 years ago

  • Cc dre@… added

+1 for not forcing fonts. Good on ya, Matt.

Last edited 4 years ago by dremeda (previous) (diff)

comment:7 @azaozz4 years ago

+1, do we need more +1s to commit this now?

comment:8 @saracannon4 years ago

+1 +1 +1 just in case :)

comment:9 @RanYanivHartstein4 years ago

FWIW, this might make things simpler for the RTL stylesheets, so another +1 there

comment:10 @toscho4 years ago

  • Cc info@… added

comment:11 @ryan4 years ago

  • Owner set to ryan
  • Resolution set to fixed
  • Status changed from new to closed

In [18406]:

Use browser default sans-serif instead of Arial or Helvetica. Props iammattthomas. fixes #18020 for trunk

comment:12 @ryan4 years ago

In [18407]:

Use browser default sans-serif instead of Arial or Helvetica. Props iammattthomas. fixes #18020 for 3.2

comment:13 @volpeo4 years ago

Hi, i'm a Linux User (Ubuntu), and Deja Vu don't really looks like Arial or Helvetica but more like Verdana (that actually looks like shit in wp-admin, too big). I really saw the difference after update 3.2 => 3.2.1. Perhaps the solution is to force an other font on my browsers...

@catiakitahara4 years ago

pt_BR menu broken by new font stack

comment:14 @catiakitahara4 years ago

  • Keywords ui-feedback ux-feedback added; has-patch removed
  • Resolution fixed deleted
  • Severity changed from minor to normal
  • Status changed from closed to reopened
  • Version changed from 3.2 to 3.3

Hi, guys, I agree with Volpeo, I'm linux user too and besides the fact Deja Vu looks "uglier" than Arial or Helvetica, the letters are much wider and there's more space between them. It's a problem in Brazilian portuguese because we really have long words and the main menu is "breaking". Changing the word translation is not an option because we've been using it for 3 years, people are already used to it. I know we may change the browser default, but I think WordPress should look fine without users needing to configure their browser. I've attached an image showing how the menu looks like now.

comment:15 @SergeyBiryukov4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed
  • Version changed from 3.3 to 3.2

You can tweak the admin menu font for localized package in the same way azaozz suggested in #8472.

Here is the example function to put into wp-content/languages/pt_BR.php which I used in my test:

function br_change_admin_menu_font() { ?>
<style type="text/css">
	#adminmenu {
		font-family: Arial, "Bitstream Vera Sans", Helvetica, Verdana, sans-serif;
add_action('admin_head', 'br_change_admin_menu_font');

Since this ticket was closed on a completed milestone, a new ticket should be opened for any further issues. Re-closing as fixed for 3.2.

Version 0, edited 4 years ago by SergeyBiryukov (next)

comment:16 @JohnONolan3 years ago

body form .input on login.css and h2 .nav-tab on wp-admin.css appear to have been missed / adjusted inconsistently in [18407] - was that intentional?

Note: See TracTickets for help on using tickets.