Web typography has come a long way since the days of IE 1.0. Today, we have an abundant library of type faces to choose from that give us the opportunity to elevate the design of the web through the use of great typography.

First, I’d like to note that because the content of sites varies dramatically, it’s impossible for me to tell you what type faces are appropriate for your site. Therefore, I’d like to offer four simple guidelines to follow, regardless of the type face, that will up your web typography game.

 

Contrast

Maybe the most important thing to consider is contrast.  Although fluorescent pink on a dark blue background might look cool on the poster you’re designing, it’s not the most pleasant to read on the web. Stick to high contrast color choices, and when possible, avoid long blocks of reversed text.

contrast

 

Size

For the sake of your readers, make sure your type is large enough to be read easily and doesn’t hinder their experience. Remember that readers are different ages, reading content on different devices, and don’t sit with their nose pressed against the screen. And make sure you take mobile into consideration, too. As a general, rule, 14pt is a nice minimum to work from. What you’re reading right now, is 16pt. Click on the image below to see what 10pt and 12pt type looks like. Not great. Avoid.

typesize

 

Hierarchy

Varying type size is one of the easiest and best ways to differentiate your content. It’s the simplest way to provide structure for your readers, allowing them to find what they need quickly and effectively.

hierarchy

 

White Space

The negative space between elements on the page, although “invisible” is easily as important as the “stuff” on the page. By allowing your content to breathe, and not filling every inch of your page with more and more things, you place emphasis on the important elements/content.

This applies to the text on the page, too. Make sure you use your CSS line-height property on all of your copy. Most type books and resources call for a line-height (leading) of at least 140% of your type size. So, for a 20pt type, you’d want a 28pt line-height. Although headlines and more prominent elements can violate this rule, it’s a good place to start.

whitespace