The Smashing Book – Typography: Rules, Guidelines and Common Mistakes (part 3 of 4)

• By The Smashing Editorial
• October 5th, 2011
• 1 Comment

← Typography: Rules and Common Mistakes (2/4)TOCTypography: Rules and Common Mistakes (4/4) →

Setting Type With Fonts

Probably one of the most annoying aspects of modern Web typography is the limits facing the designer who wants to create a rich and truly cross-browser, uniform typographic design. Because of the variety of operating systems coming with pre-installed system fonts, it is hardly possible to predict whether a particular font will be correctly displayed on a user’s machine or will create typographic noise, making the text harder to read and the layout harder to navigate.

Of course, one can always restrict one’s font choice to the so-called “Core Web fonts”, the set of 10 fonts that were designed in the 1990s-2000s to serve as the standard pack of fonts for the Web. Nowadays, these fonts are installed on over 95% of machines worldwide by default and are therefore often the first choice of designers for body copy.

Core Web fonts in an overview.

The fonts are Andale Mono (monospaced sans serif typeface), Arial (sans serif), Comic Sans MS (script), Courier New (monospaced slab serif), Georgia (serif), Impact (sans serif), Times New Roman (serif), Trebuchet MS (humanist sans serif), Verdana (humanist sans serif) and Webdings (dingbat).

In recent years Palatino (Mac, old-style serif), Helvetica (sans serif), Lucida Sans Unicode (sans serif), Tahoma (humanist sans serif) and Lucida Grande (humanist sans serif) have gained popularity as well.

Georgia, Verdana, certain Lucida fonts, Monaco, Trebuchet and Verdana were designed specifically for the screen, the purpose being to improve the legibility of Web copy. Together with the legendary Times New Roman, the fonts Arial, Lucida, Georgia and Trebuchet work best at a font size of 26 pixels and above and make for nice-looking headings in the body copy. Verdana, Georgia, Lucida and Arial are common choices for blocks of text; however, carefully considering the leading and measure of the text is necessary in most cases; typeface alone is certainly not a silver bullet.

With Windows Vista and Microsoft Office 2007, Microsoft introduced the ClearType Font Collection 2007, which consists of six new font families pre-installed on the PC: Calibri (humanist sans serif), Cambria (serif), Candara (humanist sans serif), Consolas (monospace), Constantia (serif) and Corbel (sans serif). While not used by the majority of people, they are pre-installed now on most modern Windows-based machines and can also be installed on Macs.

Notice that many software packages automatically install extra typefaces. For example, Office 2003 installs over 100 additional fonts. Of course, not all of these fonts are particularly refined, and not all are suitable for the Web. However they still do increase your options. You may want to check Richard Rutter’s Font Matrix ¹ which lists fonts bundled with various versions of Mac and Windows, Microsoft Office and Adobe Creative Suite.

CSS Font Stacks

While your choice of “safe” fonts is quite restricted, you do not necessarily have to use only those fonts in your style sheet. Using CSS font stacks, which is a prioritized list of preferred fonts defined in the CSS font-family attribute, you can tell the user’s browser to cycle through this list until it finds a font that is installed on the user’s system and then use it to display whatever text is defined by it.

The most common fonts on all systems, according to Codestyle.org’s “Combined font survey results” (July 2009), which has only slightly changed since then.

For instance, if you want to use Baskerville, you can list it together with alternative fonts in your CSS font stack:

body { font-family: Baskerville, Times New Roman, Times, serif;
}

And if the user doesn’t have Baskerville installed on his or her machine, the browser checks for the next choice, which would be Times New Roman, and then Times and then, if none of them was found, a generic serif font.

As Nathan Ford mentions in his article Better CSS Font Stacks ², when selecting a font stack, you need to first carefully consider the context of the text. Certain fonts work better for body copy, while others work better for headlines: consider if the text element is a headline, a heading or a paragraph first ³. In general, a font stack should follow the common scheme of:

font-family: ideal, alternative, common, generic;

