Navigation

Serif vs. Sans: the final battle

By Stacey Kole | Inspiration, Typography | Mar 15, 2013

First it was the Capulets versus the Montagues; then it was Coke versus Pepsi; and the latest epic battle? Serif versus sans-serif, of course.

Lucky for us, the crew at UrbanFonts has produced a nifty infographic to help clarify the age-old rivalry between serif and sans. Brief, yet information-packed, it covers everything from DPI to classification, and expertly explains why serif is better for print and sans serif is best suited for web.

This clever infographic — that smartly draws upon humor to drive home its points — offers a simple, insightful conclusion that designers should bear in mind: “The best font choices are ones where readers do not notice the font … but the message.”

Serif versus Sans-Serif

For free fonts and dingbats, check UrbanFonts.com

Do you tend to use serif or sans-serif most? Can you think of any other points of distinction that could be included in this infographic? Let us know in the comments.

Share this post
Comments (no login required)
  • http://twitter.com/adameham Adam Edward Ham

    Where did they get the 1000 dpi for print from?

    • Vectorism

      i guess they count 300 dpi x 4 colors.. #LOL

    • Ryan Anderson

      Most printed work is 300-600 dpi. I am also confused where they got the 1k from. When you send a project to a printer they might ask for higher if they wants some room to work with in editing the project before printing, but the file going to the printers is in that lower range.

      • Jasen Kavel

        Most printed work on a home printer maybe. But a professionally made book or magazine printed on an offset press is 2400 dpi and higher. Even if bitmap photos are 300 dpi, the font will print at the higher resolution since they are vector, not bitmap. I’m thinking they went with “1000 dpi” instead of “in the range of 300-2400 dpi and up.” The point is made: print is much higher than the highest screen resolution. Overall, this is a well done post with clear info graphics. A belated thank you to Stacey!

  • Björn

    Great Infografik! looks really cool and does provide lots of information.

    Just a little side-note: The resolution of a screen is not the only problem a serif font has on-screen. As those displays emit light, this light makes it even harder to see the serifs. The get lost or looks damaged in some way. Hope you get the meaning, english is not my native language, sorry ;-)

  • http://www.facebook.com/nino.moharic Nino Moharic

    nice post… great graphics.. hehe and verry usefull

  • http://twitter.com/craigsssmith Craig Smith

    As the ppi of devices continues to increase, and as the trend towards towards larger type on-screen, does the general advice of “if web, use sans-serif” still make sense—I don’t think it does?

    • florwood

      I would have thought that with the trend away from desktops and laptops to tablets and phones, type is getting smaller and smaller.

  • http://impixon.com/ AJO

    Nice Post

  • http://www.facebook.com/mernywerny Mörny Wörny

    The book “Thinking With Type” by Ellen Lupton quotes academic research which found that there is no real disparity between serif and sans serif when reading large bodies of text. It may feel as if Serif is easier to read as body text, but the study showed no real difference between the two in tests with readers reading both fonts for long periods of time.

  • http://twitter.com/CodersLexicon The Coders Lexicon

    I didn’t really know there was a battle going on. I thought it has become common knowledge that you should use a serif font for print and sans serif for computer screens. Are we trying to drudge up a war that ended long ago?

  • http://twitter.com/AlexPoole_UX Alex Poole

    This infographic repeats quite a few myths about serif/sans-serif legibility. In fact there never really was a battle and it’s a draw anyway: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

  • http://www.apzmedia.com/ Pablo Apiolazza

    I love it! added to my design notes on tumblr (www.apzmedia.tumblr.com)

  • Kyan Loo

    May I know what font it is used in title “Serif vs. Sans: the final battle”? Thanks

  • Kaelie Nielsen

    That was great. Thank you very much

  • Krish Chainani

    Inkjets are more around 600-1200 dpi.

  • Mick

    The problem with the graphic’s point is that, all throughout it, the serif font is far easier to read.

    • dr_rags

      For me the Sans is easier to read, but it has nothing to do with the font. It has to do with the way my astigmatism blurs the edges of fine colored lines at the ends of the spectrum. If I wear glasses (which I rarely do) then both are equally legible).

      I specifically have trouble with red backgrounds (in this case) or blue letters. My dad who also has astigmatism has the exact opposite. I tend to stay away from fine lines or text at both ends of the spectrum because of this.

  • Ryan Delos Reyes

    FYI: PPI is for web, DPI is when it is already printed.

  • Ryan Delos Reyes

    Since when did dots began appearing on computer monitors and digital screens? Aren’t they called PPI (Pixels per inch) rather than DPI?

  • ruth

    this helped me loads in ict thanks, you’ve made my life so much swaggier, i no9 longer face depression about fonts in ict anymore omg thanks :)

  • The Great Unknown

    I love your work here Stacey, I’m new to this topic and this was informative and helpful, thank you!

  • Cyril Glasse

    Brilliant exposition of the question; brilliant cartoons. Brilliant that you do not require login or “registration” to comment. The use of red color and the darker color may slant the perception, but if that is so, that is brilliant too. Cyril Glasse. Actually you do require some kind of login. I guess that is brilliant too.

  • Radovan Vlcek

    Really really beautiful article in both ways – information and design.. Thank you!

  • Adarta

    Legibility and reading comfort still depends more on letter weight and x-height. Avante Garde vs Lubalin Graph book weight at any size – Avante Garde wins on web or print.