To serif or to sans?

The question over whether to use serif or sans serif fonts in body copy is actually a fairly interesting debate. In the web design world, it has become an accepted precept that sans serif fonts are better for condensed body copy, and in the world of print, serif fonts are better for longer passages of type. This is, however, a myth that has yet to be proved conclusively either way, but you can see an example of the difference in Figure 2-2.

CONTENT

3. The term greek is technically false (lorem ipsum is Latin), but it has been slowly converted into a slang verb by thousands of designers and marketing folk looking to quickly fill a block of content without actual text.

Several studies have been conducted, all of them producing virtually imperceptible, almost anecdotal evidence supporting both arguments. For typography on the Web, we can deduce the following:

1. In general, people prefer serif fonts when they were sized higher than normal, around 12 to 14 points.
2. Above 12 points, most fonts of any family are perfectly readable. At smaller sizes, sans serifs slightly edge out serifs in terms of readability, but this has a lot to do with the inability of most computer screens to elegantly render the subtleties of serif fonts.
3. Small sans serif fonts present difficulty for readers with dyslexia.

Use common typefaces

When producing Windows 95, Microsoft commissioned celebrity typographer Matthew Carter to design screen-friendly fonts. The result was Verdana and Georgia, among others. These were crafted with the goal of retaining legibility at both small point size and subjection to poor screen aliasing. In a study by Wichita State University, both faces—along with Arial, the inbred cousin of Helvetica—scored high with users in almost all categories, including reading time, perceived legibility, and overall font preference.4 It would be a criminal understatement to say Matthew Carter succeeded in his goals.

The advantage of Verdana and Georgia is that they are available on most PC- and Mac-based computers produced since 1995. (Arial is installed on all PCs, and its nearly identical twin Helvetica is installed on all Macs.) This widespread adoption, along with their

4. Michael Bernard, Melissa Mills, Michelle Peterson, and Kelsey Storrer, “A Comparison of Popular Online Fonts: Which is Best and When?” Usability News 3.2, 2001 (psychology.wichita.edu/ surl/usabilitynews/3S/font.htm).

familiarity and proven legibility, make them ideal carriers of web-based content. The trick, then, is to make sure the CSS references them correctly.

Cascading style sheets provide web designers the means to discontinue the use of messy inline <font> tags and other display-related markup. In addition to creating far cleaner HTML, CSS allows for advanced typographic control, such as general styling (italicizing and bolding), employing small caps and drop caps, precise sizing through different units of measurement, and much more.5 With this much power, it is vital to write CSS type definitions that accommodate different platforms.

For instance, all Windows-based and newer Mac-based machines have Arial installed, but the same cannot be said for older Mac-based computers, which often rely on the similar but subtly different Helvetica.6 To produce a similar experience on both operating systems, the CSS needs to define both faces, such as the following:

p {

font-family: Arial, Helvetica, sans-serif;

}

It is also important to note that some fonts may not be called the same thing between OSs, and ones that are may look slightly different between the platforms. The font Times is common on the Mac, but completely absent on most PCs, except for a rare variation that produces a grungy, distressed version of the classic Times New Roman. To avoid the appearance of this nasty alternative and ensure the same look is produced on both platforms, the CSS would be the following:

p {

font-family: "Times New Roman", Times, serif;

}

Finally, it is critical to include a generic term at the end, whether serif, sans-serif, or monospace. It is foolhardy to assume any given machine has even the most generic font installed, so a contingency rule must be added. Otherwise, the browser will use its own style sheet (and that is almost never desirable). Testing the website on all platforms will, of course, weed out many of these potential design trolls.

Consider contrast

Finally, contrast is very important in web design, and most important when designing text. Like the conundrum over serif or sans serif, there are no hard-and-fast rules, only guidelines. Some prefer dark text on a light background; others like their copy reversed. Whatever the case, contrast—the level of color difference between the words and their environment—must be set relatively high in web design. A thousand different monitors will produce a thousand different images. For a deeper discussion on the topic and a list of tools to help discern contrast ratios, see Chapter 3.

1. Diving into advanced typography is beyond the scope of this book. However, a great book that wades neck-deep into the topic is CSS Mastery: Advanced Web Standards Solutions, by Andy Budd, Simon Collison, and Cameron Moll.
2. For an entertaining read on how Arial was unceremoniously derived from Helvetica, read Mark Simonson’s article “The Scourge of Arial,” at www.ms-studio.com/articles.html.