Wikipedia:Typography

From Wikipedia, the free encyclopedia
Jump to: navigation, search
"WP:TYPE" redirects here. For the Typography wikiproject, see Wikipedia:WikiProject Typography.
Shortcut:

Typography, the use of fonts on Wikipedia, can often be a source of heated debates. This is because Wikipedia has never set an explicit font in its default skin. This was true for Monobook, and still holds for Vector. The base font for these skins are simply defined as font-family: sans-serif. Likewise, the size of fonts also subject to debates. Vector uses the definition of font-size: 0.8em;, which translates to 80% of the default fontsize set in a user's browser. Under Windows, the default fonts in browsers are normally defined as Arial at 16px for sans-serif, Times New Roman at 16px for serif and Courier New at 13px for monospace. For consistency, all fonts are shown in 16px.

Below are some personal ramblings on web typography, and its potential use on Wikipedia. It focuses on fonts that are installed by default, as these provide a stable installed base. It also focuses heavily on Windows. Information relating to other platforms is very welcome.

Legacy font names[edit]

Font Sample Variants
Helvetica The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Times The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Courier The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic

Available fonts[edit]

Core fonts for the Web[edit]

Font Sample Variants
Arial The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Times New Roman The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Courier New The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Andale Mono The Quick Brown Fox Jumps Over The Lazy Dog. Regular
Comic Sans MS The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold
Georgia The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Trebuchet MS The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Verdana The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic

Availablility[edit]

The Core fonts for the Web have an installed base of 99% on the Windows[1] (except Andale Mono) and 92–98% on Mac OS X platforms,[2] as they are now part of the standard installation. Despite the necessity to install these fonts separately, they still enjoy an installed base of 65% among Linux installation.[3]

Originally part of the Core Web fonts, Andale Mono is not installed with Windows (having been replaced by Lucida Console), resulting in only 4% of Windows installations having the font, as opposed to 92% on Mac OS X. It used to be shipped with Internet Explorer until version 6, and was only installed with Windows 98. As the fonts are still available online, it does have an installed base of 70% on Linux. As it is similar and metric-compatible to Lucida Console, it is recommended to always combine Lucida Concole and Andale Mono in a font stack.

Size[edit]

Fonts that have the same cap height, do not always match in x-height, making them hard to mix inline without scaling. Based on Arial as the base font, Comic Sans MS, Georgia, Trebuchet MS and Verdana are safe to use inline. Times New Roman is not safe to use inline without scaling. Although Courier New has a lower height, it remains legible, and is the defacto monospace font. (Arial Black and Impact are not listed, as these are header fonts.)

Common Windows fonts[edit]

Font Since Sample Variants
Tahoma Windows 98 The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold
Lucida Sans Unicode Windows 98 The Quick Brown Fox Jumps Over The Lazy Dog. Regular
Lucida Console Windows 98 The Quick Brown Fox Jumps Over The Lazy Dog. Regular
Microsoft Sans Serif Windows 2000 The Quick Brown Fox Jumps Over The Lazy Dog. Regular
Palatino Linotype Windows 2000 The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Franklin Gothic Medium Windows XP The Quick Brown Fox Jumps Over The Lazy Dog. Medium, Medium Italic
Segoe UI Windows Vista The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic

All but Palatino Linotype and Segoe UI have one major drawback: they all come without bold and/or italic variants.

ClearType collection[edit]

Font Sample Variants
Calibri The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Cambria The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Candara The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Consolas The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Constantia The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Corbel The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic

The "new" Windows ClearType font family introduced in Windows Vista has consistent font metrics, but these do not match with the core web fonts listed above, so they need to be scaled when mixed.

Common Linux fonts[edit]

Font Sample Variants
Nimbus Sans L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Nimbus Roman No9 L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Nimbus Mono L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Century Schoolbook L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
URW Gothic L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
URW Bookman L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
URW Palladio L The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
DejaVu Sans The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
DejaVu Serif The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
DejaVu Sans Mono The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Liberation Sans The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Liberation Serif The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
Liberation Mono The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
FreeSans The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
FreeSerif The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic
FreeMono The Quick Brown Fox Jumps Over The Lazy Dog. Regular, Bold, Italic, Bold Italic

Monospace fonts[edit]

When displaying code, a monospace font helps keep code readable and maintain formatting consistent, but there are caveats. Below are some common monospace fonts.

Courier New The Quick Brown Fox Jumps Over The Lazy Dog.
The Quick Brown Fox Jumps Over The Lazy Dog.
Consolas The Quick Brown Fox Jumps Over The Lazy Dog.
The Quick Brown Fox Jumps Over The Lazy Dog.
Andale Mono The Quick Brown Fox Jumps Over The Lazy Dog.
The Quick Brown Fox Jumps Over The Lazy Dog.
Lucida Console The Quick Brown Fox Jumps Over The Lazy Dog.
The Quick Brown Fox Jumps Over The Lazy Dog.

Not all monospace fonts come with a bold weight variant, causing bold text to mis-align with the rest of the text. Andale Mono and Lucida Console suffer badly from this. That leaves Courier New and Consolas as the only safe choices when bold and italic highlighting is used. It is best to let the browser decide which monospace font to use.

The monospace 'bug'[edit]

When viewing monospace text here on Wikipedia, an often heard complaint is that it is shown too small. This is actually not a bug, but a result of the combination of a website's default font size and the browsers default font size for monospace. By default, a (Windows) browser has its default font sizes set at 16px for serif and sans-serif, and 13px for monospace.

Vector has a base font size of 0.8em, and most browsers *correctly* scale down all fonts, including the monospace font, accordingly. So monospace is shown at 0.8 x 13px = 10px (which is perceived as 'too small'). But when you assign any font besides just "monospace", those browsers will no longer treat it as monospace and use 0.8 x 16px = 13px instead. Except in IE (where you cannot set any font sizes), it appears to use 13px regardless of the web page's base font size.

See also[edit]

References[edit]

  1. ^ "Windows font survey results". Code Style. Archived from the original on 2013-04-25. 
  2. ^ "Mac font survey results". Code Style. Archived from the original on 2012-02-10. 
  3. ^ "Linux font survey results". Code Style. Archived from the original on 2012-03-15. 

External links[edit]