“Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability.

And this is the purpose of typography:

The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading.”

– Hermann Zapf

What typeface to use, and when

First, my pet-peeve – ALL CAPS.

Capital and lowercase letters:

If the text is set entirely in capital letters, it suffers a loss of legibility. Type set in this manner retards the abilily to read it. Our minds are set to see shapes. This is why we can “read” those blocks of text that are actually not the correct spelling. There are shapes that our minds read, over the letters themselves. IF THE TEXT IS IN ALL CAPS there isn’t the shape that there is when the text is lowercase.

Serif or Sans-Serif?

The rule of thumb for print is to use a serif font, the “feet” of the letters help move the eye and keep you on the line. But, just as color is different on a monitor due to the light coming from behind, so is  type. Serifs actually make reading long lines of text more difficult on the screen. For this reason, sans-serif fonts are best used for long blocks of text, while serif fonts are great for headings.

All rules can be broken in great ways, but it is always best to know the rules before breaking them. That said, I have seen some fabulous sites with serif fonts for the paragraphs.

Contrast

Contrast is the main factor in whether or not text is easy to read. Good contrasts will make text easy on the eyes, easy to scan quickly, and overall more readable. On the other hand, poor contrast will force the user to squint and make reading the body text almost painful, not to mention a lot slower.

Black on white is very readable. Black on white is clearly the standard in contrast colors. For readable content it is good to stay in the range of black-on-white contrast.

However, something like purple on blue, is nearly impossible to read. Poor contrast can have a major impact on the text. You probably won’t see websites using this type of contrast, but you need to be aware of it.

Line Height

Line height is a very common term meaning the space between individual lines of text. Line height is another factor in the readability of body text and even headers. Sufficient line height is especially important in Web design because it makes the text easier to scan … and scan we do! Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.

Letter Spacing

Like line height, letter spacing affects readability in Web typography. Letter spacing is the space between each letter in words. Letter spacing is an obvious factor in legibility.

Line Length

Line length is often overlooked in Web typography but should not be. Line length is, of course, the number of words per line. A good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally. Aim for a maximum length of around 80 to 100 characters per line, if possible.

For more on web typography readability visit Smashing Magazine’s article,  10 Principles Of Readability And Web Typography

Learn: Typeface Classifications

.