Typography refresh/Font choice/Test

Please help filling this table. Sign your data so we know who to ask if discussion or further tests are needed. If you get a different result in a certain combination, add it with a comment.

Let's run the test against the most popular browsers according to the Wikimedia stats. Feel free adding data for more browsers or platforms.

Pre-conclusions

Most Windows users will get Arial (a Helvetica look-alike) regardless of our font rules.^[1] To be proven: those with LibreOffice / OpenOffice will get Liberation Sans or Arimo (similar to Arial) if specified.
Most Android users will see Roboto regardless of our font rules.^[2]
Most MacOS and iOS users will see a change from Helvetica to Helvetica Neue only when the latter is explicitly called.^[3]
Most Linux users will see Liberation Sans / Arimo if specified.

Therefore, the goal of a consistent visual experience across desktop and mobile can be better obtained by circulating around the classic Helvetica and its clones, all of them provided by browsers simply by calling "sans-serif".

These pre-conclusions are consistent with the conclusions at #First iteration.

First iteration

In general, it feels as though the first iteration (VectorBeta) was centered around only making the experience for Apple products better, while trying not to break the experience on other platforms, which feels like a low bar. It's not entirely clear how much hands-on effort the User Experience team has put into Windows, Android tablets, ChromeOS, or other Linux desktops, or what the team's goals are for those platforms. The fact that much of the rationale for the new design centers around greater use of Helvetica Neue specifically (which is not free, and is only available to a minority of our users) is annoying, and that seems to be where a lot of the frustration from others comes from as well.

Sans-serif

1. Lorem ipsum dolor sit amet

2. Lorem ipsum dolor sit amet

3. Lorem ipsum dolor sit amet

Let's run the test against the most popular browsers according to the Wikimedia stats. Feel free adding data for more browsers or platforms.

Windows
Browser	1. No fonts defined ^[4]	2. Only free fonts ^[5]	3. Free and non-free ^[6]
Chrome	Arial --Qgil Arial --Edokter Arial --Skizzerz Arial --Fauzan	Arial --Qgil Liberation Sans --Edokter^[7] Arial --Skizzerz Arial --Fauzan	Helvetica --Qgil Liberation Sans --Edokter Reported as Helvetica, actually Arial ^[8] --Skizzerz Arial (reported as helvetica, renders arial) --Fauzan
Firefox	Arial --gnosygnu Arial --Qgil Arial --Edokter Open Sans -137.147.205.98 Arial --Skizzerz Arial --gnosygnu (no LibreOffice) Arial --Mormegil (talk) Arial --Neotarf (talk) 14:51, 4 April 2014 (UTC)	Liberation Sans ^[9]--gnosygnu Arial --Qgil Liberation Sans --Edokter Liberation Sans -137.147.205.98 Arial --Skizzerz Arial --gnosygnu (no LibreOffice) Arial --Mormegil (talk) Liberation Sans Narrow --Neotarf (talk) 14:54, 4 April 2014 (UTC)	Liberation Sans --gnosygnu Arial --Qgil Liberation Sans --Edokter Liberation Sans -137.147.205.98 Arial --Skizzerz Arial --gnosygnu (no LibreOffice) Arial --Mormegil (talk) Liberation Sans Narrow --Neotarf (talk) 14:57, 4 April 2014 (UTC)
Internet Explorer	Arial --Qgil Arial --Edokter Arial --Skizzerz Arial --Mormegil (talk)	Arial --Qgil Liberation Sans --Edokter Arial --Skizzerz Arial --Mormegil (talk)	Arial --Qgil Liberation Sans --Edokter Reported as Helvetica, actually Arial ^[8] --Skizzerz Arial --Mormegil (talk)
Safari	Arial --Jokes_Free4Me	Arial --Jokes_Free4Me	Helvetica --Jokes_Free4Me
Opera	Arial --Edokter	Liberation Sans --Edokter	Liberation Sans --Edokter

