Design/Typography

Note
This document refers to font sizes in hard points. This is for demonstration and documentation purposes only. During implementation, font sizes should be described in em units.

Typography audit
An audit of Wikipedia's existing typography usage can be seen at the Typography Audit sub-page.

As shown by the audit, most of MediaWiki is currently font agnostic, specifying font-family as simply 'sans-serif'.

Typeface selection
In 2013, the actual Agora CSS module specifies font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; but only for uses with the Vector (default) skin, and only on an opt-in basis for text within areas given mw-ui-* CSS styles.

♙

The rest of this section must be out-of-date.

Wikimedia Foundation projects must provide a consistent experience to every user on the planet. The typographic goals for Wikimedia Foundation interfaces include: Pursuant to these goals, we have selected Arial as our global typeface for all content and interface elements. The primary reasons for this are: This selection may change as other typefaces develop ubiquity. However, in the near future, Arial will continue to serve as WMF's standard typeface with sans-serif as a fallback.
 * Readability: We must select typefaces that are screen-reader friendly.
 * Accessibility: We must not inhibit readability for users with visual impairments (including dyslexic individuals).
 * Availability: All typefaces we use must be already available, or made available, to our users.
 * Arial is freely available on nearly every computer and operating system on the planet.
 * Arial is a sans-serif, screen-friendly typeface.
 * Ubiquitous serif typefaces (e.g. Times New Roman) were excluded because they are not as readable to dyslexic readers.

Type size
MediaWiki's default vector skin sets font-size for #bodyContent at 0.8em, this becomes 13px in Chromium and 12.8px in Firefox.

Line spacing
Wikipedia's line-height for paragraphs in skins/common/commonElements.css is 1.5em, thus 150% of the type size itself.

The statement below is contradicted by the CSS and doesn't seem to be followed anywhere.
 * The standard for content line spacing (or line height) is 120% of the type size itself. For example, the line height for 10pt content would be sized at 12pt.

Grids

 * Grids are Good - SXSW Presentation
 * Thinking with Type: Grids
 * Setting Web Type to a Baseline Grid - Opera Browser Guidelines
 * Typography Is a Grid - Hyphen Press
 * On the Grid - Khoi Vinh (Design Lead @ NY Times)
 * Applying Mathematics to Web Design - Smashing Magazine

Paragraph justification and accessibility concerns
Blocks of text should never be centered or fully-justified. This creates a "gutter" effect which can appear as a moire pattern. Always use aligned text (left for left-to-right languages; right-aligned for right-to-left languages).

Dyslexic individuals can have difficulty reading text on colored backgrounds when the intensity of the text color approaches that of the background.

Other things to avoid include the use of capitals for emphasis, italics, and serif fonts.

Providing Shift and Emphasis

 * Bold or italic are mutu­ally exclu­sive.
 * Only one shift is required for emphasis
 * If you italicize, one does not need to bold. Too many signals for emphasis create chaos.
 * The sec­ond rule is to use bold and italic as lit­tle as pos­si­ble
 * They are tools for empha­sis. But if every­thing is empha­sized, then noth­ing is empha­sized

Research references

 * Case Study — Typographic Design Patterns And Current Practices (2013 Edition)
 * Lighthouse International: Effective Color Contrast
 * Lighthouse International: Making Text Legible
 * Web Design for Dyslexic Users
 * Web Designing for Dyslexia
 * American Foundation for the Blind: Web Accessibility
 * Thinking With Type