Typography and the Web: Brief Guidelines for Type on the Web

Ever come across a site that has a different font for every type of information? It’s a little disconcerting, and will more than likely turn potential users away, typically because the site is hard to read and navigate quickly. It’s sites like this that prove typography is taken for granted when used on the web. Typography is a powerful tool that can be used to enhance not only a design but also the user experience, for both print and the web. I don’t mean to scare you by saying typography can make or break a site, but it does have an impact. Now the topic of typography and the web is quite vast, so I certainly won’t try to cover everything. However, I do want to discuss some important things to remember when planning and developing typography for a website, as well as cover some useful resources to help you actually implement your own typography on the web.

Planning & Background

First thing’s first. When designing and developing for the web it’s always important to have a plan of some sort, whether it be a 20 page document complete with mockups of every screen imaginable or just some rough sketches with a list of resources, tools, and approaches. When making this plan, or more specifically this design, there are certain typographic decisions or factors that you should account for, before you start developing.

Legibility & Readability

Legibility and readability of a site are both important factors that determine how well a user can read and navigate a site. Legibility is the ability to distinguish letters in a typeface. Readability is the ability to distinguish words or phrases in a typeface. In other words, legibility is the ability to notice the minute, such as letters, and readability is the ability to see the bigger picture, what the letters create. It’s important, especially with large bodies of text, that the readability and legibility are suitable for readers. If a user has a hard time trying to find the information they’re looking for because the readability (or even legibility) of the site is poor, they’ll give up after a few seconds.

Typography for Design

From a design standpoint, depending on the use and goal of the typeface, these may not matter as much. Typography can be used in placed of graphics, or to create a unique aesthetic (see example at the top of this post). Some websites are solely composed of typography. No images in site, pardon the pun. Typography is in no way meant to stifle creativity, but can actually be used to enhance it. In fact, typography can be used as a library of icons (i.e. Bootstrap’s Glyphicons).

It is important to remember that though typography is cable of creativity, in terms of body copy, legibility and readability should take precedence, so be sure to keep them in mind when choosing a typeface for large bodies of text.

5 Do’s & Don’ts to Typography on the Web

While making these decisions based on the factors above, there are still a couple of general guidelines to follow when implementing typography on the web. Granted there are plenty more where these came from, but I’ve highlighted the first 5 that came to mind. You’ll likely notice that quite a few relate to legibility and/or readability.

1. Don’t use more than 3 typefaces
2. Don’t make text too small
3. Do make sure there is a good amount of line-height
4. Do make sure there is a good amount of contrast between text and the background
5. Don’t overuse all caps (IT MAKES IT LOOK LIKE YOU’RE SHOUTING, and makes it harder to read.)

Brief How-To for Using WebFonts

Now for the good stuff.

1. Find a Webfont
   Keeping the above guidelines in mind, you should find a typeface(s) and download it’s webfont package. This is a bundle of font files for a single font or font family that is composed of .ttf, .woff, .eot, and .svg files. You will need all of these for optimal cross-browser compatibility. If a browser doesn’t support a file, it will use the next supported format. Some good free tools and font vendors include:

    

   • Font Squirrel
   • Font Squirrel’s Font Generator – Granted you can only use this with fonts that are licensed for use on the web, so always be sure to do your research before choosing a font and using this tool.
   • Font Space
   • Google WebFonts
2. Add @font-face
   Next, add the CSS3 @font-face block to the top of your main stylesheet. The following is an example of what this will look like. Please keep in mind that there are several ways you could format this code, the following is just an example of how I do it.

    

   

   In case you were wondering, the second line for .eot containing ?#iefix, is for older versions of Internet Explorer (IE).

3. Reference the Font in the CSS
   The last part is easy, simply reference the name you gave your font at the top of your stylesheet, like so:

    

   

When you run your site, you should now see your chosen fonts, instead of whatever the default fonts. I recommend that you still set your backup selections (see example above), just in case the files don’t load for whatever reason.

Additional Resources

To wrap things up, here are a few additional resources on the topics discussed in this post, along with a few additional typography-related links for inspiration.

• Do’s and Don’ts of Typography by WebDesignerDepot.com
• WhatTheFont
• The Webfont Combinator
• The Elements of Typographic Style Applied to the Web
• I Love Typography
• Typesites
• Typographic Design Patterns and Current Practices by Smashing Magazine
• Style Tiles
• Best Examples of Typography in Web Design
• 21 Inspiring Examples of Typography in Web Design

If you want to get really fancy, here are some cool jQuery scripts to help you further you web typography:

• FitText
• Lettering.js

Enjoy!