Learning Lessons in Typography

When I design websites for clients, I consider typography to be a very important part of the process. Typography communicates style and messaging. It gives the reader a sense of your seriousness; (or unseriousness) it is the visual representation of your voice. Typography also contributes to readers reading your content or leaving quickly. If you asked the average person what turned them off about a site, they might not even be able to put their finger on it exactly. They’ll say “it was just….something about the site I didn’t like” or maybe “the site was just too hard to read.” Whether they can pinpoint the reason or not really doesn’t matter, if people are leaving your site too quickly, typography is one place you can look.

Typeface & Font

While there are few hard and fast rules on typography, there is no shortage of research and opinion based interpretation of said research on the web. Even so, we can find some general consensus as to things you should avoid which will improve the delivery of your message.  In my opinion, the main thing to keep in mind when designing the typography of a site is readability. Many interpretations of existing research, no matter what words they use to explain it, all point to one general “rule”. Whatever typeface you select in designing your typography, it must be readable by a wide audience.
Readability isn’t just the typeface you select though. The line spacing, boldness and weight, and size, (the font) all play into the readability of your content. You might love a certain typeface, but once in use, you find there is not a good combination of these things that make your content stand out or communicate a message the way you want. When designing this site, I found a typeface I absolutely fell in love with, but alas, as I tried it out, it just didn’t work in weight or size in the places I wanted to use it. Ultimately I found another typeface I liked just as well, but I will keep looking for that perfect website where I can use Genome!

Combinations

The way you combine more than one typeface is also important. You have to make sure you are choosing two or more typeface combinations and fonts that compliment each other. You don’t want your body text to exude seriousness and you headlines to scream “We’re just playing around!” or vise versa. Whatever the message you are sending, it needs to be consistent. You certainly don’t have to have a Master’s in Graphics or Typography (is that a thing??) but you do want to keep a few things in mind:

  1. Look at your typefaces-are they similar in height and width? This is a good place to start. If one is very narrow and one is very wide, this will throw off the reader’s eye.
  2. Mix serif and sans serif-if you’re not sure, this is a good way to avoid arguments between typefaces. This is a general rule and one we break all the time these days, but for the unsure, it’s a good bet.
  3. Use one typeface and mix font styles-this can be a little boring, but most of the time it won’t turn people off. You can use larger, bolder fonts for headings, italics and bolding for attention and regular for body text.

When talking about different combinations, I feel I have to warn you: if feel adventurous, that’s great, but be prepared to spend hours looking through multiple combinations. It happens to me all the time 🙂

Site Colors

Here I am not really referring to the color of your typeface, although this is also very important, but to the colors you are using on the site itself. More than one time I’ve found that a background color has a big impact on what typeface and font I choose. That was part of the problem with the Genome typeface I wanted to use. It’s a great looking typeface, but when paired with my font color and the background color of much of my site, it just didn’t work. I could have tried making it bigger or bolder or on and on and on, but I knew there would be another typeface in a proper font that would suit my needs. The takeaways here are: make sure no matter how much you love a font it works with your website design and just because a typeface in a particular font looks great before you start, doesn’t mean it will continue to be awesome when in use. I think changing the design of the entire site to suit a font is a bad choice. With the plethora of typefaces and fonts out there today, you are sure to find something you like just as well, that suits your voice and your message!

We have talked about the top three things I consider when choosing typeface and fonts as part of my overall typography in website design. The final thought I will leave you with is this: the most important tool you have when designing your typography is your gut. If you’ve read all the suggestions out there and combined your typeface and font according to the “not rules” and you’re still not happy, go with what you like! There is something to be said for your gut instinct and if what is supposed to work isn’t working for you, try something you like. Just make sure it’s easy to read!

Leave a Reply