Inspiration Bit

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.