Typography: serif vs. sans-serif

« · By Faruk Ateş on Jul 23, 2005 · 31 comments · »

For years now, we've more or less accepted the unwritten rule of typography on the web: sans-serif is good for small(er) type on screens, whereas serif is good for such type on paper. serif fonts for headings work well either way. But does this still apply? What about usability and, to an extent, accessibility? Is it time to seriously reconsider this?

Some people are using serif fonts for their normal content text, but most of us still stick with Arial, Verdana and/or Helvetica (at least as fallback font, in any case). However, there's a case to be made for either side:

Serif on the web

The good:: It aids dyslexic people, as the i, l and 1 (I, L, One) are often very similar in appearance in sans-serif fonts and can thus make things very hard to read for these people.; Serif fonts are designed as serif to be easy to read, and even on the web they can have that effect.; They still share a certain visual appeal to many people.
The bad:: Font sizes below 12pt are pretty hard to read in serif, for many people.; As much as the percentage of dyslexic people is not to be ignored, especially when including estimated numbers of people that suffer from dyslexia but either don't know it or don't admit it, it still is a minority we're talking about, and if using serif means harming the majority of your audience, you should think twice about it.; On Windows, serif fonts tend to look pretty damn bad without XP's ClearType font enhancement. There are still many people on Windows that either don't have XP or don't have ClearType enabled..

Sans-serif on the web

The good:: Even very small type is generally very easy to read in sans-serif.; Plenty of studies have pointed out that people can read sans-serif better and faster on the web than serif, as opposed to the printed world where the opposite tends to be true.; While there are definite Arial-haters and Verdana-haters (to me they seem to be equal in numbers), the general consensus is that sans-serif on the web is just better and prettier.
The bad:: It can hinder legibility for dyslexic people.; The question is being raised (again) whether the studies of before still apply today.; We may be running into design cliché's with all this arial and verdana.

Conclusion?

You may have guessed it, but the above doesn't really lend itself for any representative conclusions. There are too many aspects to it all that need to be studied in great detail, before you can really indicate which is better on the web. However, there are some questions I'm left with, which a brief Google search didn't resolve.

First, should we even look at it from such a black-and-white perspective? Given the large array of problems we encounter when looking into Web Accessibility, I would say the choice of font is only the tip of the iceberg, with many important factors following.

I think a balance between the two is appropriate, and by balance I mean a time and place for both. Normal layouts can use sans-serif, whereas a Zoom layout can use serif fonts. Even though the latter has much larger type as it is, using a serif font will only aid accessibility in such a situation.

The second question is entirely presentational. Good thing I'm not talking semantics, here. ;-)

Is it okay to make a choice between sans-serif and serif based on the (default) design of the site? I can imagine that there will be designers that create a site and insist on having a serif or a sans-serif font for the type, completely oblivious to what kind of audience is targetted and which would be more beneficial to them. To what extent are aesthetics important enough to decide such matters?

Personally, I still prefer sans-serif for large chunks of text with a lovely serif heading, but you may disagree. I am curious, though: what do you prefer for your own site and for others, and more importantly, why do you prefer that?

Bookmark: Newsvine del.icio.us Digg

Comments

31 comments

#1 · Zach · Jul 23, 2005 (05:08)

As you well know, I am dyslexic myself.

I personally find each fonts as good on the eyes. I had a bit of difficulty reading the line: 'Even very small type is generally very easy to read in sans-serif' (the sans-serif part) but then again I don't know if that was just me.

#2 · Faruk Ateş · Jul 23, 2005 (10:01)

Yeah, code bits appear a bit small on my site at the moment. I'll be fixing that soon...

#3 · gareth rushgrove · Jul 23, 2005 (13:34)

I have to admit I set out to use a serif typeface on my site and then build the olde style around that - mainly because the vast majority of sites seemed to use sans-serif automatically - without thinking about it.

I did however add a style changed to allow swapping to a sans-serif style if people prefer.

Small or light serif type can be difficult to read but I have tended to find the readability of larger or darker serif type on the web is difficult to really measure - as it's not what people expect and they tend to concentrate on that - rather than how easy (or not) it is to read.

Another issue I have found is the somewhat poor rendering of serif faces on windows. Anyone else consider this a turn off?

#4 · Hayo Bethlehem · Jul 23, 2005 (16:53)

Serif fonts look fine to me on WinXP. You do need Cleartype switched on.

#5 · Faruk Ateş · Jul 23, 2005 (17:33)

