Serif Fonts Vs. Sans Serif Fonts: A Working Case Study

The standard style for most content on the Web is sans serif fonts, such as Arial or Verdana. And this is sensibly the case for a number of reasons: sans serif fonts are easier to read on-screen, they look pretty good when their size is reduced, and they tend to retain their visual appeal across different platforms and browsers.

Serif fonts are used for titles and subtitles on many sites and that can lend a nice effect on heavily sans serif pages. But does it ever work to use serif fonts for the main content? There are a limited number of sites that I could find that do this successfully, one being Cameron Moll’s blog. There are few more sites with serif fonts listed in this Webpage Design for Designers post by David Rodriguez, “Don’t Be Afraid of Serif Fonts.” While I like the way it looks when the serif font suits the layout and design, I admit that it takes a few seconds for my eyes to get used to reading the copy on these sites.

The Case Study

This leads me to my current issue. I’ve considered using a serif font on a site I’m working on, but I’m not completely convinced I should go that route. There are a few reasons why this has been an option on this particular site:

  1. It’s the client’s preference.
  2. It suits the company’s services (publishing support).
  3. It may work well with the design.

I’ve created two test pages so you can see what I mean with #2 and #3 above. Here are the details and a couple of screen shots (click to enlarge).

serif vs. san serif
Live site: www.woosterpublishing.com
Font: Arial
H1: 22px
H2: 18px
Body: 12px
serif vs. sans serif
Test pages: Home and About Us
Font: Georgia
H1: 22px
H2: 18px
Body: 12px

These screen shots were taken on my Mac, but I’ve looked on a PC, too, and the test pages look noticeably different (see below).
serif vs. sans serif

