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

[iammattthomas]

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.

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

Windows - Arial font

Ubuntu - Deja Vu text

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.

Mac screenshot - Helvetica text (corrected)

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

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?

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.

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

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

+1 +1 +1 just in case :)

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

In [18406]:

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

In [18407]:

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

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...

pt_BR menu broken by new font stack

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.

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;
	}
</style>
<?php
}
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.1.

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?