Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as print, all it takes is careful consideration and a little typographic fine tuning to bring website layouts to life.

Choosing the right typeface
Although we only have a handful of ‘web safe’ fonts at our disposal, selecting an appropriate typeface is still crucial to the success of a design. Each typeface evokes a certain mood, which needs to be matched to the project at hand: Georgia reflects an academic yet vibrant attitude, whereas a sans-serif face like Arial is more austere in tone. If sticking to one font seems too limiting you can judiciously mix and match typefaces to add variety to your layout. Consider the elegant typography of A List Apart, which utilizes Georgia for headlines, Times for bylines, and Verdana for body copy.

Type hierarchies
Once you’ve settled on your typeface, it’s time to establish a typographic hierarchy. This requires defining the scale, weight, placement and spacing of text relative to its importance within a document. A well considered type hierarchy will effortlessly guide the viewer’s eye through a text, and add a sense of balance and structure to the page. Headings also serve to break copy up into digestible chunks, which is critical on the web where a reader’s attention span is fleeting.

Spacing text
Another important consideration is the leading and tracking of text, or in web terms, the line-height and letter-spacing. By default most web browsers will tightly space lines of text, but the CSS line-height property gives us a powerful tool for optimizing leading. Generous leading adds more open space to a block of text and can make it easier for the eye to follow. Similarly, the CSS letter-spacing property can be used to add balance or visual interest to headings by modifying the space between letterforms. Headlines set in capitals respond particularly favorably to loose letterspacing.

Typography is a vital aspect of the web design process, and it is worth investing the time to fine tune a site’s typographic implementation. If you want to delve deeper into the subject here are some excellent online resources to get you started:

Web Style Guide
The Elements of typographic Style Applied to the Web
Five simple steps to better typography

This entry was posted on Thursday, May 3rd, 2007 at 2:31 pm and is filed under Design, Design Careers, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.