Apple
Browser	1. No fonts defined	2. Only free fonts	3. Free and non-free
Mac Safari	Helvetica --Skizzerz	Helvetica --Skizzerz	Helvetica Neue --Skizzerz
Mac Chrome	Helvetica --Skizzerz Helvetica --Plot Citizen (talk)	Helvetica --Skizzerz Helvetica --Plot Citizen (talk)	Helvetica Neue --Skizzerz Helvetica Neue --Plot Citizen (talk)
Mac Firefox	Helvetica – Jdforrester (WMF) (talk)	Helvetica – Jdforrester (WMF) (talk)	Helvetica Neue – Jdforrester (WMF) (talk)
Mac Opera	Helvetica – Jdforrester (WMF) (talk)	Helvetica – Jdforrester (WMF) (talk)	Helvetica Neue – Jdforrester (WMF) (talk)
iPhone Safari	? Helvetica – Jdforrester (WMF) (talk)	Helvetica – Jdforrester (WMF) (talk)	Helvetica Neue – Jdforrester (WMF) (talk)
iPhone Chrome	? Helvetica – Jdforrester (WMF) (talk)	Helvetica – Jdforrester (WMF) (talk)	Helvetica Neue – Jdforrester (WMF) (talk)
iPad Safari	?	?	?
iPad Chrome	?	?	?

Linux desktop
Browser	1. No fonts defined	2. Only free fonts	3. Free and non-free
Chrome (Ubuntu)	Arial --Qgil Arial -- Ssastry DejaVu Sans -- Quiddity Arial -- GeorgeBarnick	Arial --Qgil Liberation Sans -- Ssastry Liberation Sans -- Quiddity Arial -- GeorgeBarnick	Arial --Qgil Liberation Sans -- Ssastry Liberation Sans -- Quiddity Arial -- GeorgeBarnick
Firefox (Ubuntu)	DejaVu Sans --Qgil DejaVu Sans --Ssastry DejaVu Sans -- Quiddity DejaVu Sans -- gnosygnu	Liberation Sans --Qgil Liberation Sans -- Ssastry Liberation Sans -- Quiddity Liberation Sans -- gnosygnu Liberation Sans -- GeorgeBarnick	Liberation Sans --Qgil Liberation Sans -- Ssastry Liberation Sans -- Quiddity Liberation Sans -- gnosygnu Liberation Sans -- GeorgeBarnick
Firefox (Debian/unstable)	DejaVu Sans --cscott DejaVu Sans --Anomie DejaVu Sans^[10] --Anomie	Liberation Sans --cscott Arimo ^[11]--Anomie Arimo^[10] --Anomie	Liberation Sans --cscott Arimo --Anomie Arimo^[10] --Anomie
Chromium (Debian/unstable)	Arimo --Anomie Arial^[10] --Anomie	Arimo --Anomie Arimo^[10] --Anomie	Arimo --Anomie Arimo^[10] --Anomie
Firefox (Mint)	DejaVu Sans --Mormegil (talk)	Liberation Sans --Mormegil (talk)	Liberation Sans --Mormegil (talk)

Android mobile
Browser	1. No fonts defined	2. Only free fonts	3. Free and non-free
Android native	Roboto	Roboto	Roboto
Android Chrome	Roboto	Roboto	Roboto
Opera	Roboto --Mormegil (talk)	Roboto --Mormegil (talk)	Roboto --Mormegil (talk)

Serif

1. Lorem ipsum dolor sit amet 0123456789

2. Lorem ipsum dolor sit amet 0123456789

3. Lorem ipsum dolor sit amet 0123456789

Windows
Browser	1. No fonts defined ^[12]	2. Only free fonts ^[13]	3. Free and non-free ^[14]
Chrome	Times New Roman --Qgil Times New Roman --Edokter Times New Roman --Fauzan	Times New Roman --Qgil Linux Libertine --Edokter^[7] Times New Roman --Fauzan	Georgia --Qgil Linux Libertine --Edokter Georgia --Fauzan
Firefox	Times New Roman --Qgil Times New Roman --Edokter Times New Roman --Neotarf (talk) 15:04, 4 April 2014 (UTC)	Times New Roman --Qgil Linux Libertine --Edokter Times New Roman --Neotarf (talk) 15:04, 4 April 2014 (UTC)	Georgia --Qgil Linux Libertine --Edokter Georgia --Neotarf (talk) 15:04, 4 April 2014 (UTC)
Internet Explorer	Times New Roman --Qgil Times New Roman --Edokter	Times New Roman --Qgil Linux Libertine --Edokter	Georgia --Qgil Linux Libertine --Edokter
Safari	Times New Roman --Jokes_Free4Me	Times New Roman --Jokes_Free4Me	Georgia --Jokes_Free4Me
Opera	Times New Roman --Edokter	Linux Libertine --Edokter	Linux Libertine --Edokter

