MediaWiki

Typography refresh/Font choice/Test

< Typography refresh | Font choice

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

edit
  • 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

edit

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

edit

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
  • Helvetica --Qgil
  • Liberation Sans --Edokter
  • Reported as Helvetica, actually Arial [8] --Skizzerz
  • Arial (reported as helvetica, renders arial) --Fauzan
Firefox
Internet Explorer
Safari
Opera
Apple
Browser 1. No fonts defined 2. Only free fonts 3. Free and non-free
Mac Safari
Mac Chrome
Mac Firefox
Mac Opera
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)
Firefox (Ubuntu)
Firefox (Debian/unstable)
Chromium (Debian/unstable)
Firefox (Mint)
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

Serif

edit

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
Firefox
Internet Explorer
Safari
Opera
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)
Firefox (Ubuntu)
Firefox (Debian/unstable)
Chromium (Debian/unstable)
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)[reply] Droid Serif 62.140.132.2 15:57, 12 March 2014 (UTC)[reply] Droid Serif 62.140.132.2 15:57, 12 March 2014 (UTC)[reply]
Opera

Monospace

edit

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
Firefox
Internet Explorer
Safari
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)
Firefox (Ubuntu)
Firefox (Debian/unstable)
Chromium (Debian/unstable)
Firefox (Mint)
Android mobile
Browser 1. monospace 2. monospace, Courier 3. Edokter's suggestions
Android native
Android Chrome
Opera

How to inspect

edit

Firefox

edit

You can check the font with the following steps

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

Chrome

edit

In recent versions:

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

Internet Explorer

edit

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

edit

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

edit

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

edit

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

edit
  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.[1]
  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;
  7. ↑ 7.0 7.1 I have probably every free fonts installed under Windows.
  8. ↑ 8.0 8.1 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
  10. ↑ 10.00 10.01 10.02 10.03 10.04 10.05 10.06 10.07 10.08 10.09 10.10 10.11 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;
  15. ↑ 15.0 15.1 Possible mis-report from Opera?
  16. ↑ 16.0 16.1 16.2 Chromium in a system without proprietary fonts
  17. ↑ 17.0 17.1 Debian bug 741532
  18. ↑ 18.0 18.1 18.2 18.3 18.4 Because I have fonts-croscore installed
  19. ↑ 19.0 19.1 19.2 19.3 19.4 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. ↑ monospace
  22. ↑ monospace, Courier
  23. ↑ Cousine, 'Liberation Mono', 'DejaVu Sans Mono', Consolas, monospace - as suggested by Edokter at Talk:Typography refresh#Monospace
Retrieved from "https://www.mediawiki.org/w/index.php?title=Typography_refresh/Font_choice/Test&oldid=2287279"