Serif vs. San-Serif
June 7, 2004 at 8:43 AM
There is one rule in web design that we have stated many times before only to debate it and debate it again. We even went so far as to prove it and then defined it. I must admit serif typefaces look a lot better on a Mac with its aliasing, but that is about it... it looks better, it doesn't perform better. We remember that form always follows function right? So why are we still seeing designers who insist on using serif typefaces for the body of large blocks of text? I have no idea. If you disagree, post a comment here and prove me wrong with facts specifically devoted to online screen reading.
A student of mine recently investigated this issue from the point of view of a dyslexic, and came up with some interesting conclusions. Although much evidence from big research projects suggests that, from an accessibility point of view, san serif typefaces are better, on beige or pale coloured backgrounds, other evidence suggests that serifs allow the eye to determine differences between characters (lower-case l and upper-case I for example) in large bodies of text. Most of this research looks at print, of course. When the grade for this project is confirmed, I'm going to ask the student if I can post his work online as a PDF. In the meantime, here's some advice from people who should know, the Web Design for Dyslexia site
This is a debate that is almost like East side vs West side. I'm not so much a 'fact' person, my memory is spotty and like pop-culture I can't remember who said what when. Could be selective hearing, but here's the closest thing to fact I've got rattling around in my head. There are plenty of studies (so I've heard) about how serif fonts are great for body copy because the shapes lend themselves to reading several letters at once rather than letter by letter. However, when anti-aliasing is not available those wonderful things about serifs slip to the wayside. Not because these ideas fall apart but because you can't get the weights and subtlties that create those great characteristics that make reading easier. I have a couple things that go into chosing a font: Does it appropriately support the message? Is it readable? Of course, the first is the most impor..er.. fun. So, as a 'designer who insists on using serif typefaces' perhaps it is a context vs content debate.
While I do believe many serifs are difficult to read on screen, especially without anti-aliasing, it seems to me that Georgia works okay. It was designed for on-screen use and intentionally avoids most of the problems with serifs on-screen.
Jonathan: thanks for the information about that project. I actually have a brother who has Dyslexia (or at least partial Dyslexia). Of course, when that issue is brought to the table things get much more complicated. Kirsten: Are you sure you are not referring to printed body copy? Cause I haven't seen a study that support the idea that a serif font is easier to read on screens. If you are referring to screen reading, then I guess I will have to wait to see the studies and facts found. As far as aliasing goes, this is only valid on the MacOS as far as I am concerned. Not everyone uses a Mac. I have nothing against a Mac but I have to consider the Web's full audience here, not just one portion of it. Jeff: I'll have to check out Georgia, is it also available for MacOS and Linux?
While Georgia is better than most, I have to site with Nick in general. I always get a bit of a twinge when I see a serif font used for body copy -- I'd never say "never" use a serif font for body copy, but...
Nick, there's a more recent Usability News item than the one you cited. Conducted two years later with more fonts, the Comparison of Popular Online Fonts found “no significant differences in reading efficiency … between the font types at any size” but “Verdana appears to be the best overall font choice” because it is “the most preferred, it was read fairly quickly and was perceived as being legible.” [Emphasis mine.] (And yes, I use and like Georgia for body copy at my site largely because it scales well; I do allow users to switch, on a per page basis, though.)
"I must admit serif typefaces look a lot better on a Mac with its aliasing, but that is about it." You must be forgetting those of us who have ClearType enabled on our Windows XP systems. Anti-aliased text isn't a Mac-only feature.
Craig: good points, however there were "no significant differences in reading efficiency" yet, they also state that there were "significant differences in reading time." Time (i.e. performance in my book) is what we are looking at here. Scott: True, but there are only a fraction of users on the web today who would know how to enable this on XP much less change the size of the font within their browser if the designer defined the fonts in EMs. With that said, I would like to keep this on the topic of unmodified, native platforms and browsers.
But why dismiss hundreds of different typefaces based on a simple (and simplistic) classification? I've seen serif typefaces that are a lot more legible than some sans serifs, and the reverse is often true. A well-designed typeface is designed with certain purposes in mind. I find Georgia good-looking both aliased and anti-aliased, because it was designed to be used, among other places, on screen. Typefaces have their own semiotic system, and evoke certain feelings. A serif typeface is appropriate in some instances, a sans serif one in others. But the designer's job is to ensure readability first and foremost. I don't believe advocating one rule for all situations will ensure that a "designer" (and remember lots of "designers" aren't really designers) might think any old sans serif face is better than a well chosen serif face, and that's plainly not true.
Nick: Linux has a great advantage then: it has antialiasing, and subpixel-rendering as well out of the box.
Balazs: I guess the flavor of Linux I used to run didn't have those features... certainly not aliasing. What flavors are you refering to in specific? Jonathan: I agree.. and please, if there are better serif type faces out there for the screen, by all means let us know about them. :)
Georgia is not my favourite. Really not very subtle font for me. It looks "busy" and draws too much attention at bigger sizes. I also don't particularly admire the varying height of numbers of this font. One might consider trying Book Antiqua (windows) or Palatino (Mac) fonts. These are similar fonts and looks pretty OK. Besides their lowercase letters are relatively smaller than in Georgia and I like it :) By the way, on Win2000 you can also turn on smoothing of screen fonts, but it looks like no one does it.
Linux aliasing: SuSE 9, which is what I have on my machine, has it, although I've noticed it doesn't really go in Firebird so much as Konqueror. I'm guessing, though, that it's a KDE thing.
Ok, so I just enabled ClearType on my XP box here just to see how some existing designs would show up as. I have to say, it looks like crap. Instead of offering nice smooth fonts, it offers only what I would classify as a quasi-boldness to the existing font... making the font thicker in areas and standard thickness in others. It reminds me of an over-inked typewriter. Clearly this is not a real solution for those with fonts set around .78em or so... and anything smaller than that is near impossible to read... far too blurry. If your on XP, enable it and give it a spin, I am sure you will see the same results.
Is joke, yes? This page uses Georgia. :)
My apologies: got a wonky page load with a serif font, which disappeared when my comment went through :) I thought it was an ironic post. But no: I apologize and hang my head. Should've checked the CSS. IMHO, Georgia's pretty nice, though number heights can be a concern. I often find it nice to use it as opposed to a sans. That's really the only websafe serif I can stand though.