Gareth,

Without Windows XP and its Cleartype enhancement, serif fonts really look like piss on Windows machines. You're not the only one...

That's something I probably should have included in the Good/Bad lists above...

#6 · Sassy · Jul 23, 2005 (18:19)

woo! i spawned a kurafire entry. :D

i was taught in college that sans serif was on the web and serif for print; however lately in the tech comminicator community there have been discussions as to the validity of the claim that sans serif is more readable.

the reason i wanted serif fonts for my site are varied. for one, i wanted my site to be different. 99% of sites have san serif fonts - especially business sites. To me, on the web, serif fonts look more feminine, softer, more personal, less business-like, and unique. These are all things I want my site to portray. It's less about usability and more about image.

Usability is very very valid (form following function and all that), but I don't think the readability is affected that much as long as you have the font sized big enough.

#7 · gareth rushgrove · Jul 23, 2005 (19:40)

Faruk, or anyone else who has looked into the issue

Did your brief research throw up any actual recent tests or experiements that had approached the readability and accessibility issues around serif vs sans-serif?

Might be interesting to look at setting something simple up? It wouldn't really need the whole scientific rigour to provide even some anecdotal value - in particular if their is nothing out their at the moment?

#8 · Andy Hume · Jul 24, 2005 (14:00)

Hi Faruk,

Full stops at the end of list items? What's your reasoning behind leaving them out? It bugs me. ;)

If there were two sentances in a list item, would you use a full stop then? Or just on the first one?

Interested to get your take on this mate.

#9 · Scott L Holmes · Jul 24, 2005 (22:28)

There's alot of convential wisdom out there. I've spent hours reading over the pros and cons.

This issue pales in comparison when you are attempting to develop css that resizes properly for multiple browsers, check the em doc at a list apart.

For my site, I pretty much decided on san-serif for the body and "Lucida Sans Unicode" for headings. This was just to be different. I'm not sure if I like it. Lucida Sans Unicode seems to be available to most browsers. It's pretty close to being Serif but is one of the few alternative fonts not so obnoxiously out of sorts with san-serif.

Sticking with the most simple of fonts is probably a good rule of thumb.

Probably of more importance, then, is layout:
The Need for Web Design Standards

Scott

#10 · Faruk Ateş · Jul 24, 2005 (23:40)

Scott, You may or may not have noticed, but this very site is Elastic. :-)

It's a good point that layout is of more importance even, but even when such "Web Design Standards" are used, if the content text is illegible thanks to being a small-sized serif font, it's still a typography problem. Though admittedly, typography is technically simply a part of design as a whole.

Andy, Reasoning is absent. I had them formatted as normal UL/LI items, without capitalized first letters too. But, then I realized that a definition list was more appropriate, though as I changed it around I forgot to add periods at the ends of the sentences. Will fix now, though. Cheers!

#11 · Scott L Holmes · Jul 25, 2005 (00:23)

The elasiticity of your web site was the first thing I checked! I doubt I would have commented at all, if you were using pixels.

I also meant to note that based on my readings, black text on a non-white background (but still light colored) seems to be the accepted approach to legibility - regardless of which font you choose. Apparently, full white backgrounds provide too much contrast for many people - causing readers to rapidilly fatigue.

I played around extensively with black backgrounds and I just could never get things to work right. Plus when you are trying to apply things in CSS based on examples on the web, you have to be very good at reversing the color schemes - something that becomes almost too tedious to do.

#12 · Faruk Ateş · Jul 25, 2005 (00:34)

I'm going to be doing lots of experimenting with colors for both background and text, including a number of inverted (bright-on-dark) color schemes.

It's going to be interesting, that's for sure. :-)

One thing I do know is that on CRT monitors, bright text on dark backgrounds is definitely much easier on the eyes. All good studies I've seen indicate this, too. The amount of light that is constantly being projected into your eyes is just a factor 100 as small, so it's only logical that it makes such a difference.
However, for professional sites, black backgrounds are rarely acceptable. There's just a 'social barrier' between the two.

#13 · Andy Hume · Jul 25, 2005 (01:02)

Ah, nice one mate.. interesting it was just a mistake. I know some people like doing that - but personally it drives me up the wall. :)

#14 · Faruk Ateş · Jul 25, 2005 (10:46)

Andy,
Yeah, I don't really like such things myself, was shocked to find out I'd forgotten them. Bad me!

#15 · Alex · Aug 5, 2005 (01:54)

