Whenever someone visits a website, chances are they don't really care about the colors, images or sound more than they do about what your site has to say in text. People rely on the text on your website to accomplish a variety of things and goals – navigating through the site, making purchases or finding a way to contact you. A large fraction of the web is written language. Thus, it only makes sense to state that shaping written information in the most effective way possible is an essential part of web design.

Typography Is Not Just About Selecting Typefaces

A lot of people seem to equate typography with font selection. Although selecting the most optimum font for the information you want to convey is part of typography, that's not what it's all about.

Typography is much, much more than just deciding whether you should settle with web fonts or embed "super_cool_new_font.ttf" in your CSS code. Anyone can use or choose good typefaces but only a few people really know how to implement good typography. Sadly, a large number of these people happen to be web designers.

Information Design

THAT is what typography essentially is.

The information designer's foremost task is to organize and interpret a certain mass of text in such a way that the reader or user can find what is of interest to him without much effort. Optimizing typography for a website means optimizing or ramping up its accessibility, readability, usability and graphic balance ¬– which is essentially what a web designer does.

Micro and Macro Typography

Good web design takes into consideration both of these factors. Macro typography pertains to the overall text structure of your website and how your text appears against the design or aesthetics of your site. Macro typography is of interest to most web designers since it provides them with the opportunity to make the text more appealing and "at home" with the overall website design. This is where the web designer gets the chance to pick fonts and colors.

Micro typography, on the other hand, is concerned with how well-spaced your letters and words are. It's concerned with the details of spacing – whether the words or text are easy to read and whether the text maintains its integrity despite the user's ability to resize font sizes to fit his needs.

Some Rules and Guidelines

Here are a few rules and guidelines you can observe when designing websites:

  • Use typography as hierarchy for the information you are providing. This will make it easier for your audience to find what they are looking for on your page.
  • Observe contrast. Make sure your H1's stand apart from your paragraphs and other text elements.
  • Read through the text you are about to place on the website to give you an idea of what the content is generally about. This helps you avoid the so-called "disconnect" between the design of the site and its content.
  • Avoid using too many fonts for your main content. A maximum of three to four typefaces are recommended but I would stress on just two. Why? You will be adding elements to your site which are out of your control (i.e. advertisements, banners, etc). You cannot change the fonts on these elements to make them match the ones you have on your website. To avoid the clutter of having too many fonts, keep the variety of typefaces on your site to two.
  • Allow for resizing of texts for better reading. Some users will need to do this. Don't use a fixed line-height across the board so that the text appears alright even if the user zooms in to enlarge the text.