Typography on the Modern Web

Today we’re talking website typography starting with font size.

Font Size

This blog post is rendered using the browsers default font size, which for most people is 16 pixels. This is the typical font size we use when designing websites. The only time we use different font sizes is for titles or less important text. On this page, if you look at the author link or the tags associated with this post that font is 14 pixels, it is not as important and does not carry the same weight as the content of this blog post. However, the title for this post is much larger at 32 pixels as it’s more important and carries a heavier weight than the body copy.

White Space

The other thing you’ll notice about this post and the page, in general, is the use of white space. The lines of text are easier to read when they are given room to breathe. This is why books and newspapers have margins of empty white space, it gives your eye a chance to break and reset to the next line. Jamming text together in wide paragraphs with no white space is uncomfortable for the user to read. We shoot for layouts with no more than 50 – 80 characters per line of copy. We also adjust the line height of paragraphs to 140% – 165%, and headlines 110% – 125%, of the font size for readability and making rows of text easier to navigate.

Color and Contrast

You might notice that the text you’re reading right now is not black. We use medium-dark grays because it provides a softer feel and improves readability with small type, while headlines can be slightly darker. Ian Storm Taylor wrote a great article on the use of black:

“Problem is, we see dark things and assume they are black things. When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.”

Live vs. Graphical Text

Finally, I want to talk really quickly about using live text vs. text in graphics. Many years ago we were stuck using web-safe fonts, which left typography on the web a little dull. Although Internet Explorer has offered font embedding since 5.5, it didn’t become a standard until CSS2. Since then, many services have popped up that allow us to embed fonts on the web. We really like Google Web Fonts, which offers a decent sized library of fonts for free. There are also subscription-based alternatives, such as TypeKit, that offer much larger font collections.

With these services, and the ability to host licensed fonts locally, we are able to move away from turning text into graphics to use specific fonts. This is a great step forward as graphical text impedes the ability for search engines to properly index your website and makes management of your content more difficult.

Be sure to check out Tommi Kaikkonen’s awesome Interactive Guide to Blog Typography.