Read My Design: A Guide Typography in Web Design

Although at first, from a nondesigner’s perspective, typography seems like a small field, it is actually a very extensive part of design; one that can be applied to many others. In order to apply typography to web design, you must understand some fundamental concepts.

“Text will inevitably be read before it is looked at” – Reading Design, Dean Allen

In web design, particularly content-based web design, good typography mostly comes down to what maximizes readability (and doesn’t detract from quality). With cascading style sheets for fourth generation browsers, designers have many options in implementing typography, making it important to understand what to look for.

Fundamentals of Readability

Size and Hierarchy

Starting with your main body of text, understand that you must have a font size larger than 10pt. While it looks stylishly minimalistic for someone with perfect vision, it is hard to read with weaker eyes. Also, with long articles, having a larger font (and line height) makes it easier to keep track of your place, as well as read from a distance (if a reader wants to lean back in a chair).

Size also plays an important role in hierarchy. Unfortunately, with web design, it is difficult to have much control of in line spacing elements to emphasize hierarchy, as well as control emphasis. This means, hierarchy is mainly controlled by size (and font choice, if you are willing to give different font choices to different headers).

In this example, we see that, with only size being change, hierarchy can easily be distinguished.

Emphasis

Emphasis and de-emphasis are both relative in web design. What this means is, whether you make the font lighter or darker, heavier or lighter, anything that breaks from the normal flow of reading is going to be emphasized.

In this example, we see that emphasis is effective in, well, emphasizing. However, we also see that three types of emphasis only do one thing… emphasize. Unfortunately pragmatic web design limits you to normal and bold font, meaning you only have regular and darker text. This actually works to your advantage, as de-emphasizing using a lighter color decreases readability.

This brings us to another method of emphasis, italics. Italics, while they provide slight emphasis by breaking the normal pattern of text, decrease the quality of the text, as italicized text does not have effective anti-aliasing. Thus, while it may increase readability slightly, italicized text detracts from the quality of your works, making it less beneficial then it is harmful.

Contrast

In web design, there must be enough contrast to be able to easily distinguish text from the background. With small blocks of text, it’s acceptable to have light on dark, yet as blocks of text get longer, it’s better to have dark on light. I have yet to see a book be printed as white on black; it’s much easier to read, and less stressful on the eyes. Apply this knowledge to your designs.

Here we’ve got a scale for both a grayscale contrast, as well as a scale for color. As you can see, the last three provide sufficient contrast. The next two are acceptable, and the rest are not usable, as people with different types of monitors may be unable to distinguish them. Note this is about contrast in web design, particularly the main content of the site. Having decreased contrast is great for de-emphasizing in other uses of typography.

White Space

Spacing between both letters and lines are both very important aspects to consider. While you do not want the spacing to be two little, spacing too much has an equally negative effect.

Spacing also comes into play when writing. Often readers are frightened by large blocks of text, making it crucial to have small paragraphs. However, in web design, indentation is a generally ineffective way to distinguish paragraphs. Instead, have short paragraphs with distinguishable spacing between.

What this all comes down to.

Though I did not directly state it when describing each of these elements, they all contribute to readability and scannability. See, typography in web design is used not as an art, but as a function. This means, whatever you do typographically on a content based website, your ultimate goal is to increase readability.

This concludes my small guide to typography in web design. I’d love to hear your insights on the matter, so feel free to drop a comment.