For “ideal” fonts in headings, you can explore typographic possibilities beyond the “safe” fonts: many fonts have quite a high market penetration, so unless you pick a really unusual one, a fair portion of users will likely have it. For body copy, “ideal” can be measured by how well it fits the overall design and its readability.

“Alternative” fonts for titles and blocks of text are usually similar to ideal ones (in terms of letterform and type) but are more popular and widely installed.

A “common” font is similar in flavor to the first two but doesn’t share their distinctively sophisticated features and is usually simpler and more ordinary.

Finally, the “generic” choice is the fallback that makes sure the text is displayed in any available generic font if none of the others is installed on the user’s machine.

In his experiments, Travis Gertz uses various CSS font stacks to offer visitors a beautiful typographic design. In the example above, he uses Helvetica Neue for the body copy and Baskerville for dates, headings and block quotes.

Examples of popular font stacks for titles are:

• Baskerville, “Palatino Linotype”, Times, Times New Roman, serif;
• Cambria, Georgia, Times, Times New Roman, serif
• Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif
• Futura, Century Gothic, AppleGothic, sans-serif
• Garamond, Hoefler Text, Palatino, Palatino Linotype, serif
• Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif
• Georgia, Times, Times New Roman, serif
• GillSans, Trebuchet, Calibri, sans-serif
• Helvetica, Helvetica Neue, Arial, sans-serif
• Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif
• Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif
• Trebuchet, Tahoma, Arial, sans-serif
• Verdana, Tahoma, Geneva, sans-serif

Here are examples of popular font stacks for body copy:

• Arial, Helvetica Neue, Helvetica, sans-serif
• Baskerville, Georgia, Cambria, Times, Times New Roman, serif;
• Cambria, Georgia, Times, Times New Roman, serif
• Century Gothic, Apple Gothic, sans-serif
• Consolas, Lucida Console, Monaco, monospace
• Courier New, Courier, monospace
• Futura, Century Gothic, AppleGothic, sans-serif
• Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif
• Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif
• GillSans, Calibri, Trebuchet, sans-serif
• Helvetica Neue, Arial, Helvetica, sans-serif
• “Lucida Sans Unicode”,“Lucida Grande”,“Lucida Sans”,Verdana,Arial, sans-serif;
• Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif
• Times, Times New Roman, Georgia, serif
• Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif
• Verdana, Geneva, Tahoma, sans-serif

When defining your font stack, make sure the fonts you choose are not too obscure and that even alternative and common fonts will work well in overall design. Putting very different fonts in a font stack is usually not a good idea because variations in font size, measure and leading can produce quite surprising results for the body copy and headings, even making them unreadable or breaking the layout. Finally, you need to consider the possibility of situations where, for instance, the second choice in your font stack for headings is used while the third choice in your font stack for the body copy is used. Would the text flow and be readable in such a case? What about other combinations? Careful consideration up front saves trouble down the road.

Text Replacement Techniques

Although “Core Web fonts” allow for consistent, platform-independent typography, some designers prefer to experiment with unusual type settings for unconventional design solutions. Various text replacement techniques exist to replace plain text on your page with an image or movie that embeds the font of your choice and displays it to the user – in particular, if that font isn’t installed on the user’s machine. Such techniques often rely on client-side JavaScript support or server-side scripts that generate the images with the embedded text on the fly, while keeping content accessible and readable by most visitors.

In general, there are four kinds of text replacement techniques:

• Static replacement with an image, in which the designer simply replaces text with an image that has the text embedded in it, while keeping the content SEO-friendly. The Radu, Phark and Malarkey Image Replacement methods recommend large negative margins, letter spacing and text indents, respectively, to hide text and using the background property to display the image instead). Notice that using just an img element for textual content (without image replacement techniques described above) ignores the need for semantic HTML markup and therefore should be avoided.
• Dynamic replacement with an image, which goes beyond static image replacement and automates image generation using JavaScript (client-side) or PHP (server-side). The designer uploads the font file to the server, where it is used by the server script to generate images that replace the text. Techniques that employ this method include Scalable Inline Image Replacement, Dynamic Text Replacement, Facelift Image Replacement and Scalable Jens Image Replacement.
• Dynamic replacement with a movie, which relies on Flash movies that have typefaces embedded in them. These movies are called on demand whenever text needs to be replaced (using, for example, sIFR). The advantage of this technique is that text can be selected and copied. However, this technique increases page load times, and both JavaScript and Flash have to be supported by the user’s browser for it to work. Despite these serious limitations in accessibility, sIFR is probably the best-known text replacement technique on the Web, with various plug-ins and third-party applications.
• Dynamic replacement with canvas and VML, which consists of two separate parts: a font generator, which converts fonts to a proprietary format using VML, and a rendering engine. Cufón ⁴, an example of this technique, does not require any plug-ins, is cross-browser-compatible and is faster than comparable techniques. Its advantage is that users can select and copy the whole text on the page and don’t have to select replaced text explicitly, which is not possible with sIFR or the other techniques. Another example is Typeface.js ⁵.

Whichever technique you choose, make sure the content remains accessible and readable, even if Flash or JavaScript is not installed or enabled in the user’s browser. Static replacement with images comes with major accessibility issues. And dynamic techniques usually increase server load and so sometimes require some sort of caching. Still, Cufón and sIFR are currently growing in popularity; and Cufón is often preferred to sIFR because it is cross-platform compatible and lightweight, even if its settings are not as flexible as sIFR’s.

sIFR (Scalable Inman Flash Replacement) in action: Meta Pro Book is embedded in a Flash movie.

Dave Shea’s experiment with Cufón: the body copy is more elegant and makes for more comfortable reading. Cufón and the @font-face attribute are currently among the most promising typographic techniques on the Web.

@font-face Attribute

Embedding fonts using text replacement techniques is often time-consuming and quirky, because designers have to embed typefaces in Flash movies or use server-side libraries to generate images with embedded typography. The drawback of these techniques is that they usually rely on the browser’s JavaScript support and are quite difficult to handle in practice. Obviously, native support of typefaces using pure CSS would be a preferable and more intuitive solution. And that’s exactly what the @font-face attribute of the CSS 3 Web Fonts Module is supposed to deliver.

With @font-face, embedding fonts is done in two steps. First, a new font is added to the list of available fonts in the style sheet. This is done using the @font-face property:

@font-face {
font-family: MuseoSans;
src: url('fonts/museo_sans.otf') format ("opentype");
font-weight: bold; 
}

In this example, the designer declares Museo Sans as one of the available fonts to be used by the browser to render text. Then in the second step, to style a text element with the newly declared font, we use the font in our regular CSS declaration, like this:

h1 { 
font-family: MuseoSans, Arial, sans-serif;
}

The browser will load the museo_sans.otf file and use it to display h1 headlines. If the browser doesn’t support the @font-face property, it will simply be ignored. Note that only freely available fonts may be uploaded to the server, because the files will be accessible not only to browsers but to users, who can download the files from the server. The license agreement should explicitly state that the font may be used with the @font-face attribute ⁶.

Typekit is a simple solution that comes with a Web-only font linking license that allows you to embed commercial fonts in your layout. (Image by Andy Clark)

Typekit ⁷ or Fontdeck⁸ is another option. Both services offer a simple solution that comes with a Web-only font linking license that allows you to embed commercial fonts in your layout. A font file, or certain weights in a font family, are stored on a third-party server, and the designer subscribes to Typekit to rent (not buy) the font. Upon payment, the designer is given a JavaScript file to include on the page and be used with simple CSS.

—

1. 24 Ways: Increase Your Font Stacks With Font Matrix (Richard Rutter)
2. Unit Verse: Better CSS Font Stacks (Nathan Ford)
3. Code Style: Most Common Fonts for Windows, Mac and Linux, survey result
4. Github Social Coding: sorccu / cufon
5. Typeface.js
6. I Love Typography: The Font-as-Service (Elliot Jay Stocks)
7. Typekit.com
8. Fontdeck.com

← Typography: Rules and Common Mistakes (2/4)TOCTypography: Rules and Common Mistakes (4/4) →