CSS Typography

In: Columns > View Source

By Garrett Dimon

Published on January 16, 2006

You don’t often see “CSS” and “typography” used in the same sentence—and for good reason. Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices. Unfortunately, with CSS that’s not quite the case. Don’t lose hope just yet, though. CSS can do more than you might think.

With font embedding, the widespread adoption of sIFR and a slew of image replacement and JavaScript techniques, there are numerous ways of avoiding the typographic limitations of the Web. Unfortunately, these methods aren’t trivial to use and each has its own limitations. So we’ll focus on embracing our options within the boundaries of CSS.

Typography isn’t an exact science, and like any aspect of design, it takes practice to select the right typefaces for the job and tweak them appropriately. This article can’t address how to design with type, but it can help you become more aware and explore the options available to you through CSS. With a little practice you can make your design easier to read and improve aesthetics.

Why CSS?

While there are other options, CSS is the easiest, most reliable, accessible and straightforward way to improve the readability and visual design of your sites. The only thing in your way is an awareness of the techniques at your disposal and an understanding of when to apply them. From line-height to letter-spacing, you have more control than you might think.

Why Bother?

The practice of typography is a centuries-old tradition. It has its roots in both design and readability, and thousands of different fonts have been created to those ends. While you may not have the same selection and precise control on the Web as you do in the print world, you still have enough control to improve the display of your characters and paragraphs. Despite less control, improved readability and design are still worthy goals that are within your grasp using CSS.

Still not convinced? Take a look at any content-heavy site and take note how much of the real estate is text. Now imagine the impact if the aesthetics of such a large area could be improved dramatically. When words are a significant part of your Web site, they deserve a significant part of your attention and have a significant impact on the design.

More Than Just Another Pretty Typeface

Just in case you’re still not convinced, we’ll look at a practical example from a recent Wichita State University study that compares how readable text is in different layouts.

The study found that margins and optimal leading (line spacing) result in high reader comprehension. Unfortunately, these techniques also slow reading speed. However, when polling for preferences, optimal leading proved to be the clear favorite. Your layout and text do, in fact, have a significant effect on more than just aesthetics.

Default Fonts Across Platforms

The first step toward improving your online typography is understanding the fonts available to you. Every platform has a different set of default fonts, which narrows our options a bit. The good news is that you’re probably already familiar with most of them: Arial, Helvetica, Times, Georgia, Trebuchet, Verdana, and Courier. While this selection leaves plenty to be desired, there are more than enough options to generate some nice results.

Measurements, Sizing and Resizing

The subtleties of using different units for font sizes is a complex issue and outside the scope of this article. For now, you simply need to be aware that your choice of units for specifying font sizes can have a profound effect on how your text is displayed on different platforms and different browsers. If you’d like a detailed analysis and explanation, take a look at Owen Briggs’ article on text sizing. It’s older, but it covers the basics and gets to the point quickly.

Additionally, with online typography you can’t guarantee your visitors will be viewing things at your intended font size. They could easily increase or decrease their desired font size at will and drastically change the composition of your design. This can be both a blessing and a curse depending on your perspective, but it’s best to embrace this flexibility and make the most of it. You’ll be offering your visitors improved accessibility and taking full advantage of the flexible nature of the Web.

For this article, we’re going to base everything on Owen’s findings and assume a body base font size of 76%, and paragraph size of 1 em. This should look approximately the same in most browsers and enable your visitors to resize to their hearts’ content.

With ems, it’s important to remember that you’re dealing with relative font sizes, and nested elements will be relative to their parent elements. For instance, if you specify the font-size for both the p and strong tags to be .9em, the word “beautiful” in the strong tag will be smaller than the surrounding text:

<p>I love <strong>beautiful</strong> typography!</p>

This happens because an em is a relative unit and the inner tag font size is relative to its parent element instead of the document. In this case, “beautiful” is .9 ems relative to the .9-em paragraph tag, and the paragraph tag is .9 ems relative to the default body text size. Just remember that specifying smaller font sizes inside elements will size it according to the parent element—not the document.

Options at Your Disposal