Now that everyone is using to sans-serif fonts in a somewhat dogmatic fashion, using a serif font seems a nice way to distinguish oneself. If I'm not mistaken, Georgia was designed specifically for screen use and I must say it looks pretty fantastic on Threadless.com... on a Mac, that is.

#16 · Faruk Ateş · Aug 5, 2005 (09:01)

Alex,

Threadless.com's links near the bottom of the page (underneath the two giant flash objects that I don't see) are pretty hard to read for me (WinXP). I really think serif only works well on higher font-sizes, at least on Windows...

#17 · Jens Meiert · Aug 27, 2005 (20:33)

Alex is right, Georgia actually was designed for screen use - and in my opinion, it is a very good choice. On screen, sans-serif fonts should definitely be used when dealing with small font sizes.

By the way, read Bringhurst's "The Elements of Typographic Style". Required reading.

#18 · Kyle Haskins · Sep 2, 2005 (17:19)

This should be noted: Windows XP's Cleartype is intended solely for LCD monitors. If you enable this on a CRT monitor text looks blury and becomes hard to read.

#19 · Bernd · Sep 2, 2005 (23:36)

Don't forget the line-height. It is also important and can improve readability. (says a dyslexia)

#20 · Chaudhry Muhammad Abubakr · Oct 23, 2005 (13:49)

I like Serifs font better than Sans-Serif. Sans-Serifs are very common. Besides web, even on my non web documents such as word documents I love to use Serif Fonts. The font that I like mostly is verdana, arial and Tw Cen MT.

There is no fixed rule, it varies from person to person. There are verdana lovers and like me there are Times new Roman haters. But on the web I think, Serifs look better.

#21 · Faruk Ateş · Oct 23, 2005 (14:48)

Chaudry, you do realise, right, that Arial, Verdana and such are sans-serif fonts, and that Times New Roman is serif ?

#22 · B · Oct 23, 2005 (19:19)

I don't know who thinks that serif is easier on dyslexic people. I am dyslexic and I have always hated Times New Roman. I never realized why until a few years ago. I just hated it! It's a major pet peeve of mine. I like veranda. It's much cleaner looking. The serifs make it look as if the letters/words are moving. Did you make that up? Decide that for yourself? What do YOU know about dyslexia? Have you been to www.dyslexia.com?

#23 · Eamon McBride · Nov 9, 2005 (13:46)

I found it hard to read your site cause i am part blind, DUUDDH?

#24 · Eamon McBride · Nov 9, 2005 (13:48)

Im sorry i write in my adress bad, las comment, Do"h!

#25 · Faruk Ateş · Nov 9, 2005 (13:52)

Eamon,

It will be improved soon :)

#26 · KARL · Nov 10, 2005 (16:26)

I am a graphic designer and have studied years on type. There is certainly a written rule for serif and san serif typefaces. It doesn't depend on method of view, screen or paper, but rather the actual serif shapes. Serif typefaces are easier to read when they are 12 pt or less because the serif acts as a bridge and flow tool to guide the eyes to go to the next letter and the next word. Most text on books and novels are usually serif typefaces. San serif typefaces work better 12 pt and up. usually over 12 pt it's used for display purposes, and serifs on the typeface would be distracting.

I like both, also Script typefaces are interesting too.
:)

#27 · Dave Vogt · Dec 14, 2005 (06:38)

Right now I happen to reverse "conventional wisdom" by doing my headings sans and my body text with serifs. Nothing that has to be read is remotely mousey, so I don't get too worked up over it. I can read my site (with 20/20 vison) on my 19" at 1280x1024 and on a 15" at 800x600 with ClearType off. If there are still issues, people always have the option of increasing their font size.

What I'd be curious to know is the effect of leading (line spacing) on legibility. I'm just noticing that some paragraphs start looking really dense at default leading.

#28 · John Waters · Jan 19, 2006 (01:59)

Here's another discussion I ran across about serif vs. sans serif type.

#29 · Tahir · Jan 24, 2006 (22:39)

I had no idea there was such a thing known as ``TrueType'', thanks faruk for bringing this to my attention!

#30 · dyslexicist · Feb 8, 2006 (07:43)

they shouldnt be reading or surfing on the web in the first place if they cant even read.

joke.

thanks for the helpful analysis.

#31 · ananumus · Feb 8, 2006 (17:20)

hey my teacher told me to wright paper thingy on this any ideas????

All times are in CET. It is now 19:44.

KuraFire Network

Log