Typography and Technology

Web Design January 28, 2008

In a medium where communication is key, it makes sense that understanding typography would be useful. Let it not be underestimated; typography is not simply about typing words and phrases. Rather, it's identifying why one font is better than another in one context or what sizes and colors are appropriate. Thinking about how you display text can dramatically alter the overall site experience.

Unfortunately, there are only a handful of web-safe fonts - nine to be exact: Arial, Arial Black, Comic Sans, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana. Using stylesheets allows us to specify a set of fonts to choose from, in order of preference. In case someone's browser doesn't have your first choice font, the site will display in the second choice.

But besides font-family, there are several other aspects to consider:

Line-Height (Leading)

This is the space between the lines of a text. The default value depends on the font size and increasing or decreasing this affects readability.

Letter-Spacing (Kerning)

Letter-spacing is obviously the space between letters.



Using a positive letter-spacing value (like .5px or 1px) can give your text a much more open, airy feel. Additionally you can use a property called "word-spacing" which will, as you might expect, affect the amount of whitespace between words.

A negative letter-spacing is usually good for short amounts of texts like titles or subtitles. When people are reading paragraphs of text, it's best to adopt the standards we see in printed mediums. Using a "slightly off" line-height or letter-spacing has subtle effects on the reader. It provides a bit of an "edge" that can enhance the site design.

Font Families: Serifs & Sans-Serifs

It's very common to see sans-serif fonts on the web these days. For those who don't know, sans-serif means fonts without any "frills" - just plain. Serif has the frills - the nonstructural details at the ends of some letter strokes.



Several studies have been conducted to find out which type of font is the best for readability on the web. It's been found that serif fonts are actually more easily readable because the subtle details in the letter form can be much more quickly understood and processed. In a sans-serif type, readers may actually have to read the whole letter to see it. Obviously these are split-second glances, but it does have an overall effect. The purpose of serif fonts is to guide the horizontal "flow" of the eyes by providing these details to lead from one letter to the next. Additionally, these details also increase the space between letters, which helps with legibility. Additionally, the details can help bind letters together, which Gestalt theory will tell you is better (looking at the whole than the sum of its parts).

Font Sizes

On pages where there are lots of text, we've seen an increase in smaller-sized fonts. For most people, this is acceptable, but it's not universally accessible and a lot of the older generations tend to have trouble reading. Of course, they can fix this in browsers that allow for zooming. Nevertheless, keeping fonts around the 10-12px range is standard. Larger is, of course, more universally appropriate, however when there's lots of text to display, it can get long and hard to read.

In the 16th century, a common "scale" was developed for font-sizes. This doesn't have to be replicated on the web, however it is also a standard practice. That's why most text software yields a standard set of pre-defined sizes (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72). Using high contrasts between font-sizes (as in a header vs. body text) can create a modern feel and a clear definition of the context of each text.

Capitals

The world doesn't speak in capital letters. Due to the wide variety of letter heights, it's much easier to read lowercase letters. Using capitals removes these heuristics and forces us to spend more time reading a letter or word to process it.

IS THIS SENTENCE EASIER TO READ BECAUSE IT'S IN CAPITALS AND THEREFORE MORE IMPORTANT?

Is this sentence easier to read because it's in lowercase, and while not capitalized, still important?

Colors

We have to consider color because there is a very important difference between the printed medium and the screen: on the screen, pixels of color are built by combing RGB light together. This is known as an additive color system. All colors added together make white, the brightest. Contrarily, on a printed piece of paper, all the pixels of color are absorbing and reflecting light. All colors combined make black and this is called a subtractive color system.



The standard "black-on-white" is ubiquitous, stemming from the days of having only printed text. However, keep in mind that since a white page is different than a white screen, the computer screen emits a lot of light from white backgrounds and not as much from dark backgrounds. And while black text will certainly stand out on a white background, it can be a real strain on the eyes to read for an extended period of time with a bright white screen.

Conclusions

Well anywho, there are obviously a variety of ways to display text on a page. I'd go with a few different scenarios and test them out with people, asking them to give an overall impression. It's likely most people will say "yes" or "no" and give a reason that's hard to explain. This is probably because of all the subtle, unconscious-type things discussed earlier. But that's okay - go with what they like.

---

Other Web Design Posts