Typefaces and typography are probably the most neglected aspect of web design. Most of us just make do with the common font types (like Times New Roman, Arial and Verdana) without considering if it’s appropriate at all.

Good web designers think typography as part of their design master-plan. With the better understanding of fonts and its attributes you too can improve your website aesthetically and its professionalism.

The 2 most important factors to consider when choosing a font are readability and legibility. For starters, let’s break down and familiarize ourselves with font terminology:

1. baseline - imaginary line on which capital letters rest.
2. x-height - height of lowercase letters against upper case ones.
3. Counters - Counters are enclosed (full or partially) spaces in letters
4. serif – short strokes extending from the main stroke of a letter.
5. Stem – Vertical stroke in letters.
6. Stroke – lines that make up a letter.

To wrap it up, we discussed how the above influence readability and legibility on the web and some of the common fonts used.

Why Sans serif over Serif fonts?
Fonts are generally grouped into two main groups, Sans serif and Serif fonts. As you can see from the anatomy, serif fonts are fonts with short strokes protruding from the main stroke of each letter. Times New Roman, Garamond and Rockwell are some examples.

Sans serif is the exact opposite of serif fonts, with no strokes protruding. Verdana, Arial and Helvetica are some of the commonly used sans serif fonts.

Sans serif fonts have lower contrast, wider counters, taller x-height, and more width between letters, thus making them more legible and readable comparing to their serif counterparts on the web. A comparison is drawn below:

Serif font, Garamond and Sans serif font, Verdana both at size 72.
Notice how the thin strokes of the Garamond font impedes readability and legibility.

Glad that you have survived part 1, more font tweaks coming up in part 2! Stay tuned!

This article wouldn’t be possible without the following websites:

1. The anatomy of web fonts
2. Web Typography tutorial
3. Before and after magazine

Related posts:

1. Typography Part 2 – Font art and text tweaks using CSS and Photoshop