Typography refresh

Goals
Type is a core visual element of Wikipedia's language. The (opt in) typography update is based on these needs -

Readability: Typefaces must be legible and readable at all sizes. Type as an element must help differentiate interface from article content.

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 (OS X, Windows, Linux, Mobile Platforms)

Consistency: A consistent visual experience across desktop and mobile.

Key Changes
TLDR: Key changes as part of this will include: serif typefaces for headings, sans serif for body copy & marginal reduction of type size in navigational elements.

--

Headings font-family: Georgia, serif; Serif headings have been tested on Wikipedia mobile and have received a positive response.[clarification needed] With applying these changes to desktop, we are aiming for consistency between desktop and mobile styles.

--

Body copy font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; While Georgia and Helvetica are fonts optimized for the web, we can see that body gracefully degrades to Arial because it is freely available on nearly every computer and operating system while being a screen-friendly typeface. After that, there is a free font, Liberation Sans, and finally a fallback that is always available, sans-serif. This selection may change as other typefaces develop ubiquity. For the near future, Arial will continue to serve as WMF's fallback. On Linux-based operating systems, Nimbus Sans L & Liberation Sans will be specified as the sans-serif fonts. Note that free systems may also substitute other free fonts for proprietary ones mentioned earlier in the stack.

--

Reduced type size for navigational elements: Type size for navigation elements in the sidebar are reduced by 0.1–0.3 em to help them fade to the background in comparison 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.

Implementation
The specific CSS changes can be found at https://git.wikimedia.org/tree/mediawiki%2Fcore.git/HEAD/skins%2Fvector%2Fbeta (See Requests for comment/LESS for details on the dynamic stylesheet language, LESS.)

If you are interested in further technical information on the rationale behind this experiment, you can read more at Wikimedia Foundation Design/Typography.