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:

  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.

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

Enjoy!

Using SVG’s in web design and development has taken off in the last year or so. For those who don’t know, SVG, or Scalable Vector Graphics, is an image format for vector graphics, much like an Illustrator or EPS file that can be scaled to any size without losing any clarity (as opposed to bitmap pixel based image formats like JPG, GIF, or PNG, which lose their clarity when scaled). They’ve grown in popularity as retina capable devices have become more prevalent, and as web designers have been deluged with more and more devices to design for. They also allow for some advanced visuals, such as animation and multiple colors for just one SVG image. One of the bigger drawbacks at this point is browser support, especially since Internet Explorer 8 is still used.

Icon fonts, on the other hand, have been the go-to resource for web designers for some time now. They are similar to SVG files in that they are also vector based. They do have some drawbacks in that they aren’t as powerful as using an SVG image – namely the ability to easily create complex animations and using multiple colors and gradients.

Here’s a good overview of the advantages and disadvantages of each technique:

Advantages of SVG:

  • Lightweight code, small file sizes that compress well
  • Scalable, and looks great on retina displays
  • Animation
  • Multiple colors are easily achieved
  • Great cross-browser rendering
  • Versatility – Can be file based or placed directly via code

Disadvantages of SVG:

  • Browser support – IE8 doesn’t support SVG, although you can provide a fallback image
  • Displaying SVG images at the smallest of sizes can lose their clarity

Advantages of Icon Fonts:

  • Bundling of icons into a single file for less HTTP requests
  • Scalable, and looks great on retina displays
  • Great browser support (IE8 and above, Chrome, Firefox, Safari, Opera, iOS, Android)
  • Flexibility in color variations by setting solid colors and hover colors in CSS
  • Quick to use for rapid prototyping

Disadvantages of Icon Fonts:

  • Icon fonts can sometimes display slightly differently across browsers (i.e. Firefox may render icons fonts as slightly thicker than other browsers)
  • Font files can grow to be large, adding to page weight, especially if not all fonts are used
  • Opera Mini browser is not currently supported

So where does this leave us? Well, right now, SVG files are especially good for single images, such as logos. We can render a company logo on website using an SVG and provide an image fallback for older browsers that don’t understand SVG (like IE8). (That being said, SVG files can also be combined into a set of font icons or an image sprite fairly easily, too). We’ve even started using SVG on our own site (check out our logo!).

If you need to use a large number of vector images on your site, icon fonts are still a great way to go. For those cases where you want to create animations, you can still use SVG images in conjunction with icon fonts to do what you want.

With Windows XP (which normally runs IE8) becoming unsupported later in 2014, we’ll see more people moving to newer Windows operating systems that support more recent versions of Internet Explorer. With this, worldwide support for SVG images will also increase. By the end of 2014, using SVG images may overtake popularity of using of icon fonts and web designers should have one less browser compatibility to worry about.

Resources for using SVG:

http://css-tricks.com/using-svg/

http://caniuse.com/#search=SVG%20in%20css

http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/

http://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web–vector-20899

Resources for animating SVG:

http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/

http://snapsvg.io/