happy little biz

The importance of good typography

When designing a website, we tend to focus on a variety of elements that are important to the end result. Colors. Spacing. Media elements (such as pictures and videos). Styling of buttons and menus. Interactive effects such as css transitions and/or animations. Responsive design.

But the element we often don't look at seriously?


i love typography (image thanks to the creative folks at Liquid Bubble)

It's not uncommon for folks to design a site and set the font for everything to be Helvetica, simply because it feels safe and easy.

But is that really doing your website proper justice?

See, typography is as important a visual element as everything else you put into the site. In fact, I would say it is one of the most important elements of the site. It's more than just figuring out what font looks good at various screen sizes, or building a font stack that will work on any device. We need to look at those things, but there is so much more to good typography.

I'm no expert in typography... after all, the font I chose for headings for this blog I picked because of its name (Nixie One). That said, typography is something I really love about web design; a good typeface can really make or break a site!

Here's some food for thought from some of the experts.

"To paraphrase Stephen Coles, the term readability doesn't ask simply “Can you read it?” but “Do you want to read it?" - Jason Santa Maria in On Web Typography

It's one thing to say that a typeface is legible and clean, even on a small screen. But it's quite another to choose something that is all but invisible. If you've chosen the right typeface, the reader shouldn't even notice it; they'll be absorbed in what they're reading instead.

"Type is the voice of your words" - Jason Pamental (author of Responsive Typography)

Words have meaning, but a typeface conveys emotion. Think about daily interactions between people - you can say the same words in different ways, and each way has a different undertone, different feeling. With type, we can do exactly the same thing. For example:

I love you, in Helvetica


I love you, in a much more decorative, italic font

(examples thanks to Jason Pamental's talk at Web Unleashed Toronto 2014).

In other words, the typeface you choose should match the message. Something appropriate for a medical supply company may not be appropriate for a theatre troupe, and something used to advertise a dance party is probably not what you'll want to use to advertise a new banking service.

"...consider the design intent of the typeface ... If a typeface was designed for signage, like Cooper Black, it probably isn’t going to work well set as the body copy of a book. " - Smashing Magazine

This is an extremely important point and an error I am prone to making myself. It can be fun to experiment with your typeface and go with what looks the most 'funky' - especially if you are designing something for someone who likes things to be bold and unique. But you're doing your client a disservice if you choose something that takes away from the functionality of the site. It might seem great if someone takes a glance at the site and says it seems fun, funky, creative, avant garde, or whatever feel you were going for. But if they follow up that statement with "... but I didn't really read any of the text", you know you likely have a problem.

How do you prevent this? Well, sometimes it's obvious: If the typeface is really decorative, it's not going to work for your document body. But if you're unsure, almost any typeface you could possibly choose will have something written about its history and intended purpose online. So a little bit of research can go a long way.

"When selecting a font for a web-based project, we need to consider how much energy needs to be consumed in order to load that font." -Mightybytes

As developers it is part of our job to make sure a website loads in a reasonable amount of time. There are dozens of things you can do to improve load time, and perhaps I will get into those in another blog post! But one of those items is making sure you aren't loading more web fonts than you actually need. This isn't just making sure you choose a reasonable number of individual typefaces, but also that you don't load any fonts you don't actually need. For example, if you aren't using anything but the 400 font-weight, there isn't a reason to load others.

"The Flash of Unstyled Text is a phenomenon ... that few web designers are fond of." - Paul Irish

Ah FOUT (Flash of Unstyled Text). This can happen when you're using web fonts, such as Google Fonts, and the text on your page loads before the font style you've chosen does. The text then displays, for a brief moment, in a different font in your font stack. There are a variety of ways you can deal with this issue, which I won't get into here, but it's something to be aware of.

Fellow typography lovers out there: any tips you'd like to share?