Typography on the Web

Posted by: Josh Walsh in Design.

Typography is fundamental to clean design, and paramount to content. Bad typography will drive users away from your content, while good typography will keep things legible and draw your readers eye to important sections. Your content should be easy to skim for those in a rush, and also easy to read more deeply.

Typography on the web should stem from print media. People are used to reading newspapers, paperbacks, and other paper documents. Study these and keep your web pages consistent with these.

That being said, here are a few tips to keep your typography up to par:

Typography Tips

Keep typography consistent across your website.

Your typography should be invisible; that is, your reader should not notice your great use of typography.

Use 1 or 2 standard fonts. I prefer to use different fonts for the page headline’s versus the body content. (I personally like to use a serif font for one, and a sans-serif font for the other.)

Contrast

Use dark fonts on light background. There should be significant contrast between the background and the text, but it is very common to have too much contrast. Black text (#000) on a white background (#fff) is too contrasting for my taste. It’s hard to read. I prefer darkening the background or lightening the text subtly. Newspapers do the same thing by printing on newsprint which is more of an off-white.

Spacing

Keep your line lengths to around 60 characters. This keeps the eye from getting fatigued from scrolling horizontally too much. Due to the flexibility of print on the web, this isn’t an exact science, just try and keep them reasonably close to the recommended length.

Traditional typography rules say the space between your lines of text should be half-again as tall as your font. (line-height: 1.5em). I follow this rule because it’s familiar and comfortable to most readers I’ve talked to as well.