Typography refresh: A new look for text on Wikimedia sites

Soon, we’re releasing a small but important update to the typography on the desktop version of Wikimedia sites. All Wikipedia readers and editors will see the change one week from today (Thursday, April 3rd), while other Wikimedia sites will receive the update earlier, on Tuesday, April 1st.

We approached this change to Wikimedia’s default typography with the following requirements in mind:

  1. Readability: Type must be readable and beautiful at all sizes and in as many scripts as possible. Type is also an element which must help differentiate interface elements (such as site navigation) from article content.
  2. Consistency: A consistent visual experience across desktop and mobile devices. A growing proportion of our readers and editors access content on multiple such devices.
  3. Availability: All typefaces we use must be already usable (or made available) on all platforms where Wikimedia projects are present. Any selections must degrade gracefully across devices and platforms (Mac OS X, Windows, Linux, and mobile operating systems).
  4. Accessibility: Wikimedia content must be highly accessible to all, including those with impairments.

What’s changing

Our sites have historically used text styles which present many issues at small sizes and in non-Latin scripts. Most prominently, all body copy and captions were small with tight leading, while font families for body text and headings were set merely to use your browser’s default sans-serif font. This haphazard set of defaults created a lot of readability issues that have not been consistently addressed, until now.

Changes we’re releasing include: increased text size for body content plus headings, specific font family settings for body text, serif headings to help you scan long articles, improved leading and spacing between sections, and other minor updates. In the long run, we may explore delivering a single font stack to all via web fonts. For now, we have opted to release this incremental improvement, which does not require you to download additional fonts and thus will have far less impact on page load times, if any.

screenshot

An example of old typography (above) and the new (below) on OS X. More comparisons are available on the project FAQ.

How we tested and introduced these changes

These efforts began more than a year ago, with the release of new typography for mobile web browsers. Later, we introduced very similar typography on an opt-in basis, using the new beta features framework that makes experimental new functionality available to those who log in via desktop. During this desktop beta, the new typography was tested by over 14,000 people on the largest Wikipedia communities alone. Thank you to all the community members who participated in the discussion and provided feedback. Your help was invaluable.

Learn more

We have an extensive FAQ available, if you’d like to delve more into our rationale for some changes. If you have additional unanswered questions, please contribute to the associated Talk page, or leave us a comment here.

Vibha Bamba, Senior User Experience Designer

Steven Walling, Product Manager

Categories: Design, The wikis
Categories:
48 Show

48 Comments on Typography refresh: A new look for text on Wikimedia sites

Deeks 4 months

ahhh it proves wiki is ignoring the people the site is shite bring back the ld look and feel

Link0ff 7 months

Serif hurts my eyes, and I get a headache from reading words written in a serif font because the brain needs additional CPU cycles to recognize words with visual noise from small lines attached to the end of a stroke.

But using serifs only in the headings is fine since headings constitute only a small percentage of the whole text.

Christian 7 months

Cuando entré a Wikipedia la semana pasada al ver el cambio de fuente leer fue mucho más fácil y fluido, además de que le daba un toque diferente y agradable a la vista, al parecer a muchos no les ha gustado y por eso tal vez regresaron a la font normal.

Patrik Ohlson 7 months

I do not like this change at all. I’m on IE9 mosly and the text is too large with too much leading. It feels as if I’m reading “through” the text chunks (or between the lines).

Ironically, the typography in this blog and in these comment fields, still feels as ‘old’ Wikipedia felt. Easy to read and fast to grasp…

Skip 7 months

Very nice and clear look on Linux desktop in Firefox. The readability is much better than before, everything looks more structured.

Another nice effect is that the overall design doesn’t appear so poor now, it seems more modern and sophisticated to me.

Mahmoud 7 months

I don’t think it’s quite as bad as some of the others in this thread, but I agree with Jared that there’s more work to be done. My main criticism is strictly a design one, that the serif heading, a normally subtle feature, often makes too clashy of a statement with user content.

Anyways, I put the full extent of my thoughts here: http://blog.hatnote.com/post/82089372523/the-wikipedia-typography-refresh

It’s still very much a worthy effort, so keep up the good work!

David Burnham 7 months

Every one of these comments is god damn insane. You’re all insane.

leonardo.conti 7 months

hi, I have too many problems for read the new font of wikipedia. The italian staff suggest me to change the option of my monitorvideo card but I have problems for read. Also from different monitor and with different light conditions(so the problem isn’t the monitor or pc) and using different browser. I think this is a not good solutions, and prefer a different font. thanks.

mikrot 7 months

You say: “Accessibility: Wikimedia content must be highly accessible to all, including those with impairments.”

Well, with this change you just made Wikipedia harder to read and more… inaccessible for low vision users!

Please go back to the “old” accessible font!

Eric 7 months

There will be no donations from me until these changes are reverted. However in the meantime, does anyone have any ideas for running a plug-in (something in the veins of ScriptMonkey could work) that changes the CSS to the old typeface without having to log in to change the skin from there?

Luca 7 months

Loving the changes!

Chrysanthi Lykousi 7 months

Typography refresh and sans-serif fonts in general are horrible and make me not want to read Wikipedia. Typography refresh doesn’t respect my browser default font (serifs) and forces me to use what the designer wanted. Please revert back to the old design before typography refresh or allow the user to read Wikipedia with the browser’s default font, or at least change from sans-serif fonts to serif fonts. Sans-serif fonts are impossible to read and if a website cannot be displayed with my browser-default serif fonts then I refuse to stay on that website and I leave because sans-serifs are bad for the eyes. There is a reason why all books use serif fonts. Please respect the user choices in our browser default fonts. Wikipedia was wonderful before typography refresh and now it’s horrible.

Tyreek 7 months

The new MediaWiki is just horrible. People can just zoom in with their browser like chrome, IE, etc to get a better view. The times new roman and the spaced text and enlargment is just horrible.

Valeriun 7 months

I’m sorry, but this is just a horrible decision.

I get a headache from this new font.

Smart Decisions 7 months

This is the end of Wikipedia. No more money!

another user 7 months

Oh my god, revert change back!
current firefox has bugs and horrible page display
reddit .com/r/firefox/comments/2284h6/why_does_firefox_render_the_new_wikipedia_font

Now instead of reading whole words i reading letter by letter. Awful!
Please, revert it back and don’t touch anything!

Christopher 7 months

Hello,
Serif titles are a graphic step back but I like the lighter body text.
From a fan of UNIGRID …

Ian 7 months

When is Wikipedia going to fix the problem of the font size being non-standard? It’s set to 0.875em now (instead of the 0.8em we’ve had to work around for years), so it only requires one size-up in my browser (instead of 2), but it’s still smaller than it should be. MacOS 10.6, Firefox 2 billion-ish.

Why should the type be “beautiful” rather than “functional” or simply “easy to read”? I thought Wikipedia was an encyclopedia, not a work of art.

Ross 7 months

On the bright side, the Visual Editor is no longer the worst idea ever.

awambawamb 7 months

just a simple sentence for this change: I cannot read anymore without getting an headache.

here is a screenshot:

Leave a Reply

Your email address will not be published. Required fields are marked *