WordPress.org

Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 9 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:

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

Download all attachments as: .zip

Change History (21)

@iammattthomas
10 years ago

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

@iammattthomas
10 years ago

Windows - Arial font

@iammattthomas
10 years ago

Ubuntu - Deja Vu text

#1 @ryanduff
10 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
10 years ago

Mac screenshot - Helvetica text (corrected)

#2 @jkudish
10 years ago

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

#3 @saracannon
10 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
10 years ago

  • Milestone changed from Awaiting Review to 3.2.1

#5 @downstairsdev
10 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
10 years ago

  • Cc dre@… added

+1 for not forcing the default font. Good on ya, Matt.

Version 0, edited 10 years ago by dremeda (next)

#7 @azaozz
10 years ago

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

#8 @saracannon
10 years ago

+1 +1 +1 just in case :)

#9 @RanYanivHartstein
10 years ago

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

#10 @toscho
10 years ago

  • Cc info@… added

#11 @ryan
10 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
10 years ago

In [18407]:

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

#13 @volpeo
10 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
10 years ago

pt_BR menu broken by new font stack

#14 @catiakitahara
10 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
10 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 10 years ago by SergeyBiryukov (previous) (diff)

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