Make WordPress Core

Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#18020 closed enhancement (fixed)

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

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

Description

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 13 years ago.
Replaces Arial/Helvetica font stacks with "sans-serif" default.
win-arial.png (80.7 KB) - added by iammattthomas 13 years ago.
Windows - Arial font
ubuntu-dejavu.png (85.3 KB) - added by iammattthomas 13 years ago.
Ubuntu - Deja Vu text
mac-helvetica.png (97.6 KB) - added by iammattthomas 13 years ago.
Mac screenshot - Helvetica text (corrected)
pt_BR-broken-menu.jpg (168.2 KB) - added by catiakitahara 12 years ago.
pt_BR menu broken by new font stack

Download all attachments as: .zip

Change History (21)

@iammattthomas
13 years ago

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

@iammattthomas
13 years ago

Windows - Arial font

@iammattthomas
13 years ago

Ubuntu - Deja Vu text

#1 @ryanduff
13 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.

@iammattthomas
13 years ago

Mac screenshot - Helvetica text (corrected)

#2 @jkudish
13 years ago

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

#3 @saracannon
13 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?

#4 @nacin
13 years ago

  • Milestone changed from Awaiting Review to 3.2.1

#5 @downstairsdev
13 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.

#6 @dremeda
13 years ago

  • Cc dre@… added

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

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

#7 @azaozz
13 years ago

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

#8 @saracannon
13 years ago

+1 +1 +1 just in case :)

#9 @RanYanivHartstein
13 years ago

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

#10 @toscho
13 years ago

  • Cc info@… added

#11 @ryan
13 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

#12 @ryan
13 years ago

In [18407]:

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

#13 @volpeo
13 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...

@catiakitahara
12 years ago

pt_BR menu broken by new font stack

#14 @catiakitahara
12 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.

#15 @SergeyBiryukov
12 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;
	}
</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.

Last edited 12 years ago by SergeyBiryukov (previous) (diff)

#16 @JohnONolan
12 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.