Typography refresh: A new look for text on Wikimedia sites

Translate this post

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

Archive notice: This is an archived post from blog.wikimedia.org, which operated under different editorial and content guidelines than Diff.

Can you help us translate this article?

In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?

54 Comments
Inline Feedbacks
View all comments

[…] Referencia: Wikimedia […]

[…] Referencia: Wikimedia […]

[…] flossen viel Arbeit und Planung in das Wikipedia-Redesign. Ziel war es, die Lesbarkeit zu erhöhen und gleichzeitig ein möglichst konsistentes Aussehen […]

On a low resolution screen, all Wikimedia sites were readable and looked just fine with the fonts installed on the system. The web fonts used are not hinted and the different stroke thickness of the lower case f and t for example make it really hard to read. The classic “font-family: sans-serif;” (or serif) lets the user decide what font looks best on his/her screen. I ask you to change it back.

This is a horrible idea. It solves a problem that never existed and makes wikipedia harder to read. Now if want a reasonable font since I need to zoom out, which also makes images and the like smaller. All it really seems to do is take more space. If you want this new font there should at least be some option, ideally in a way that people like me who HATE this new setup can change a bookmark to get the readable option (e.g. http://en.wikipedia.org/wiki/Main_Page?readable=yes). Since it seems as though WIkipedia is run by people who have a self-reenforcing echo… Read more »

One good thing about browsers is that they let the user choose what font to use as a default. Most websites these days simply request serif or sans-serif and thus put the user in control. Forcing a specific font on users is bad if they are unaccustomed to it. Personally, I find the font you force on me unreadable – it’s too wide, has weird kerning and is slow to scan over. Please change it back and put me back in control.

I find the new font suffers some pretty horrible kerning issues with letters touching each other and stuff. Italics worsens the issue. Other then this, it looks okay.

The new body text font is causing contrast consistency problems rendering on Firefox, Win7. Larger versions of the font have much lower “ink pixel” density than smaller versions, until it hits a certain size. This problem is extremely common with font hinting, but it’s worse with this font than the one it used to render with. Also, there are a bunch of arbitrary differences between characters on what are normally similarly placed parts (like 5’s and 6’s middlemost horizontal segment, or the angle of the middle section on lowecase a). Please, at least give an option to change it back.

Bad, bad, very bad.

Horrible, please change it back.

I dislike the new font, and not because I dislike change! I am a graphic designer. The new font’s letters are too wide and too large for body type, and it has a really low x-height. I do like extended style fonts, but they are not good for large amounts of text. My text on a Windows 7 PC looks a lot lighter than your OSX example as well. If you were going for readability, why not a serif body type? Serifs are widely proven to be the most readable. Why a roman serif header, but then bolded sans serif… Read more »

” … some readers of Wikipedia might not even know there’s a change!”
Quote from Jared Zimmermann
I just opened Wikipedia this morning and the font change slapped me in the face.
I’m definately not against a change like this, but I’m not sure that Helvetica Neue is the right choice. Especially in Bold text, things like the i-dots disappear into the rest of the letter.

What’s wrong with the fonts? http://i.imgur.com/2a1mScy.jpg
Readability out the window.

And consistency adé since I will disallow Wikipedia to use his own fonts.

This change results in awful kerning and hinting issues on some systems, which renders Wikipedia virtually unreadable.
As a result, I removed the OSS fonts (Arimo, Liberation Sans) from my system. These fonts are absolutely worthless for display purposes, when anti-aliasing is disabled.
When the OSS fonts are gone, Wikipedia reverts to using Arial again. Good for me, bad for OSS! Get me right, I’m a believer in OSS.

this is a catastrophe. the readability is below zero. please let somebody do this who has an idea of what he is doing.

This is a horrible change!
Why serifs in the headings? It’s very ugly and weird looking and make the whole site look unprofessional. There was nothing wrong with the fonts as they were, so please change it back! I hope this “update” is just a april fools joke.
I should not have to rely on browser-plugins to fix this kind of poor decision!

I’m sorry, but this new change of font makes Wikipedia much slower to read for me. I want a tighter font, so I can read more words at a time. Letters in this new font are too wide.
I thus agree with Kassandra Porter – let me use the font I am used to, i.e. my standard browser font, without unnecessary hassle.

I honestly did not like it. The old font pattern was way better and way “wikipedian”.
Seriously, Wikipedia: sites like Google, Twitter and Facebook make horrible changes to their layout and that most users don’t like. Don’t be one of those sites and revert to the old font system.

the new body-font causes font-rendering problems with Mozilla Firefox v24 ESR and Win7 & cleartype=off.

Are we going to see a change soon? Or at least some sort of negotiability here? It is clear that this new font type is not being received well.

it is tremendous to see that a site as big as wikipedia can make an horrible bad choice. They have definitely chosen mobile users compared to home users.

second all the above comments asking to change the font back. Wikipedia looks awful now, nearly unreadable. I do not want to have to log in every time to see a reasonable-looking font. I note you did this without testing. Not smart.

It’s too bad that I just donated to Wikipedia. I’d hate if that were taken as I was voting with my wallet. I’m emphatically not. This must be one of the worst changes to the user interface in a long time (and that compared to the current vogue in UI design that is hole-in-the-head stupid like Windows 8, Gnome 3 and Ubuntu Unity). New font is ugly and unreadable; too big and with too much line spacing. (And grey to boot). What on earth was wrong with doing it *right* i.e. leaving it alone? That’s the last donation from me… Read more »

Hi guys, this looks awful, zero readability; when are we going back to the old fonts???

The new fonts are horrible and make everything MUCH less readable than before.

Spent quite a while checking and wondering if I have a problem with my PC, then find its universal. The font that wikipedia now forces on users is truly horrible. It’s like going back to a first attempt by an amateur at building a webpage in 1994, only much much worse. No doubt in a year or two there will be a black background, grey text and flashing banners in lime green and red for the full works. The font is unusable in Chrome Opera and Firefox in both XP and W7. So either fix it asap or you get… Read more »

The new fonts are terrible. I prefer anti-aliasing off and the main text font is a total mess. Thickness of lines in characters seems completely random. All “f” letters look like bold. I fixed the problem by deleting Arimo font from my system. Still not happy about Times in headings, but I’m not deleting that because of your site.

The rendition of the lower case letter “f” is enough to upset but that is only one letter of 26 so that statisticly it is only slightly upseting. I only checked German and Spanish … I use English, and I did not resize sceen.
If this serves the greater good of users then I say go with Dog …. I can put up with it …. until the Supreme Court gets ahold of it …..

It’s clear nobody likes it, please change it BACK. WHY are sites going for larger, fisher price style fonts? And using serif with sans serif, pure ugliness.

The only thing I wonder is, if anybody ever tested the font changes. How could no one see the pixelated look of the characters and strange thickness of some vertical lines in all the F’s? And italics are as ugly as they can get. Appalling changes, indeed!

just a simple sentence for this change: I cannot read anymore without getting an headache.
here is a screenshot:
http://imgur.com/3gEX7G6

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

[…] explained  on their Wikimedia blog, this approach is used following some key requirements to make it more readable, consistent across […]

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.

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

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!

[…] explained on their Wikimedia blog, this approach is used following some key requirements to make it more readable, consistent across […]

This is the end of Wikipedia. No more money!

I’m sorry, but this is just a horrible decision.
I get a headache from this new font.

[…] explained  on their Wikimedia blog, this approach is used following some key requirements to make it more readable, consistent across […]

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.

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… Read more »

Loving the changes!

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?

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!

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.

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

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!

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.