Typography on the Web is not something that a lot of designers take seriously. How can we apply good typography principles to websites when we can’t have total control over the user’s experience?
There are many sites that offer principles and tutorials on controlling type with CSS. WebTypography.net translates The Elements of Typographic Style to the Web and its author, Richard Rutter, also wrote an article at 24 Ways about Vertical Rhythm that’s worth checking out. Mark Boulton mentions this article in his entry, Incremental Leading, and Mark also gives us Five Simple Steps to Typesetting on the Web (and be sure you read the Five Simple Steps to Better Typography to get a better grasp on general typography principles). Unfortunately the Mark’s Web typography series doesn’t have all the posts linked in every section so here’s Part 1 (Glyphs), Part 2 (Dashes) and Part 3 (Printing the Web).
Edit: Vivien at InspirationBit reminded me about the 16 Bits of Exceptional Typography Resources post she did earlier, which has more excellent sites for you to bookmark for your Web typography needs!
A Few of the Best
There are quite a few great examples of excellent web typography (and John from iLoveTypography has drawn up his own list of 15 Excellent Examples of Web Typography).
I find Miguel Ripoll’s work awe-inspiring. I really love the blog he designed for a UC Berkley professor. Miguel breaks the bonds that we’ve tied around web typography and his work is much outside the norm.
I’ve mentioned Jon Tan before and I’ll mention him again! I love the simple elegance of his website.
Astheria is a new blog I found the other day and it is quite similar to Jon Tan’s site. I love Kyle’s sparse use of the color yellow; when it’s used, it really pops. The only thing I’d change about this website is to add more pictures. A few strategically placed photos could really pump up the visual appeal of this site.
What sites have you found that are typographical inspirations to you? What CSS resources do you find useful when manipulating type?
Like this article? Subscribe to Creative Curio! As always, it’s free and delivered right to your favorite RSS reader!