Apple
Browser	1. No fonts defined	2. Only free fonts	3. Free and non-free
Mac Safari	Times —Jdforrester (WMF)	Times —Jdforrester (WMF)	Georgia —Jdforrester (WMF)
Mac Chrome	Times —Jdforrester (WMF) Times —Plot Citizen (talk)	Times —Jdforrester (WMF) Times —Plot Citizen (talk)	Georgia —Jdforrester (WMF) Georgia —Plot Citizen (talk)
Mac Firefox	Times —Jdforrester (WMF)	Times —Jdforrester (WMF)	Georgia —Jdforrester (WMF)
Mac Opera	Times New Roman —Jdforrester (WMF)^[15]	Times New Roman —Jdforrester (WMF)^[15]	Georgia —Jdforrester (WMF)
iPhone Safari
iPhone Chrome
iPad Safari
iPad Chrome

Linux desktop
Browser	1. No fonts defined	2. Only free fonts	3. Free and non-free
Chrome (Ubuntu)	Liberation Serif^[16] --Qgil Times New Roman -- GeorgeBarnick Times New Roman --Qgil Times New Roman --Quiddity	Liberation Serif^[16] --Qgil Times New Roman -- GeorgeBarnick Times New Roman --Qgil Times New Roman --Quiddity	Liberation Serif^[16] --Qgil Georgia -- GeorgeBarnick Georgia --Qgil Georgia --Quiddity
Firefox (Ubuntu)	DejaVu Serif --Qgil Droid Serif --Quiddity	DejaVu Serif --Qgil Droid Serif --Quiddity	Nimbus Roman No9 L --Qgil Georgia -- GeorgeBarnick Georgia --Quiddity
Firefox (Debian/unstable)	DejaVu Serif --Anomie DejaVu Serif^[10] --Anomie	Linux Libertine O --Anomie Linux Libertine O^[10] --Anomie	TeX Gyre Termes^[17] --Anomie Georgia^[10]^[17] --Anomie
Chromium (Debian/unstable)	Tinos^[18] --Anomie Liberation Serif^[19] --Anomie Times New Roman^[10] --Anomie	Tinos^[18] --Anomie Liberation Serif^[19] --Anomie Times New Roman^[10] --Anomie	Tinos^[18] --Anomie Liberation Serif^[19] --Anomie Georgia^[10] --Anomie
Firefox (Mint)

Android mobile
Browser	1. No fonts defined	2. Only free fonts	3. Free and non-free
Android native	Droid Serif ^[20] --Qgil	Droid Serif --Qgil	Droid Serif --Qgil
Android Chrome	Droid Serif 62.140.132.2 15:57, 12 March 2014 (UTC)	Droid Serif 62.140.132.2 15:57, 12 March 2014 (UTC)	Droid Serif 62.140.132.2 15:57, 12 March 2014 (UTC)
Opera

Monospace

Currently styled via en:MediaWiki:Common.css with div.mw-geshi div, div.mw-geshi div pre, span.mw-geshi, pre.source-css, pre.source-javascript, pre.source-lua {font-family: monospace, Courier !important;} and with a codecomment that points to Wikipedia:Typography#The monospace 'bug'.

