Return to page 1.
Toolbox: Good and Great Typography for Web Designers
As any Web professional will tell you, the essence of good Web design is usability. The essence of usability is good typography. Readability, legibility, message impact, the voice of the site’s content, the speed with which a visitor can identify, interpret, and understand content—all of it comes down to the typography, something many Web design instructional programs don’t teach. Most Web designers have to self-educate in typography on the Web, cobbling together bits of information to form personal interpretations of typographic rules and styles, dos and donts. Allow me to help fill in a few of those holes.
First, go read The Elements of Typographic Style Applied to the Web. This website, which is rather like an ebook, will give you the design basics. Note that the book is still a work in progress; for updates, subscribe to its RSS feed. Chapters 8 and 9, “Typography” and “Editorial Style,” of the Web Style Guide Third Edition are also a good read. The rest of the Web Style Guide has good information, too, particularly for those who work on Web or intranet teams in enterprises or large organizations.
Now that you understand the principles of online typography, read up on the implementation of fonts online with the W3C’s spec on CSS3 and the @font-face rule in this free PDF from TypeCon 2010 Los Angeles. CreativePro.com also has a short series on the topic.
Enough with the educational material. It’s time to pick the right typefaces, sizes, leadings (line-height), and other type-related attributes.
Typechart lets you examine each of the Web-safe fonts (Arial, Helvetica, Cambria, Georgia, Lucia Grande, Lucida Sans Unicode, Trebuchet, and Verdana) and view them as they’ll appear on Windows and Mac computers in various sizes and styles. Font Matrix even tells you which fonts you can expect on clients’ computers by listing all the fonts that come pre-installed with different versions of Windows, Mac OS X, Microsoft Office, and Adobe Creative Suite. Note that Font Matrix is a little out of date; the most recent listed versions are Windows Vista, Mac OS X Leopard, Microsoft Office 2007, and Adobe Creative Suite 3.
Of course, with @font-face as well as sIFR and Cufon Web font technologies, you’re by no means limited to using preinstalled and Web-safe standby fonts. (Speaking of sIFR, or Flash-based fonts, check out the library of 1,000 free fonts from Font Burner.) Flipping Typical is an online font browser that displays all the fonts installed on your system in a way that makes them easy to compare and examine. Once you have a shortlist of typefaces, head over to Typetester to compare three different typefaces side-by-side. There are a large array of options, including font size, leading (line-height), tracking (letter-spacing), alignment, style, color, background, and more. You can use any of the Web-safe fonts or fonts installed on your system. When you have the type exactly how you want it, TypeTester will even copy the CSS to your clipboard at the click of a button.
So far, you’ve learned how to get good typography. Before you can call it great, you need to understand baseline grids (also known in the Web world as “vertical rhythm”). Start with this line-height grid system from Chris Coyier. That one’s only for the basics, though. When you feel comfortable with Chris’s system, graduate to the much more advanced Baseline framework. It contains reset styles and grid-based CSS for forms and HTML5 elements and more.
Next, check out the online CSS generator CSS with Vertical Rhythm. For a more visual approach to building baseline grids, try the Baseline Rhythm Calculator, a simple tool that shows you multiple columns and sizes based on single font-size and line-height values. Scale & Rhythm is an even more advanced—and much more visual and interactive—baseline grid calculator.
What can I find free for you? Want more free fonts? Maybe Photoshop brushes? How about more online applications that do this or that for free? Tell me in the comments what you’d like to see in future installments of Free for All, and I’ll do my best bloodhound impression to track it down for you.
Please note: Free for All will often link to resources hosted on external Web sites outside of the control of CreativePro.com. At any time those Web sites may close down, change their site or permalink structures, remove content, or take other actions that may render one or more of the above links invalid. As such neither Pariah S. Burke nor CreativePro.com can guarantee the availability of the third-party resources linked to in Free for All.
This article was last modified on December 13, 2022
This article was first published on March 23, 2011
Commenting is easier and faster when you're logged in!
