Typography is one the most important aspects of design and, yet, is one of the most commonly overlooked. Good typography is essential for good design in any medium. The key to good typography on the web is legibility. By choosing the right font or combination of fonts, using contrasting colors, proper alignment and spacing, you can achieve cleaner, more dynamic, and more effective websites.

Choosing the right colors

The text color you choose should be completely dependent upon your background color. Choosing a good combination of contrasting colors will increase legibility. Don’t neglect the color blind when you design your websites.

Here’s a few things to consider:

1. Use a dark text color on a light background color (black on white is the best).
2. Light colors on dark backgrounds is a bit more strenuous on the eye, so use it sparingly and increase your line-height when you do.
3. Avoid conflicting color combinations that strain the eye (such as blue and red or green and red)

Choosing the right typeface

When designing for the web, you’ll probably want to choose a typeface that has been specifically designed for screen output (such as Trebuchet MS). The face you should choose should have generous x-heights and shortened descenders for best legibility.

Unfortunately, due to the limited number of fonts shared among all computer systems, we are left with only a handful of typefaces to choose from that we can be sure that everyone (well, almost) will have on their computer and even fewer that worth using.

Those fonts include: verdana, trebuchet ms, georgia, arial, times new roman, and (sadly) comic sans ms.

These fonts are available on almost all computers straight out of the box. Verdana, Trebuchet MS, and Georgia were all specifically designed for screen output and are probably the best choices for web text.

If you have a typeface in mind that you are not sure others have, you should still use it, but make sure that you choose acceptable substitutes for those who don’t have the font and that your site still works properly those substitutes. This is very easy to do in CSS.

font-family: helvetica, arial, verdana, sans-serif;

The way this works is that the receiving computer will simply go through the list until it finds a typeface that it has. You should always include a default typeface (such as sans-serif) as a last resort as well.

Alignment

In most cases, it will be best to use left alignment. It is the easiest for people to scan and read. Centered text is difficult to follow after more than a couple lines and should be used sparingly.

There other major option is justified type. Creating successfully justified text is a difficult endeavor even for print. It is even more so for the web, because of word-spacing, letter-spacing, and hyphenation limitations in CSS. CSS will allow you justify your text, but not adjust it in the ways that are necessary to display it properly. If you feel the need to justify your type on the web, it seems to work the best for wide content areas that contain large amounts of content.

Spacing

There are many ways that you can adjust the spacing of text, such as tracking (the space between letters), kerning (the space between words) and leading (to put it simply, the space between lines). In CSS these are represented as letter-spacing, word-spacing, and line-height respectively.

As mentioned above, the usefulness of letter-spacing and word-spacing in CSS is limited. Word-spacing is rather poorly supported in older browsers and both lose most of their power if you cannot set maximum and minimum limits. You may still find letter-spacing useful at times, such as with titles.

The most important aspect of spacing for the web is, thus, line-height. By placing a sufficient amount of space between rows of text, you will increase legibility. There are formulas to figure out the proper spacing based on text size, but all you really need to do is find a medium that is not too cramped, not too loose and flows nicely.

Conclusion

Unfortunately after all these sentences and paragraphs, we have only covered the basics for understanding legibility on the web and have barely scratched the surface of typography. Just remember, if something is difficult to read, then most people won’t bother.