Without using advanced non-CSS techniques, your choices for online typography are limited. However, you still have some reliable options for improving the readability and aesthetics of your type.

Of all the properties for improving typography using CSS, line-height is one of the most important. Browsers make an effort to adjust line-height along with changes in font size, but they don’t always do a good job. Depending on the size of your text, adding or removing space between lines can drastically improve readability. Similarly, when used with caution, word-spacing and letter-spacing can be used to improve readability or add interest to a headline or short section of text.

For situations where you want to use all uppercase, all lowercase, or first-letter capitalization, you can take advantage of the text-transform property. Additionally, the font-variant property can apply small caps.

Another practice that is more common in the print world, but not as popular online, is indenting the first line of a paragraph. With CSS, the text-indent property lets you do just that.

You are probably already familiar with the text-align property, but you may not have thought about using the justify value. There are few cases when it’s useful; however, when using narrow, newspaper-like columns, it can greatly improve the flow of your text and help define the layout and overall design of your pages.

While they aren’t universally supported yet, the pseudo-elements :first-letter and :first-line can also help you dress up your paragraphs a bit more as well. One thing to remember with the first-letter pseudo-element is that you’ll most likely want to to use the float property to float the first letter to the left and have your text flow around it nicely.

The great thing about the first-line property is that user agents will automatically determine which words fall on the first line when the page is rendered. If the text size or container size changes, the first-line and effects will change according to the words that fit on the first line as a result.

Start Experimenting

Not surprisingly, it’s not easy to compare several fonts at different sizes and line heights with various other effects. Luckily, there’s a wonderful tool called TypeTester to help you quickly and easily experiment with different variations of fonts to find the one that’s right for your site.

Creating Scannable Text

While the more subtle effects we’ve examined so far are great, there’s more to consider when writing online. People tend to scan rather than read, and that means judicious use of headings, bold, italics, bulleted lists and highlighting can greatly help the readability of your content as well as make it easier for users to scan quickly. The key word here, though, is “judicious.” If you bold, italicize, or highlight almost every word, you’re actually making it harder to read.

Finally, headings are your friend. Not only do they help break up your content and group it in a scannable way, but they also provide you with an opportunity to dress up your content when appropriate by adjusting some of the previously mentioned properties. Try some headings in all caps, rich colors, or with tighter word or letter spacing, and you should see a noticeable difference.

Related Links

We’ve covered a lot of ground, so let’s take a look at how it all works in practice. While there are plenty of great examples out there, I wanted to point out a few that really stand out to show how attention to detail and working within the constraints of CSS can still lead to high-quality visual design and improved readability.

• Kottke.org – Jason’s site has always been one of the most readable on the Web. His site is text-heavy and his line heights and font sizes are excellent for easy reading.
• Rob Weychert – Rob does a great job using different fonts and pure CSS to create interest and variety, while still staying consistent across his site.
• Subtraction – With his attention to detail, font sizes and line heights, Khoi proves that it’s possible to use Arial, the most common font on the Web, to create a beautiful site.
• A List Apart – Jason Santa Maria’s typographic choices for his recent redesign are amazing. Additionally, he takes care to use italics and capitalization to create variety and interest, which gives the site a definite typographic signature while relying almost primarily on CSS.
• Reading Online Text: A Comparison of Four White Space Layouts – A study examining the effects of white space in online reading.

If you’d like more information on the different system default fonts, the following links are good resources.

Mac

• Mac OS X fonts
• Mac OS 9 fonts
• Microsoft IE core fonts

Windows

• Windows 98 fonts
• Windows XP fonts
• Six new Windows fonts in 2006 (Naturally, these won’t be widely available for some time, but they provide some new options to anticipate.)

Summary

The next time you’re sitting down to work on a new design, set aside some time to focus on tweaking your CSS to achieve typographic excellence. Experiment with the properties and choices we went over today. Before you resort to advanced methods like sIFR or image replacement, make sure you’ve given serious consideration to your CSS options.

Your site will be more flexible, accessible and easy to maintain in the long term, and your visitors will love you for it—well, at the very least, they’ll appreciate your attention to detail.

Related Topics: CSS, Typography, Web Design