Part IV: Web Typography Basics
Print designers often find it difficult to make the transition to Web for one primary reason: Typography on the Web sucks. Or does it?
We touched upon type briefly in the last session, specifically the font-family property. This property alone should bring home the benefits of CSS to anyone who's manually set a dozen or more <font> tags to a page.
If you want to set the default page font to sans-serif and the <h3> tags to serif as we do at the RCS site, you can! And, you need only establish the rules once. Do you love CSS yet?
All in the Family
You will likely devise two sets of font families, one for serifs and one for sans-serifs. When attached to the <body> element, the first available font in the set becomes the page-wide default font. Having a robust set of cross-platform fonts allows for a graceful degradation if the desired font is missing from the user system.
The two sets I use most often are listed here:
Sans-Serif
font-family: 'trebuchet ms', verdana, geneva, arial, helvetica, sans-serif;
Note: The single quotes around 'trebuchet ms' indicate that the two words describe one font.
Serif
font-family: optima, palatino, georgia, times, serif;
These sets contain common system fonts for both MAC and PC platforms. Your sets can contain any font, within reason, in any order of preference. The rule of thumb is, set your ideal font first, and your less-ideal but more-common fonts after that. Also, the W3C recommends placing system-independent fonts such as serif and sans-serif at the end of your font-family set.
Here's UsableType's list of common MAC and PC fonts. Their CSS Type Guide is a valuable resource you may want to use.
It may seem like a limited palette of fonts, but, compatibility aside, a good typographer can accomplish more with leading (line-height) and kerning (letter-spacing) than a bad one with 100 fonts. In addition, you have over a dozen type-related CSS rules your disposal to tweak the type to your satisfaction.
If all else fails, there is accessible IR which we will cover in an advanced lesson.
Cells Will Free You
Today were going to build what I call cells. These are self-contained <divs> or divisions that contain all the rules you need to style repeating blocks of content such as articles and news posts. The idea is surely not original to me, but I use it extensively.
The XHTML and stylesheets (text04 and lesson04) are provided for your reference.
Where's the Code?
This lesson continues in the XHTML and stylesheets. Next lesson, we'll cover typography in even deeper detail. As always, leave a comment or question. I'll be sure to respond.