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.
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.
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.
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:
Discuss this story
The solution that has been suggested so far will lead to worsening readability. According to Tschichold we use sans-serif fonts in headings and serif fonts in the main text, not the other way round. If it will be introduced as is, you should please include a switch to turn it off in preferences. Otherwise you will suffer the same setback as with the visual-editor disaster. I won't use this stylesheet.--Aschmidt (talk) 14:24, 29 March 2014 (UTC)[reply]
Hm.
All the best, Rich Farmbrough, 15:21, 29 March 2014 (UTC).[reply]
Level 2
Level 3
Level 4
Level 5
Level 6
h1, h2, #firstHeading {font-family:sans-serif !important;} body {font-family:serif !important;}
- This would be a much more drastic change, as you can see!Let people know how to try it out
It's not clear from the article above, or even from any of the linked references, how to try this out. The information is obfuscated in the sentence, "Later, with the release of the new Beta Features system for desktop, these changes have been available to desktop users ...". Could you please edit the above to put in the lead, "To try this feature out, go to Preferences → Beta features, and enable "Typography refresh". (I have to say, for a UX person to miss this, is a little bit ironic.) Klortho (talk) 17:16, 29 March 2014 (UTC)[reply]
Give it a chance
It's unfortunate that the Wikipedia community seems so negative toward any design changes being made. Perhaps that's true of all websites, and Wikipedians are just able to be much more vocal due to the nature of the platform. I think this is a huge improvement, albeit I didn't when I first turned it on. After a few days I got used to it, and the changes are much more obvious when you look at the comparison images. Hopefully we see better reception for Flow and VisualEditor's respective releases, but perhaps that's too optimistic. Thanks to the Design team for the work they've put in, hopefully we can move past early 2000's web design without too much friction from users. --Nicereddy (talk) 01:22, 30 March 2014 (UTC)[reply]
Talk pages
I love the typography changes on article pages... but they're making talk pages almost unreadable for me. Can someone point me to a way to selectively disable this outside of NS0, or am I going to have to disable the whole thing? Kevin Gorman (talk) 16:35, 30 March 2014 (UTC)[reply]
Not willing to change
I'm not sure what you call it, but when I'm signed in everything looks the way it did when I joined Wikipedia in 2007. So I assume I get to keep the typefaces that I have.— Vchimpanzee · talk · contributions · 17:19, 31 March 2014 (UTC)[reply]
Mr*|(60nna)00:12, 1 April 2014 (UTC)[reply]How to tell if you've got font aliasing turned on...
It's worth noting that the new look is horrendous if you've not got font aliasing turned on (ClearType or similar) whereas the previous look was fine without. Like really, really horrible. I'm not sure what %age of people will find a problem with that, but I suspect it's non-zero and deserves a mention in the FAQ (and possibly more prominently than that for users of OS like XP that don't have aliasing on by default). As a clue - if all the "f"'s look like they're in bold, then you need to switch on font aliasing. Le Deluge (talk) 20:16, 3 April 2014 (UTC)[reply]
Difficult to read
This new font is too narrow and high, as if I was trying to read barcode... - Ermöglicht (talk) 20:19, 3 April 2014 (UTC)[reply]
These changes are absolutely awful. I created an account just to say this. I seriously don't recall ever installing Linux Libertine or Liberation Sans on my Windows 8 machine but there they are, seemingly out of nowhere. Liberation Sans looks like total garbage. The new leading is very excessive. What were you people thinking? VolvoV70guy (talk) 20:43, 3 April 2014 (UTC)[reply]
Completely agree with the sentiments above. This font is a lot harder to read now. I'm not going to get reading glasses just so I can still read wikipedia articles. J Bar (talk) 01:28, 4 April 2014 (UTC)[reply]
I think it's worth pointing out the the sample pictures provided are of a corner of a page on a very short article. I've actually found that while viewing small amounts of text, the new typography is superior. But when I'm looking at a full screen of it (1680x1050) it literally gives me a headache and I'm not exaggerating. I think this is another example of the creep of bad design due to phones, similar to how all major websites these days seem to be moving towards excessive (size 18) body text.
Bad Design
Wow, this is just awful. The text is now way to big for me to read comfortable and the font makes everything look messy. Please create an option in our preferences so we can set the typography back to the original ASAP!--Dom497 (talk) 21:03, 3 April 2014 (UTC)[reply]
Thanks, it's definitely worse to read on my laptop. Letters melt into weird ligatures, all f-s seem to be in bold, etc. Looks like it was designed by people with big screens. --Oop (talk) 06:30, 4 April 2014 (UTC)[reply]
Consideration for folks with font smoothing disabled
It's clear you guys didn't test without font smoothing or you decided that it wasn't worth the consideration. Think about how much of the population prefers font smoothing disabled to improve readability. There are some font smoothing that works well (Mac OSX) while font smoothing elsewhere does not and reading text with it on is a readability pain.
Incomplete testing + no mention of supporting readability cases where font smoothing is on or off = terrible decision making. Nommus (talk) 23:54, 3 April 2014 (UTC)[reply]
I like the changes. It will take some getting used to, but as a designer, I do like the choices. Linux Libertine is a really high quality free and open font, it looks great in the big Headlines. I wouldn't want to have it as small text on a screen, though -- too delicate.
I noticed I did get Liberation Sans for the body. I thought I had Arimo installed, too. But maybe I decided they are so similar, I only need one... Now I installed Arimo again, will see if I notice the difference. Anyhow -- both have more character than Arial. I never liked the spiked t of Arial ;)
There are of course visible differences between browsers. I have tried Opera 12, Opera 22, Firefox 28, IE 11, all on Win7 with font smoothing on. To me, the old Opera rendering looks best with the copy text. The leading is good and really makes a difference in readability with the long lines you get when you have a fullscreen browser window. I still will scale everything a bit larger, since my screen is quite a bit away from my eyes. --87.157.78.253 (talk) 20:57, 4 April 2014 (UTC)[reply]
Helvetica should map to Nimbus Sans L,but it wouldn't hurt to include it explicitely (it has 100% penetration on Linux), so it would become:"Nimbus Sans L", "Helvetica Neue", Arial, sans-serif;
. Also, I brought up anohter idea on MediaWiki that may deserve some thought. — Edokter (talk) — 00:20, 5 April 2014 (UTC)[reply]Really in the dark ages, but happy!
How to determine which Font are being used in your Browser?
Where to download Fonts?
This hasn't been thought out well...
Put Arial over Liberation c..p
Please put the normal font Arial over that s..t called Liberation. With Liberation there is no letter which looks sharp, the curved lines are asymmetric, strokes have DIFFERENT width, connection of strokes and curves look dirty, etc. It is completely unusable!! 37.192.250.101 (talk) 03:31, 5 April 2014 (UTC)[reply]
Bold italics?
I thought something was amiss the moment this was rolled out: anything now coming up in italics now looks bold as well, which is just horrible, and very messy when reading or editing biographies of writers or actors. - SchroCat (talk) 19:15, 6 April 2014 (UTC)[reply]
Why not a new skin?
I looked up for this gadget but didn't find anything. My prefs page only offers the four skin types and the optional CSS (the offered retro-fitting CSS is buggy, there are various error messages). Edit: even under "Gadgets" there is nothing that fits. Could you please describe me, where exactly this old Vector typography switch can be found?Found. It was probably a cache problem in the browser that prevented it from appearing. But it doesn't work anyway, so I switched to Monobook.--SiriusB (talk) 15:58, 11 April 2014 (UTC)[reply]Origin of serif type: a relic of the past
The Vector skin should really NOT have been changed. Why not keep the old Vector, and use the new "Vector 2014" as the new default?
- ¡Ouch! (hurt me / more pain) 08:06, 22 April 2014 (UTC)[reply]