On Web Typography

by Jason Santa Maria

26 Reader Comments

Back to the Article
  1. I can’t help but fantasize that if IKEA had access to Typekit they may not have switched to Verdana.

    Jason – you have articulated the blessing / curse of emerging typographic control. As web publishing becomes more “turn-key” (Drupal Gardens, free Wordpress themes etc.) the “everybody is a designer” effect could be an aesthetic disaster. A “Pandora’s box” as you say. However — while similar typographic anxieties arose with desktop publishing in the 80’s (and came true) — In the end a demand was created for trained designers with a strong aesthetic sensibility.

    The time is right for this discussion. Your advice is sound. Great Piece. Thanks – db

    Copy & paste the code below to embed this comment.
  2. Jason, Thanks for giving some context & meaning to web typography. It’s a grand improvement over the distraction of the new technologies (e.g. @font-face) or the legalities of font licenses.

    That being said, would anyone care to make a prediction on the future of typography? I’d love some insight from the alistapart.com crowd.

    Copy & paste the code below to embed this comment.
  3. Thanks for offering a fresh perspective on web typography—as mcritz said, this article hardly mentions the technological or legal issues which largely seem to be dominating the web-typography discussion.  As you’ve shown, there are much more interesting subjects than correct @font-face use and font licensing!

    That being said, I can’t help but bemoan the fact that many typefaces I would love to use on the web are not yet licensed for such use.  Personally, this is one of the issues preventing me from getting truly excited about font-embedding.

    Copy & paste the code below to embed this comment.
  4. Thanks everyone for the kind words! These are definitely the kinds of things we should start talking about sooner rather than later.

    @Kyle Fox:

    That being said, I can’t help but bemoan the fact that many typefaces I would love to use on the web are not yet licensed for such use. Personally, this is one of the issues preventing me from getting truly excited about font-embedding.

    All in due time. A tremendous amount of ground has already been covered in a very small amount of time with getting viable solutions out there for using fonts on web pages. Now that some of these are in place, and the foundries are getting a bit more comfortable with the prospects, the fonts will follow. I doubt that most foundries won’t be offering up their fonts in some way by the this time next year.

    Copy & paste the code below to embed this comment.
  5. Great article Jason. This is still something I struggle with (or at least constantly worry about) when choosing faces.

    I’ve always found it tricky to find background info on the typefaces I want to use. Can you suggest any resources for finding history or other info? (besides “Typedia”:http://typedia.com of course ;).

    Copy & paste the code below to embed this comment.
  6. @Jason Santa Maria:

    Good point. I should clarify: lack of available typefaces is why I’m currently not using font-embedding extensively just yet.  It’s clear that foundries are warming to the idea of web-friendly licences for commercial fonts (ex: Axel), and once more fonts become available for web I’ll definitely be making more use of font-embedding.

    Copy & paste the code below to embed this comment.
  7. @louderthan10:

    I’ve always found it tricky to find background info on the typefaces I want to use. Can you suggest any resources for finding history or other info? (besides Typedia of course ;).

    There are lots of “great”:http://www.itcfonts.com/Ulc/OtherArticles/EssentialBooks.htm “books”:http://www.typophile.com/books out there, though you can find at least a little bit of good info (sometimes quite a bit) by plunking a typeface name into Google.

    Copy & paste the code below to embed this comment.
  8. This is the best thing I have read on this since “Communicating – or just making pretty shapes” by Colin Wheldon – and the best by far on this subject as it relates to the internet. Thank you!

    Copy & paste the code below to embed this comment.
  9. Thank you, Jason!
    A pairing of Hebrew fonts, very well-known in Israel, is the “logo of the Peace Now movement”:http://upload.wikimedia.org/wikipedia/he/c/cc/Shalom_achshav.jpg .
    The first word, on the right, is “Peace” in Koren font, black; the second is “Now” in Haim font, red.
    Created by D. Tartakover in 1978, it is considered a classic design.

    Copy & paste the code below to embed this comment.
  10. @louderthan10:

    In addition to “Typedia”:http://typedia.com (a growing and valuable reference), I would recommend the forums and wiki at “Typophile”:http://typophile.com/ — folks there know their stuff. And, while discussion is occasionally heated between Typophiles who know one another well, everyone has been very nice to me — and very willing to share expertise.

    Web designers would do well to join in conversation with type experts.

    Copy & paste the code below to embed this comment.
  11. One thing that I learned in design school (which you reiterated) is that designers need to make the contrast between faces strong enough that it looks intentional. Too often you see two fonts that are close to each other, but not the same.

    If you need a slight variation on a font, simply be more creative within its boundaries. Change the color, weight, size, or letter-spacing.

    Copy & paste the code below to embed this comment.
  12. An entire issue on typography… fantastic! 

    I particularly appreciate the info on pairing of typefaces.

    To be a pain, you are mixing metaphors: “another notch in the designer’s belt”.  A notch on the handle or a tool on the belt.  A notch on the belt and your pants fall down.

    Copy & paste the code below to embed this comment.
  13. Jason, fantastic article! I am a UX designer and have been researching the usability of fonts for the web. To help users read faster online I have found that choosing 14pt font over a smaller point font has tremendously helped. Arial, Verdana and Georgia all seem to be easy for users to read but I think it really depends on the content and the site context.

    For a web application using Georgia seems to be the wrong choice but for a blog it seems to work well and is engaging. Arial seems to be the least engaging for long paragraphs or blog entries. However it is the best when it comes to web applications because it is fast to read.

    I know that as designers we try to create websites that are “cool” and “trendy” by selecting smaller fonts but to be user friendly we need to make fonts larger and more readable.

    Could A List Apart benefit from a larger font? :)

    Copy & paste the code below to embed this comment.
  14. The problem with a lot of the assumptions you make is that they can only be considered anecdotal at best. There are certainly general baselines for readability, but we can’t say one typeface or size is always going to be better than another, or for a specific purpose, because reading is a highly personal and subjective action. What’s perfectly readable to someone could make another person stumble and falter.

    Copy & paste the code below to embed this comment.
  15. One of the most interesting articles I’ve read in a while, really insightful, so thank you for taking the time to write it!

    I can’t help but panic a little bit when it comes to web typography. Not because I’m intimidated by using it, but because there will be a lot of amateur use out there, tainting the use of @font-face: for the rest of us, making it take even longer or IE to support the code – bad times.

    Copy & paste the code below to embed this comment.
  16. Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

    Copy & paste the code below to embed this comment.
  17. Being a traditional print designer and spending all of my time online now, I am looking forward to handling type as I once did. I review this “article”:http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography each year so I don’t forget. Understanding the use and principles of type and translating that online is going to be interesting journey.

    Copy & paste the code below to embed this comment.
  18. Logos, since they often contain a bit of large text can influence the designer’s choice of pairings on a page.

    Anyone who uses images to make headings or banners has to put serious thought into font pairing decisions.  These tips are useful now.

    Thanks Jason for an excellent article.

    Copy & paste the code below to embed this comment.
  19. I’ve had clients who request some pretty crazy things. I see businesses all the time who either do there own marketing or hire some inexperienced designers that have no method to typography. There are even design firms that will use three, even 4, different fonts in their marketing pieces. Everything starts to look scattered, cluttered, and tacky.

    In web design it’s hard to decide on fonts because of browser compatibility. There are only limited typefaces that work well in all browsers. If a font is too uncommon then it can be used as an image but this then takes away from search optimization.

    This article is great in expressing the true meaning behind typography and would be good for clients to read and understand why there are limitations and guidelines to selecting fonts in their web design and marketing.

    Copy & paste the code below to embed this comment.
  20. Excellent article. But could you please tell me where is the best place to learn more licensing

    Copy & paste the code below to embed this comment.
  21. I;m always looking for ways to perk things up. Does using sifr with typography make it not be seo friendly anyone?

    Copy & paste the code below to embed this comment.
  22. Does using sifr with typography make it not be seo friendly anyone?

    Nope, sIFR just replaces normal text on the page, which is still perfectly readable to search engines.

    Copy & paste the code below to embed this comment.
  23. You are spot on with this article. It’s something I’ve been thinking about more and more over the last few months.

    There are many books and articles on typography, but considerably few explore typeface selection and pairing.

    You say there are ‘considerably few’ – but which are those few? I’d be interested to know. I have a few books on type but none of them seem to go into this subject with much (or any) depth.

    Perhaps there is a gap in the web for an online directory or cookbook of successful type pairings. I realise that the choice depends on the design context, but it still might be of some use.

    Copy & paste the code below to embed this comment.
  24. H’mmmm. I’m not entirely convinced that this is a good idea, y’know. Often the only way to make people follow best practice is to point out technical limitations in their ideas – for example, “You can’t use sIFR for all your text because it will take 20 minutes to load the page”.

    Once Dreamweaver and other visual tools take on @font-face we’re doomed, because every idiot who thinks owning a copy of Dreamweaver makes them a designer will start littering the web with badly-set type.

    Copy & paste the code below to embed this comment.
  25. Great article, the cross browser issue is always going to be a nightmare.

    Copy & paste the code below to embed this comment.
  26. Just wanted to make a quick comment about web fonts. Has anyone tried Extensis WebINK? It seems pretty cool and inexpensive solution for fancy web fonts.

    Copy & paste the code below to embed this comment.