Op-ed

Why we're updating the default typography for Wikipedia

Jared Zimmerman is the Wikimedia Foundation's Director of User Experience. The User Experience team is a part of the Engineering & Product Development department at the Wikimedia Foundation. Team members are responsible for the design of new Wikimedia software products—how they look, feel, and behave when used. User experience designers have been integral in the launch of Wikimedia software like Wikipedia's mobile website and apps and the new notifications system, among others.
The old typography (above) and the new (below) on Ubuntu using Firefox

On 3 April, we will roll out some changes to the typography of Wikipedia's default Vector skin, to increase readability for users on all devices and platforms. After five months of testing and four major iterations and through close collaboration with the global Wikimedia community, who provided more than 100 threads of feedback, we've arrived at a solution which improves the primary reading and editing experience for all users.

What's changing

First, you'll notice a serif typeface is now used for headers, to more clearly differentiate them from body content. Main body content is displayed in a sans-serif typeface using a very dark grey on true white background, which decreases eye strain for people reading long blocks of text. You also may notice increased leading (the vertical space between lines in a paragraph), to improve readability and create a clean break for the scanning eye.

The old typography (above) and the new (below) on OS X using Chrome
Why we've updated our typography

Text is our core visual element of Wikimedia projects, whether it's an encyclopedia like Wikipedia, or a smaller project like Wikisource and Wikibooks. We want our users to sense accuracy, reliability, and clarity from our design. We also want to avoid overly flashy typography that detracts from the content. Prior to this typography update, we had more than 20 arbitrarily defined type sizes on desktop alone, which appeared inconsistent for our users. The type size was too small for many readers, and the line height could make reading long form content difficult. We often observed users with visual impairments using text zooming to increase text size, for instance. For headings, these should act as entry points in long pages of text and were styled accordingly to aid readability. We sought to achieve better balance and cohesiveness for users to efficiently scan the page or engage in long form reading.

These changes will be familiar if you have accessed the mobile version of any Wikimedia project, as most of the changes were first trialled there in 2012. Later, with the release of the new Beta Features system for desktop, these changes have been available to desktop users on an opt-in basis since November 2013. We have used Wikimedia mobile as a place to experiment with new features and designs which we continuously migrate to desktop version of our sites. We have extended that process to the desktop beta features to further refine these changes to be appropriate for larger screens. With this typography update, we are taking another step towards a consistent visual experience across desktop and mobile.

Learn more

We are extremely pleased about how well this collaborative process has gone and we look forward to you sharing your experience with the update. The following pieces of documentation may be useful if you have further questions or comments: