This is Part Three of my Visual Design Series: this time I’m sharing with you 16 exceptional resources on Typography for Web. Hopefully, they will inspire everyone to pay more attention to that often neglected but very important topic in Web design.

  1. The Elements of Typographic Style Applied to the Web
    This should be the #1 page to visit in your Typography Journey. Richard Rutter goes through every chapter of Robert Bringhurst’s book The Elements of Typographic Style (considered by many to be a bible in print Typography) and adopts all those principles for Web, using HTML and CSS techniques.
  2. Em Calculator
    How do you specify the fonts size in CSS: absolute (px or pt), or relative (keywords, % or em)? After reading Richard Rutter’s guide on Web Typography, you’ll see that it’s best to use “em”s. This Em Calculator would save you time and frustration when converting pixels to Em units.
  3. How to size text using ems
    If you’ve never used Em units when in your CSS, then this article would help you to understand all about this relative unit, and how to benefit from specifying the font size in Em.
  4. What the Font?!
    Have you ever wanted to find out what font was used on certain websites, or magazines. This site is invaluable in finding you the matching font. Upload a URL to that font image, or upload the file, and you’ll get a list with matching fonts. (note: the image has to be very clear in order for this tool to work properly)
  5. Typesetter
    This site comes with another time saver and inspirational tool: you can choose up to 3 different fonts (with a corresponding size) and it generates 3 columns of Lorem Ipsum text with your chosen fonts in 12 variations (regular, bold, italic, uppercase, etc). Awesome website!
  6. Typophile
    This is an excellent forum on Typography – a great place to learn and share typography tips.
  7. A List Apart – Typography
    A List Apart is a must have resource for “people who make websites”. But this particular page is a collection of 10 exceptional articles on Typography.
  8. TypeCulture
    TypeCulture site is a valuable resource on Typography with tons of practical articles on this topic, but this particular page features Movies on Typography. Isn’t it incredible? The movie “Typomania” is definitely a Must See one. It’s produced by BBC with the host Erik Spiekermann – a celebrated typographer of our time. The movie talks about what role typography plays in our daily lives, with some complimented music in the background.
  9. Web Typography Cheat Sheet from Modern Life
    This is just one of the outstanding Typography articles from Modern Life. It gives readers 5 valuable tips on how to make the best out of Typography for Web, being limited with only about 5 safe fonts for the Web. While you’re there, check out another informative article that showcases Great Fonts for Web 2.0
  10. The FontFeed from FontShop
    Free font articles from an otherwise commercial font website. This blog is definitely worth checking out.
  11. The Anatomy of Web Fonts
    Just like the name suggests – this article dissects fonts and teaches the Basic Principles of Web Typography.
  12. Accessible Web Typography – an introduction for web designers
    This one is a real gem – a free HTML version of the book by Jim Byrne. It talks about how to choose a good font for your projects, offers tutorials on text size, and talks about Usability.
  13. Journal: Mark Boulton – Typography
    Another great blog with a collection of articles on Typography. Definitely check out the articles from Five “Simple Steps to Typesetting on the web” series.
  14. CSS typography – from Digital Web Magazine
    This article shows you how to tweak your CSS to achieve “typographic excellence”.
  15. sIFR 2.0: Rich Accessible Typography for the Masses
    If you haven’t heard about sIFR yet, this site will teach you all about it. Until now whenever we wanted to use a special font that not all users have, we were usually saving it as an Image, right? Well, now we have another option – sIFR – it is a new way of rendering a text in the browser using any font. It’s accomplished by using a combination of CSS, JavaScript and Flash. The results are amazing, and it’s very simple to implement. I’m not sure though if it becomes a new standard (it relies on users having JavaScript and Flash enabled and installed in their browsers), but it’s certainly worth checking out.
  16. Arial or Helvetica?
    And for the desert I offer you this witty, brain teasing quiz that will test if you can tell the difference between Helvetica (the “original”) and Arial (Microsoft’s “rip-off”) in their ten examples. :-)

If you know of any other interesting Typography resource, I’d love to check it out.

Recent Bits
Related Bits
8 Bits From The Past
Get Inspired by 8 bits of Exquisite Typography
Best Inspiration Bits in 2007
Web Design Dissected Into 8 Bits
Visual Design Essentials
8 WorthWhile Weekly Bits: 11-18 March, 2007
Outstanding Posts Are Not Bestsellers
How to Become Digg’s Favourite Blog
Comment Bits

No Intelligent Bits in response to “16 bits of Exceptional Typography Resources”

Sorry, comments are closed on posts older than 90 days.

Selected Bits





Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on