Enhance Web Page Text Legibility

If I had to pick the single greatest benefit that cascading style sheets has brought to web design, it would be the ability to adjust the leading and point size of fonts. This feature is a tremendous enhancement that brings web design closer to the sophistication of print design typography.

Leading is the amount of space between lines of text in a paragraph. Small changes in the amount of space between lines can enhance both legibility and the attractiveness of a web page. Along with leading, you have the abilty to set the precise point size of the font in style sheets as well.

In the web page design above for a business broker in California, I used 9 point Arial type with 18 point leading in the left column of type. This is a generous amount of space between lines of text that is well suited for this page. Since it is the most important text on the first page of the site, I wanted it to be spacious and attractive, drawing the eye with a more decorative presence. In the right hand column of the web page I used a smaller size font with tighter spacing between the lines of copy. This text is of secondary importance in this web page design. Using smaller text with less space between the lines made it seem less prominent. You can see how the readers eye can be led on an intended path from the most important to the secondary information on the page simply by adjusting font (or type) sizes and leading.

In an article that is meant to be read online (such as the one you are now reading), adding leading between lines is an effective aid to legibility. It allows more "breathing room" between lines. The eye does not have to work as hard to pick out a line of text from all that surrounds it. It also contributes to a more elegant looking page. This is especially true of "sans-serif" typefaces such as Arial, Helvetica, and Verdana. They benefit in legibility and appearance by adding space between lines of text.

The articles you are now reading use 13 pixel Arial text with 19 pixel line height*. I choose this combination to give maximum readability to these articles. If people must read the content on your website, make it easier for them by using cascading style sheets (css) to adjust type size and spacing. Their eyes will thank you for it!

*You can use either point sizes, the traditional measure of font sizes, or pixel height to set font sizes and spacing in cascading style sheets.

Donald Peterson