Overall, I love the way Georgia looks with this design, particularly on my Mac, but I’m not completely convinced it’s the way to go. My concern is maintaining aesthetics across platforms, which is easier accomplished with sans serif fonts, especially when a Windows user doesn’t have ClearType enabled on their PC. But what’s your take? Are their any other pros or cons for using a serif font?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Huh

    Can you call it a case study if you just say “I dunno, what do you think?”

  • dexter

    Serif fonts for headlines, sans-serif for body copy. That is all.

  • Anonymous

    sans serif fonts are easier to read on-screen

    Hmmmmm… You sure? I doubt you’ll find any research to back that up, and there are lots of different variables when it comes to readability.

    Some fonts are designed for specifically for screen reading, one of which is Georgia.

    You could argue a serif font conveys a more bookish image, so it’d suit your site. But there’s a lot of room for experimentation.

    My concern is maintaining aesthetics across platforms, which is easier accomplished with sans serif fonts

    Is it really? Not having clear type affects serif and sans serif fonts.

  • http://leonpaternoster.com/blog leonpaternoster

    sans serif fonts are easier to read on-screen

    Hmmmmm… You sure? I doubt you’ll find any research to back that up, and there are lots of different variables when it comes to readability.

    Some fonts are designed for specifically for screen reading, one of which is Georgia.

    You could argue a serif font conveys a more bookish image, so it’d suit your site. But there’s a lot of room for experimentation.

    My concern is maintaining aesthetics across platforms, which is easier accomplished with sans serif fonts

    Is it really? Not having clear type affects serif and sans serif fonts.

  • fineartdavid

    You could maybe build a CSS font stack which takes advantage of the commonly installed fonts on each system.

    If you specify one of Microsoft’s new ClearType fonts such as Cambria at the top, you can reasonably assume that the vast majority of people seeing it will be Vista users and have ClearType enabled.

    Next you could set a different serif font for the Mac, choosing from fonts which are typically installed there. Most Mac users woun’t have Cambia installed so would get this font.

    Finally, if you are really concerned about how a PC would display text set in Georgia, you could set a san-serif font as the fallback.

  • http://altoonadesign.com halfasleeps

    I can’t offer pros or cons, but based on the 2 screen-shots I much prefer the serif font. Its funny when I use a serif font I always use Georgia, I think it looks better than times, Is that the norm?

  • http://leonpaternoster.com/blog leonpaternoster

    @halfasleeps – Georgia has been designed for the screen, Times is a print font

  • http://www.avertua.com Alyssa Gregory

    @leonpaternoster

    Is it really? Not having clear type affects serif and sans serif fonts.

    This is true, but it’s much harder to read serif fonts on a non-ClearType display than sans…at least with my struggling eyes!

  • http://www.avertua.com Alyssa Gregory

    @fineartdavid – Good ideas…I’ll have to look into that.

  • http://altoonadesign.com halfasleeps

    @leonpaternoster

    Thanks, I did not know that.

  • Stacy

    Another consideration for me is always the reader with older eyes. Anyone with presbyopia would really struggle with the serifs on that site–especially in lower office lighting, or in reading on, say, an iPhone.

    I vote (not that you asked!) for the sans!

    @stacybrice

  • blg3

    A general rule of thumb in graphic design is to avoid mixing in too many fonts and to choose fonts that are complimentary and not competitive. The standard formula is to select one serif and one non-serif unless you can make a strong case for using more fonts. Since the Wooster Square Publishing banner uses an emphatically serif font, I would recommend sticking with the non-serif for the body text. The two serif fonts are too similar and lead to a muddy effect, font-wise. You have an additional kind-of stray font in the tagline “you want to publish -we can help.”

    A great source for this kind of information is the Robin Williams books for non-designers.

  • http://www.maverickandcompany.com/blog Alecia Huck www.maverickandcompany.com/blog

    I can’t speak to what works best on the web but PLEASE, FOR THE LOVE OF PETE, make sure to use a serif font on your written materials. It’s sooooo much easier for your client’s to read.

    And while we’re on the topic, funky fonts may be fun, but if you’re sending out a proposal or marketing materials READABILITY should be your first concern. Don’t make it hard for people to read, they already have a low threshold for those materials. Make your stuff easier to read and you’ll find more people will read…and buy.

    Alecia Huck
    “I’m kind of a big deal.”

  • Dave

    Here’s some dated but perhaps still useful info on choosing fonts, etc. and studies done on which fonts are best.

    http://www.surl.org/usabilitynews/archives.asp

  • DylanFM

    Microsoft’s Cambria is a great serif font.
    Choose the right font for the content. If the content lends itself to a serif font, go with that. Otherwise, a sans-serif would be the way to go.

  • Jarryd

    I find that the serif font body text is a little harder to read than the san-serif, but the title should definitely stay serif, it looks much better. You would get the ‘company’s services (publishing support)’ coming through with the headers being serif, while the text would be legible being a san-serif font. Imo anyway :)

  • Gears

    We use a serif font for some headings at our site. Not only does it provide contrast with the paragraphs, but it also coincides with our logotype and feeling of ‘clockwork’.

  • Anonymous

    well, the use of serif fonts is advised on printed media as the serif supports legibility on printed media. sans-serif fonts were designed to aid reading on screen. however, there has been use of serif and sans-serif fonts interchangeably on websites. this should be the interface designers decision as the font should complement the design as a whole. i would suggest that if the page is seen as one piece after you designed it using a sans-serif font, keep it. if not, switch to serif and see if it will appear as one piece.

    looking at your screen shots, it seems that the one with serif fonts look better and has a convenient flow compared to the sans-serif version. so i would suggest using a serif font for this project. however, this is totally from a PC point of view, i don’t know how it might look on a MAC.

  • Michael [linefeed]

    If you delved a little… actually a lot deeper into the history of sans and serifs you’ll find there has been a lot of research into what people find easier to read (rather than what looks better according to taste). The generally perceived wisdom is that serifs are easier to read although I think the time is coming (if it hasn’t already arrived) when this idea will be challenged.

  • http://www.studio-gecko.com/ XLCowBoy

    On a very related note:

    The 100% Easy-2-Read Standard

    Well worth reading.

  • Christian Tietze

    I think serif fonts suit a publisher very well! I love how Georgia looks there.

    On the other hand: the text size is a tad too small for my liking. Especially the “about” page doesn’t invite me to read the large-looking paragraphs. Probably you could enlarge the font a bit, break up longer paragraphs (probably into bulleted lists?) and highlight important keywords so I could scan the content easily.

    While the PC renders the font differently, I like the fact it’s actually bigger there :) I think the font-size computed by your PC reads just fine.

  • http://www.calcResult.co.uk omnicity

    The generally perceived wisdom is that serifs are easier to read

    I think you have over-simplified things there. From what I recall, serifed fonts are perceived as being easier to read, on devices that have high-enough resolution for that particular font size. Actual reading speeds don’t vary much though, when the font is clear to read.

    If the font-size is too low, on a device with poor resolution, then a simpler, cleaner font will be easier to read, but that is really just an edge case, and not really anything to do with serif vx sans-serif.

  • http://www.historycommons.org/ Black Max

    My two cents: Common wisdom is not always right, but in this case I think it is. As a rule of thumb, serifs for headlines and sans-serifs for body text works the best across the range of cross-platform machines.

    Also, the Vista fonts are significantly smaller than their non-Vista counterparts (with the exception of Segoe UI, a sans-serif that looks great at smaller sizes but not so hot in larger displays). So when you go from Cambria or Constantia, say, to Georgia, there’s a significant size adjustment that might throw your page out of whack for those users without the Vista fonts.

    And don’t assume everyone with the Vista fonts either has Vista or has ClearType enabled.

  • Daniel Sellers

    I know Jon Tan http://www.jontangerine.com did some render studies and the most consistent font cross browser platform (according to him) was times/times new roman.

    I personally think that the decision between serif and sans serif has to come down more to aesthetic then clarity… there are plenty of very good serif web fonts and with the font aliasing and smoothing done in modern browsers its a message choice. IMO. Is the message I am trying to convey a sans serif message? or a serif message?

  • http://stephen.calvarybucyrus.org pkSML

    As far as aesthetics go, I’d choose serif for the heading and sans serif for the content. That looks professional to me. Times New Roman is OK when big, but too muddy for small font sizes.

  • Em Space

    We have gone against type (ha!) and used Georgia for our new, very clean, po-mo, white space, brand identity and I think it works really well – Em Space
    For a very simple design, it gives it a design-y edge that using a sans-serif just wouldn’t give it anymore. Sans-serifs are looking a little 1999 to me now, particularly Arial.
    Font readability – I think it is just down to taste now. Georgia is made for the screen and renders just as well as any sans at any size. A little tip – for large blocks of text, a little extra line-padding goes a long way to making it feel more digestible. But the best advice I ever got from any design guru was this – just make it look cool!

  • W

    dexter Says:
    March 18th, 2009 at 2:50 am

    Serif fonts for headlines, sans-serif for body copy. That is all.

    I’d say the same as well. The one with serif for the body copy looks terrible. So go with serif for headlines and sans serif for the body!

  • http://www.windscience.com Doradito

    As we baby boomers age, more and more of us will have some form of slight to serious central vision problem. A central vision problem ( there are many types ) usually results in some wrinkling or distortion especially evident when looking at small letters. Even after surgery and glasses, some small defect can still be present. As one who has this, I can assure you, I always prefer sans serif. It makes a less cluttered image to decipher. Georgia doesn’t seem any better than other serif fonts, to me, anyway.

  • Scott

    Georgia seems better for a publishing company, but it doesn’t go well with the font used for the pilcrow signs. Then again, I’m not a big fan of Arial either.