I promised Karin Dalziel some resources for doing web typography, and thought I’d just share it with a blog post. These are a few sites, blog posts, and articles I’ve found useful when learing about web typography; this is by no means a comprehensive list, and you’ll find that upon further exploration, there are plenty of debates when it comes to type for the web, especially with sizing type using CSS. (This post also reminds me that I need to clean up some of the type around this site!)
How to Size Text in CSS – Richard Rutter describes various approaches for sizing web type in pixels, ems, and percentages. Rutter pioneered the “62.5% Method” for sizing web type, which I still use.
Five Simple Steps to Better Typography – Mark Boulton’s great blog post series on how to make the type on your website better. Nice, illustrated examples, very accessible to non-designers.
Compose to a Vertical Rhythm – Helped establish the use of a baseline grid, or vertical rhythm, for web typography.
Setting Type on the Web to a Baseline Grid – Wilson Miner shows you how to establish a baseline grid for your website, and how to make type of various sizes adhere to that grid.
Text Sizing – provides screenshots (lots of screenshots) of various browsers to compare text sizes.
I Love Typography – Not just web typography, but type in general. Beautiful site, lots of good coverage of all things type.
Web Design is 95% Typography – Great article that discusses the enormous role typography plays in web design.
Typography is the Foundation of Web Design – I couldn’t agree more with the title of this post. Samantha Warren discusses the process she uses for implementing great type solutions for the web in a presentation she gave at Refresh Baltimore.
The Elements of Typographic Style Applied to the Web – Great resource that takes Robert Bringhurst’s classic on typographic style and applies it to web design.
Web Safe Fonts – Great survey conducted by Jason Cranford Teague that details current web safe fonts and their presence on a variety of platforms and versions.
TypeTester – Lets you quickly and easily compare different typefaces and sizes, and generates CSS.
If you find any other useful resources, please share them!
A short assessment of the current state of typography on the, and the the various attempts to get away from the basic web-based fonts:
http://agitationist.com/web-safe-fonts-the-beginning-of-the-end
Thanks for the links. They’re a great help.
“Thinking with Type” is a website about typography in general, though not specifically about web typography. It’s useful for people like me who have had to educate themselves about type in general before they could start thinking about type on the web.
Thanks Lincoln. Ellen Lupton’s book Thinking with Type is fantastic. I highly recommend it.
It’s also good to realize that you can expand beyond the small set of Web fonts, by creatively using “font stacks”; these let designers pick their preferred fonts from the major platforms, so that altogether, the stack will hit nearly every visitor’s set of fonts and only as a last resort, fall back to Georgia* or Arial.
Some good links:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
*BTW: nothing wrong with Georgia–it’s underused. Fascinating roundup of Georgia-only sites can be found at:
http://www.inspirationbit.com/georgia-on-my-mind/