Design Tools: Web Typography (aka fonts)

If we were type I could kern U and I closer together.

It’s no secret I love fonts.

I am kind of required to love them as a designer, but you should too. Typography does more to communicate your content than any other design element. With the growing popularity of responsive web design, the visual trend is becoming more and more minimal—less dependent on heavy graphics, and more dependent on typography to convey voice and tone. In fact, it is possible to create a beautiful and compelling experience with no images or graphics at all—typography is that powerful. It is not dependent on resolution, especially important in this day of retina displays.

Fonts that are hinted well, have proper spacing, and have a good balance of positive/negative space make your content legible and encourage the user to keep reading. Typefaces that have multiple weights and styles, paired with other typefaces, create a powerful hierarchy of information.

As any designer will tell you, and as you most likely understand yourself, typography is an integral part of your company’s brand. Your company most likely has a brand guide, illustrating which fonts to use and when, so that in your print work, your company can be represented consistently and effectively.

So why are you not doing the same thing on the web?

Before most browsers supported font-embedding in 2010, web designers were limited to system fonts. The problem there lies in the fact that most system fonts are limited, overexposed, and just not very good. The designer’s answer to this was to put their typographic design into jpegs and, as an afterthought, add the content as alt text. It is pretty well understood these days that to have a successful website, your content must be searchable and accessible, it is no longer a real option to put type in images. Other solutions, such as adding fonts through Flash, had their own drawbacks in addition to still not being accessible.

Now, thanks to @font-face, the web is rich with clean sans-serifs, graceful scripts, and conservative serifs. Many fonts are available for free from Google Web Fonts API and Font Squirrel. However, I recommend using a type service such as Typekit (among others). As I said above, having a variance of weights and styles for one typeface is invaluable—allowing you to create a strong hierarchy without using multiple fonts, resulting in a cleaner visual experience.

Museo Screenshot

Different weights of Museo Slab

Many free fonts do not have a large number of weights and are limiting to your content design. In addition, type services generally have a very large, and ever growing, selection of typefaces. This allows you or your designer to find a font that best works for your brand knowing you have greater flexibility with styles and weights. You can also take comfort in knowing you are using a font that is meant for the web and that you are licensed to use.

A handy tool is the Whatfont: it allows you to inspect fonts you see online.

WhatFont Screenshot

WhatFont allows you to find out the font size, weight, line height, color, and if available, the type service used.

I encourage you to use this tool to check out some sites that use a type service:

Fonts can make or break your web design, and your brand as an extension. Having good typography as part of your web presence is now not just possible, but a necessity.

Further Reading:

A font walks into a bar. The bartender says “Hey, we don’t serve your type here.” and he called the Serif.

What’s your favorite site or tool for fonts?

Categories: Design and Information Architecture | Tags: | Bookmark the permalink.
Sarah Mills

About Sarah Mills

Sarah brings more than 12 years of design experience to her position as Web Designer with the Matrix team. She has a background in design, branding, and social media strategy, as well as illustration; she also stays active in the design community, keeping up with trends and new solutions.

1 thought on “Design Tools: Web Typography (aka fonts)

  1. Holy cow, that’s a lot of info! I have to open this up at home and dig through it there, where I’ll have a mug of cocoa and plenty of time!

Comments are closed.