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.

Typeface Selection
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.

Line Spacing
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.

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

 * 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

Code Snippet Context
Each code snippet on this page is self-contained, unless stated otherwise. This is done to allow individual snippets to be pasted into Wikimedia Foundation projects on an experiment-by-experiment level. Eventually, each of these design standards will be integrated into our core CSS library. When this occurs, style names and additional guidelines will be updated on this page.

Note: Convert pt units to em units prior to utilizing these snippets.

Headings
Explanation here.

Paragraphs
Explanation here.

Captions
Explanation here.

Interface Elements

 * Buttons
 * Icon Labels
 * Form Labels
 * Form Text
 * Menu Labels
 * Notifications & Alerts
 * Tooltips
 * Help Text