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
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".
 * Most Windows users will get Arial (a Helvetica look-alike) regardless of our font rules. 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.
 * Most MacOS and iOS users will see a change from Helvetica to Helvetica Neue only when the latter is explicitly called.
 * Most Linux users will see Liberation Sans / Arimo if specified.

These pre-conclusions are consistent with the conclusions at.

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.

Serif
1. Lorem ipsum dolor sit amet 0123456789

 2. Lorem ipsum dolor sit amet 0123456789

 3. Lorem ipsum dolor sit amet 0123456789

Monospace
Currently styled via en:MediaWiki:Common.css with  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

Firefox
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
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: or
 * In newer versions, right click on the text and select "Inspect element" directly.
 * 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: The shortcut for the web inspector is Ctrl-Shift-I The inspector itself should be pretty much the same as in Chrome.
 * 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"

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.