Advertisements
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 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 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 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.
