Design/Typography

Type is a core visual element of Wikipedia's language. The choices around typography are carefully considered for
 * Readability: Typefaces must be legible and readable at all sizes. Type as an element must help differentiate interface from article content/ real information
 * Accessibility: Dyslexia and visual impairments must not get in the way of access. We must enable access for users with impairments.
 * Availability: All typefaces we use must be already available, or made available. Any selections must degrade gracefully across devices and platforms (Windows, Linux, IOS)
 *  Consistency' : A consistent visual experience across desktop and mobile.

Vector Typeface Specifications
Headings

font-family: Georgia, serif;

''Serif headings have been tested on Wikipedia mobile and have received a positive response. With applying these changes to desktop, we are making a choice for style and consistency.''

Body Copy

font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;

While Georgia and Helvetica are font optimized for the web, we can see that both heading and body gracefully degrade to Arial because it is freely available on nearly every computer and operating system while being a screen-friendly typeface. This selection may change as other typefaces develop ubiquity. However, in the near future, Arial will continue to serve as WMF's fallback.

Linux: Nimbus Sans L & Liberation Sans will be specified as the san-serif fonts for Linux Operating Systems.

Type size
A Typography Audit is available here. It shows a lack of in-consistent type sizes and colors.

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

Type size for navigation elements in the left are marginally reduced by 0.1-0.3 em to help them fade to the background in comparion to the article which is the foreground. Since the navigation areas are distinct, we expect that changes in the size will not hamper clicking on the links.

Paragraph justification
We avoid justified type for paragraph blocks altogether. Justified type creates 'rivers' and has a "gutter" side effect which can appear as a moire pattern. We will employ aligned text (left for left-to-right languages; right-aligned for right-to-left languages).

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

Providing Shift and Emphasis

 * 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