(#1 and #2 will probably give the same typeface-name but also appear as different sizes - this is "The monospace 'bug'" in action.)

1. Lorem ipsum dolor sit amet

2. Lorem ipsum dolor sit amet

3. Lorem ipsum dolor sit amet

Windows
Browser	1. monospace^[21]	2. monospace, Courier^[22]	3. Edokter's suggestions^[23]
Chrome	Courier New --Fauzan	Courier New --Fauzan	Consolas --Fauzan
Firefox	Courier New --Neotarf (talk) 15:13, 4 April 2014 (UTC)	Courier New --Neotarf (talk) 15:13, 4 April 2014 (UTC)	DejaVu Sans Mono --Neotarf (talk) 15:13, 4 April 2014 (UTC)
Internet Explorer	Courier New --Jokes_Free4Me Courier New --Jokes_Free4Me	Courier New --Jokes_Free4Me Courier New --Jokes_Free4Me	Consolas (IE8) --Jokes_Free4Me DejaVu Sans Mono (IE9) --Jokes_Free4Me
Safari	Courier New --Jokes_Free4Me	Courier New --Jokes_Free4Me	Consolas --Jokes_Free4Me
Opera

Apple
Browser	1. monospace	2. monospace, Courier	3. Edokter's suggestions
Mac Safari
Mac Chrome	Courier —Plot Citizen (talk)	Courier —Plot Citizen (talk)	Courier —Plot Citizen (talk)
Mac Firefox
Mac Opera
iPhone Safari
iPhone Chrome
iPad Safari
iPad Chrome

Linux desktop
Browser	1. monospace	2. monospace, Courier	3. Edokter's suggestions
Chrome (Ubuntu)	Droid Sans Mono -Quiddity	Droid Sans Mono -Quiddity	Liberation Mono -Quiddity
Firefox (Ubuntu)	Droid Sans Mono -Quiddity	Droid Sans Mono -Quiddity	Liberation Mono -Quiddity
Firefox (Debian/unstable)	DejaVu Sans Mono -Anomie	DejaVu Sans Mono -Anomie	Cousine^[18] -Anomie Liberation Mono^[19] -Anomie
Chromium (Debian/unstable)	DejaVu Sans Mono -Anomie	DejaVu Sans Mono -Anomie	Cousine^[18] -Anomie Liberation Mono^[19] -Anomie
Firefox (Mint)

Android mobile
Browser	1. monospace	2. monospace, Courier	3. Edokter's suggestions
Android native
Android Chrome
Opera

How to inspect

Firefox

You can check the font with the following steps

Highlight the "1. Lorem ipsum dolor sit amet" text
Right-click and select "Inspect element"
Select the "Fonts" panel in the lower right (Rules, Computer, Fonts, Box Model)
Note the font name listed in the panel
Repeat for the other two bullet-points

Chrome

In recent versions:

Same as in Firefox, but the font used will be shown at the end of "Computed"

Internet Explorer

Version 11 (and earlier, at least since version 9) has a similar inspector tool, but it seems to only show the stack, not which of the fonts is really used. Version 8 has the Developer Tools feature, but it seems it didn't include inherited styles, so it's useless for the task.

To get to the developer tools:

In newer versions, right click on the text and select "Inspect element" directly.

or

Press F12 to bring up the developer tools, then select Find > Select Element by Click [Ctrl+B], and click on the element to inspect.

Then click the "computed" panel in the lower right. Scroll until you see "font-family" or use the filter.

Opera

Version 12 and before:

Right click on the text and select "Inspect element" to bring up Opera Dragonfly. Then continue like above.

Versions after 15:

Open the menu with a click on the Opera icon in the top left corner.
Select "Additional tools" > "Activate developer tools"
After that, there is a new option in the menu "Developer tools" and in there is "Web-Inspector"

The shortcut for the web inspector is Ctrl-Shift-I The inspector itself should be pretty much the same as in Chrome.

Safari

To access the Web Inspector feature, open the Advanced tab in the Preferences dialog and tick "Show Develop menu in menu bar". It will actually be included as a sub-menu of the page drop-down menu, but it will also add a quicker "Inspect Element" to the context menu within the page itself. This however seems to have a similar drawback to Internet Explorer, in that it will only show the requested style, and not the particular font that is actually being used to render the content.

Other

If you cannot find a way to get at the rendered font via the developer tools/inspector, you may be able to simply copy/paste the text into your WYSIWYG/rich text editor of choice.

Notes

↑ By our numbers, a plurality of our users are using MS Windows still (and probably a majority of those using the desktop site). They got Arial before, and they get Arial now. (Someone with a modern system with Windows 7 or 8 on it, should check if they've switched to Segoe as the default. If so, we may be making an unintentional downgrade to Arial with our new choice.) The only way they improve their experience is to buy Helvetica Neue or buy a product that includes Helvetica Neue. Moreover, it's quite possible that MS Windows users will get a crappy experience with Helvetica if they have an old Type 1 version of it installed on their system.
↑ Which has quite different metrics than the Helvetica/Arial set of fonts. Additionally, we still end up with a difference between our two most popular Linux browsers, which while not as large as before, still seems unnecessary.
↑ How big is the difference on the site? The available screenshots don't present a noticeable difference.
↑ sans-serif;
↑ Arimo, Liberation Sans, sans-serif;
↑ Arimo, Liberation Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
1 2 I have probably every free fonts installed under Windows.
1 2 Apparently you can't be sure that the font identified as "Helvetica" in Windows isn't just Arial repackaged with that name, see Helvetica on Windows 7 and There is no Helvetica in Microsoft Word, just Arial. In any case the differences between legitimate Helvetica and Arial are minimal, see How to spot Arial and Arial versus Helvetica.
↑ Liberation Sans probably coming from LibreOffice installed?
Probably. LibreOffice is one of the first things I install. EDIT: I also added another row for an alternate Windows machine without LibreOffice: Arial only. gnosygnu
1 2 3 4 5 6 7 8 9 10 11 12 With ttf-mscorefonts-installer installed
↑ Because I have the fonts-croscore package installed. I'd get Liberation Sans without it, because I also have fonts-liberation installed.
↑ serif;
↑ 'Linux Libertine', serif;
↑ 'Linux Libertine', Georgia, Times, serif;
1 2 Possible mis-report from Opera?
1 2 3 Chromium in a system without proprietary fonts
1 2 Debian bug 741532
1 2 3 4 5 Because I have fonts-croscore installed
1 2 3 4 5 With fonts-croscore removed
↑ Maybe Roboto Slab in the near future? In any case it's the same font in all three scenarios for Android.
↑ monospace
↑ monospace, Courier
↑ Cousine, 'Liberation Mono', 'DejaVu Sans Mono', Consolas, monospace - as suggested by Edokter at Talk:Typography refresh#Monospace

This article is issued from Mediawiki. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.

[1] By our numbers, a plurality of our users are using MS Windows still (and probably a majority of those using the desktop site). They got Arial before, and they get Arial now. (Someone with a modern system with Windows 7 or 8 on it, should check if they've switched to Segoe as the default. If so, we may be making an unintentional downgrade to Arial with our new choice.) The only way they improve their experience is to buy Helvetica Neue or buy a product that includes Helvetica Neue. Moreover, it's quite possible that MS Windows users will get a crappy experience with Helvetica if they have an old Type 1 version of it installed on their system.

[2] Which has quite different metrics than the Helvetica/Arial set of fonts. Additionally, we still end up with a difference between our two most popular Linux browsers, which while not as large as before, still seems unnecessary.

[3] How big is the difference on the site? The available screenshots don't present a noticeable difference.

[4] sans-serif;

[5] Arimo, Liberation Sans, sans-serif;

[6] Arimo, Liberation Sans, Helvetica Neue, Helvetica, Arial, sans-serif;

[Edokter-7] 1 2 I have probably every free fonts installed under Windows.

[HelveticaOnWindows-8] 1 2 Apparently you can't be sure that the font identified as "Helvetica" in Windows isn't just Arial repackaged with that name, see Helvetica on Windows 7 and There is no Helvetica in Microsoft Word, just Arial. In any case the differences between legitimate Helvetica and Arial are minimal, see How to spot Arial and Arial versus Helvetica.

[9] Liberation Sans probably coming from LibreOffice installed?
Probably. LibreOffice is one of the first things I install. EDIT: I also added another row for an alternate Windows machine without LibreOffice: Arial only. gnosygnu

[anomie0-10] 1 2 3 4 5 6 7 8 9 10 11 12 With ttf-mscorefonts-installer installed

[11] Because I have the fonts-croscore package installed. I'd get Liberation Sans without it, because I also have fonts-liberation installed.

[12] serif;

[13] 'Linux Libertine', serif;

[14] 'Linux Libertine', Georgia, Times, serif;

[:1-15] 1 2 Possible mis-report from Opera?

[:0-16] 1 2 3 Chromium in a system without proprietary fonts

[debian-bug-741532-17] 1 2 Debian bug 741532

[anomie1-18] 1 2 3 4 5 Because I have fonts-croscore installed

[anomie2-19] 1 2 3 4 5 With fonts-croscore removed

[20] Maybe Roboto Slab in the near future? In any case it's the same font in all three scenarios for Android.

[21] space

[22] space, Courier

[23] Cousine, 'Liberation Mono', 'DejaVu Sans Mono', Consolas, monospace - as suggested by Edokter at Talk:Typography refresh#Monospace

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]