Typography: serif vs. sans-serif
In Typography: serif vs. sans-serif, Faruk Ateş talks about the pros and cons of serif and sans-serif typefaces on websites.
Like Faruk states, the answer isn’t black-and-white – it depends on a lot of things. A few years ago I came across an interesting research paper on the subject: Skärmläsning (PDF file in Swedish, with an abstract in English). After doing extensive testing the authors came to the conclusion that Georgia (a serif typeface) is more legible than Verdana (a sans-serif typeface).
It would be very interesting to know how the excellent anti-aliasing in today’s modern operating systems affect the legibility of serif vs. sans-serfi typefaces at various sizes. Even more interesting would be a comparison between the different anti-aliasing methods used in Windows and Mac OS X. Is one better than the other (as in does it make text more legible)?
- Previous post: 9rules Network member
- Next post: A List Too Far Apart?
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Another big factor in the legibility equation is the high percentage of budget monitors that are out there, an often underestimated group. So when people test and its legible on their dev machine or their swanky new mac in the office its overlooked that a big horde of users are suffering lousy refresh rates and blurred screens.
There seems to be something wrong with the link. All I get is a Coming soon... page from godaddy.com.
As nortypig comments above, the quality of the monitor, and whether it has been well calibrated will play a role in the readability of fonts. Serifs at small sizes on a poor monitor will always be harder to read, whatever the quality of smoothing technologies. Another factor is the environment: background colour vs. colour, but also brightness of the monitor and surrounding light.
And I agree with the authors of that study (which I can't read, Georgia is a much more readable font than Verdana in a variey of environments. As an alternative sans-serif font, the Lucida family works pretty well, both on OS X (Lucida Grande), Linux (Lucida) and Windows (Lucida Sans Unicode).
As someone who uses both - Mac OSX out of choice and XP out of necessity ;) My opinion is that OSX (Quartz, I believe?) is FAR superior to XP's ClearType.
I'm sure I read a study somewhere that concluded serif fonts were better for legibility as they gave the reader more styling cues with which to establish each letter's identity - but that doesn't seem to hold true for fonts displayed on screen, where simplicity seems to improve legibility, especially at small sizes.
I had always considered Verdana to be the clearest to read but Georgia has won me over recently - so I'd have to agree with the Swedish report. I know that some people hate Trebuchet MS but I thinks it works well at some sizes particuarly for headings.
Steve, have you properly configured your XP's ClearType. I've read that the configuration/calibration process of ClearType can improve the perceived quality very much.
I don't have access to XP so I can't test it for myself but I've seen a few screenshots which please my eyes more than the font rendering on my mac. I find the anti-aliasing quality of Quartz text, especially in smaller sizes and certain fonts, a bit disappointing. My main problem is fuzziness, especially in the vertical direction.
It seems that the ClearType algorithm prefers using the whole pixels for better contrast in expense of font shape and spacing. Quartz gives us better shape, but also less contrast. Quartz anti-aliasing is also much less adjustable by the user, I'm not sure if that is because of the algorithm or just an user interface issue.
Thanks for the info. We've been recently debating on which fonts were the most readable, so this came at a good time.
@Jonas
I just checked and couldn't see any settings for ClearType, where are they please?
My main issue is that ClearType often looks more like a badly executed drop shadow, blurring the text rather than picking it out. Also, it seems to vary app to app, whereas Quartz gives consistent results.
Also, don't know if this is typical, but my XP installation had it turned off by default (Quartz font smoothing is on by default) so how many 'regular' users would even know it was there?
Steve, settings for ClearType are not a part of the XP distribution but a Powertool for it can be downloaded from Microsoft (or one can use a web interface). This link is to the ClearType homepage of Microsoft. Download information is there.
You're right, 'regular' users have no idea about those. I'm not sure what the XP defaults to but the XP machines I've seen at my school have been quite bad in regard to font quality. On the other hand Quartz is not always configured right either. My laptop came with font anti-aliasing set to "best for crt" . Which is much worse than the subpixel anti-aliasing that Quartz can provide.
@Jonas
Ditto! You're right, I'd forgotten my powerbook was set to CRT aliasing out of the box... and thanks for the ClearType link :)
Seems Apple and MS are equally guilty of not exploiting the produtcs they ship to their best advantage. Can't claim to understand the term sub-pixel... ?
From ClearType Powertool wizard:
ClearType is not meant for CRT monitors. There is the 'standard' anti-aliasing functionality for them.
However, after using Powertool to configure ClearType on my 17" Philips CRT I found it to look better than the 'standard' version.
BTW. From the Powertool you can learn Verdana and Georgia were made by the same people - Matthew Carter and Tom Rickner.
What I find remarkable is the fact that with the many differences in systems (OS, PC, Mac, browser types, monitors, display cards) and the given skills of the people using those systems - that this conversation is still "on-going".
This is one of those "if I had a nickel" discussions... each of us has some 'higher' level of computer expertise, that the majority of people using computers do not - AND more importantly do not care to obtain.
I have helped people who purchased computers 1 month, 1 year, or multiple years ago and who have NEVER adjusted the monitor settings from how it was set/bounced around from the factory. Wide black boarders, shifted to one side or even twisted (trapezoidal, rotation, etc), still at 640x480 or 800x600. They are interested in doing one or two "things" with their systems and do not care to learn more - and they represent the majority of computer users... "WE" represent the minority!
We can laugh all we want about the person using the CD tray as a cup holder or whatever - but that is who is using "our work". Lowest common denominator sucks!
While talking about settings (Clear Type, resolutions, font styles, etc) which helps our work be more legible is a great discussion - it assumes the visitors to our sites will also make those settings to match "our designs". Unfortunately - it ain't happening...
Just like the W3C Standards work – what about getting system builders & OS makers to deliver systems using “high grade” settings by default as the norm, instead of the lowest settings and then assuming the purchaser will learn and adjust the setting to more respectable levels.
Barring that – you are left to make a decision, based on your sites primary visitors. Support them and leave the others to learn & adjust – or just go away.
Here's another discussion I ran across about serif vs. sans serif type.
Sorry, comments are closed for this post.