Brishen forwarded me the following question, that I’m hopeful one of you web and/or designer types might have an answer for:
Hey guys,
I’m writing to all of you since you know something about the subject, and i’m looking for answers.
i’m having a debate with [a guy at my work] about the reason why sans-serif fonts have become the unofficial standard for type on the web. the reigning logic is just that “it’s easier to read on screen” whereas serif faces are easier to read in print. i need to know if there’s any backup for this argument. he says it’s just subjective aesthetics. i say it has something to do physiologically/perceptually with the way your eye processes backlit images versions reflected-light images (i.e.in print). i have heard this a million times but don’t know of any real studies on this specifically or even where this theory even comes from.
so, would any of you know of any litterature with some real supporting information in it? either for or against would be good, i’m flexible about it. a million thanks if you do.
let me know,
I don’t have any sources, but my feeling on this subject is that the conventional wisdom holds up — at least if my anecdotal evidence holds any sway. I’ve found that when using serif fonts on the web, my clients only identify them as legible if they’re set at 15px+ height. Otherwise the majority opinion seems to be that sans-serifs are more legible.
That said, it could have to do with aliased text issues — on-screen (at least, for HTML text, which I’m assuming is what we’re talking about — not text set in Flash or in graphics), we lose the thick/thin contrast and gentle curves that tend to make serifs so much more pleasing to the eye in print. Sans-serifs in general (big generalization) rely less on those sorts of details for their shapes.
If my theory holds, what we really need are more serif fonts that are designed for screen use (and widely implemented, i.e. packaged with Windows (& Mac OS, too)), because Georgia is pretty good, but not ideal for every application.
I’ve never thought about the backlight issue, but it’s entirely possible that that contributes to the issue as well…
I don’t have any sources, but my feeling on this subject is that the conventional wisdom holds up — at least if my anecdotal evidence holds any sway. I’ve found that when using serif fonts on the web, my clients only identify them as legible if they’re set at 15px+ height. Otherwise the majority opinion seems to be that sans-serifs are more legible.
That said, it could have to do with aliased text issues — on-screen (at least, for HTML text, which I’m assuming is what we’re talking about — not text set in Flash or in graphics), we lose the thick/thin contrast and gentle curves that tend to make serifs so much more pleasing to the eye in print. Sans-serifs in general (big generalization) rely less on those sorts of details for their shapes.
If my theory holds, what we really need are more serif fonts that are designed for screen use (and widely implemented, i.e. packaged with Windows (& Mac OS, too)), because Georgia is pretty good, but not ideal for every application.
I’ve never thought about the backlight issue, but it’s entirely possible that that contributes to the issue as well…
I’m with Lauren on this one. I definitely think its a screen resolution issue. If the text is aliased, the serifs just become blurry. I’ve seen a couple of decent serif’d pixel fonts … including an italic one that’s gorgeous (why can i not remember where i saw it, dammit?). This will probably change as screen resolutions get higher.
Having said that, I’ve never really bought the various “easier to read” theories for serif/sans anyway.
I’m with Lauren on this one. I definitely think its a screen resolution issue. If the text is aliased, the serifs just become blurry. I’ve seen a couple of decent serif’d pixel fonts … including an italic one that’s gorgeous (why can i not remember where i saw it, dammit?). This will probably change as screen resolutions get higher.
Having said that, I’ve never really bought the various “easier to read” theories for serif/sans anyway.
It’s screen resolution. A serif is a subtle accoutrement. 12px high text doesn’t allow for any subtlety at all – it gets messy when you try to throw serifs into the mix.
Think of the way you read words – you scan whole words or sentences at a time. You don’t stop and sound out each individual letter. Why? Because you recognize the word form – that is, the shape the letters make with their various ascenders, bowls, strokes and so forth.
Serifs are a way of accenting each individual letter and making the form more unique to promote legibility, while keeping the typeface consistent enough to call it a font.
When you have all of two pixels on screen that are trying to represent a subtle curve that was designed to look good at 600dpi or greater, you’re going to see problems.
Not to say that sans-serifs aren’t problematic on-screen, but because the strokes are usually far wider than the serifs, they can be fudged far better.
Who knows, though. With ClearType and Quartz and increasingly higher-res displays, this may not be a problem for that many more years.
It’s screen resolution. A serif is a subtle accoutrement. 12px high text doesn’t allow for any subtlety at all – it gets messy when you try to throw serifs into the mix.
Think of the way you read words – you scan whole words or sentences at a time. You don’t stop and sound out each individual letter. Why? Because you recognize the word form – that is, the shape the letters make with their various ascenders, bowls, strokes and so forth.
Serifs are a way of accenting each individual letter and making the form more unique to promote legibility, while keeping the typeface consistent enough to call it a font.
When you have all of two pixels on screen that are trying to represent a subtle curve that was designed to look good at 600dpi or greater, you’re going to see problems.
Not to say that sans-serifs aren’t problematic on-screen, but because the strokes are usually far wider than the serifs, they can be fudged far better.
Who knows, though. With ClearType and Quartz and increasingly higher-res displays, this may not be a problem for that many more years.
Serifs are instrumental to speedy reading.
They help make letterforms more distinct from each other, which in turn make it easier to distinguish words in a feild of text, which is a very important function of the brain while reading.
Sans serif letters tend to be simpler and require closer and slower examination. Of course this is all relative to the speed of the brain, and so many readers may not notice this issue consciously.
Where this comes into play more strongly is large tracts of text. You will notice there are very few books typeset in sans-serif fonts. You’re much more likely to see sans serif fonts as headlines, titles, etc. when the speed of comprehension isn’t so much an issue, and in fact you may want to slow the reader down to alert them to important things.
I think screen resolution and the small range of so-called system fonts have led people away from fonts with serifs. Hopefully this will change. Consider “slab-serif” fonts like courier as a compromise on the screen – both “clean” and easy to read. Unfortunately it has that “typewriter voice” that you don’t always want.
A good primer on basic font selection and combinations can be found in the wonderful book, “Design for Non-Designers”.
A long PS. about paragraph justification:
A “ragged” edge plays a similar role to serifs at the paragraph level and helps readers track what line they are reading as their eye moves down the page. Ideally the right edge of the paragraph would alternate long and short (with some small variations so it doesn’t look too regular). A paragraph that is flush on both sides might look “cleaner”, but that formatting doesn’t help readers absorb information very well. Centered paragraphs have the problem of neutralizing the whitespace around them, and without one side being flush, the eye doesn’t know where to return to when moving down one line.
Think of a page as a landscape. You need irregular features to help you orient yourself and find your way around without thinking too much. It’s easy to get lost in a clean landscape (like a plain) or a landscape with alot of similar features (like a labyrinth).
Serifs are instrumental to speedy reading.
They help make letterforms more distinct from each other, which in turn make it easier to distinguish words in a feild of text, which is a very important function of the brain while reading.
Sans serif letters tend to be simpler and require closer and slower examination. Of course this is all relative to the speed of the brain, and so many readers may not notice this issue consciously.
Where this comes into play more strongly is large tracts of text. You will notice there are very few books typeset in sans-serif fonts. You’re much more likely to see sans serif fonts as headlines, titles, etc. when the speed of comprehension isn’t so much an issue, and in fact you may want to slow the reader down to alert them to important things.
I think screen resolution and the small range of so-called system fonts have led people away from fonts with serifs. Hopefully this will change. Consider “slab-serif” fonts like courier as a compromise on the screen – both “clean” and easy to read. Unfortunately it has that “typewriter voice” that you don’t always want.
A good primer on basic font selection and combinations can be found in the wonderful book, “Design for Non-Designers”.
A long PS. about paragraph justification:
A “ragged” edge plays a similar role to serifs at the paragraph level and helps readers track what line they are reading as their eye moves down the page. Ideally the right edge of the paragraph would alternate long and short (with some small variations so it doesn’t look too regular). A paragraph that is flush on both sides might look “cleaner”, but that formatting doesn’t help readers absorb information very well. Centered paragraphs have the problem of neutralizing the whitespace around them, and without one side being flush, the eye doesn’t know where to return to when moving down one line.
Think of a page as a landscape. You need irregular features to help you orient yourself and find your way around without thinking too much. It’s easy to get lost in a clean landscape (like a plain) or a landscape with alot of similar features (like a labyrinth).
Looks like Dave S. and I were writing at the same time… So yeah, what he said.
Looks like Dave S. and I were writing at the same time… So yeah, what he said.
Good comment about paragraph alignment, Day. Something I’ve never really thought of before, but makes perfect sense. I’ll have to keep that in mind from now on.
See, you learn something new every day. 🙂
Good comment about paragraph alignment, Day. Something I’ve never really thought of before, but makes perfect sense. I’ll have to keep that in mind from now on.
See, you learn something new every day. 🙂
Oh, regarding the back-lit, reflected light question, the screen is a hard reading medium for the brain to take. The brain sees screens flicker, and has to work hard to present what it sees as a stable image to our consciousness. Studies have shown that minor stress reactions occur when one is focusing closely on a screen – like when you read text – including muscular, neural and blood pressure changes. For that reason, screens are currently not very good for reading long texts. I can’t remember where I read this, but it was somewhere authoritative like Scientific American maybe. There were also some very interesting results about how the brain deals with cuts, zooms and pans in TV and film… At one point, a screen that reacted to ambient light conditions was developed. This doesn’t address the flickering problem but is very interesting in terms of how you might interact with a screen. Imagine getting a better look at your email by bringing your lamp closer to the monitor!
Oh, regarding the back-lit, reflected light question, the screen is a hard reading medium for the brain to take. The brain sees screens flicker, and has to work hard to present what it sees as a stable image to our consciousness. Studies have shown that minor stress reactions occur when one is focusing closely on a screen – like when you read text – including muscular, neural and blood pressure changes. For that reason, screens are currently not very good for reading long texts. I can’t remember where I read this, but it was somewhere authoritative like Scientific American maybe. There were also some very interesting results about how the brain deals with cuts, zooms and pans in TV and film… At one point, a screen that reacted to ambient light conditions was developed. This doesn’t address the flickering problem but is very interesting in terms of how you might interact with a screen. Imagine getting a better look at your email by bringing your lamp closer to the monitor!