What the Font? Why Your Website’s Typography May be More Important Than Its Images

Fonts matter, just like color, it can set the tone from the beginning. Let’s take a look at one of the most classic examples:

Which note would you rather find on your kitchen table in the middle of the night?

Sure, this is a bit of an extreme example, but it still illustrates the point that font is a crucial form of communication.

Building a website is a lot like building a house, especially in today’s paint-by-numbers landscape. A good website, like a house, is only as strong as it’s foundation. But the truth is that everything matters, down to the windows and walls, and on a website, font’s and images.

One often overlooked but very important element is your typography: the font(s) you choose, how many you use, the size and the style, and more. What you do with those fonts tells people who view your website a whole lot more than you think.

Sometimes it’s difficult to choose the right font, other times it’s difficult to settle on just one. I have been handed many website scopes that use a minimum of 6 fonts. People tend to think they should use a different font for each different style or headline.  But using too many fonts can be catastrophic to your message. A good rule of thumb is to use between 2-4 typefaces in your web design. Too many typefaces will distract the visitor and ultimately keep them from concentrating on anything. Minutes after visiting your website, eyes landing on nothing of importance, the visitor will say “Wait, what was I doing? Oh! That’s right, Googling Best Pizza in Chicago!” They will then leave your site, with no impression of it in their mind, more than likely to never visit it again. We don’t want your message to get lost because the fonts add to a confusing and cluttered site. This can send the wrong message. Visit any one of the top 50 visited websites and you’ll notice a that they only have 2 different font families on average.

Your font hierarchy can establish your message hierarchy. You may not know this but there is a reason each font is set to a specific size and color, and it’s not just based on, “well, that looks nice.” Web developers will define your content’s hierarchy in those two ways: Size and Color.

Your H1 Tag, or your “Headline 1”, is typically the largest font as it tends to be most attractive to they eye. Followed by your H2, H3, etc… We use these sizes to make sure your visitors read your message starting with the most important one.

And when we talk color, we all know the importance of it. It’s no longer a well-kept design secret that color can dictate feelings and moods. Therefore, we utilize the right touch of color to certain typeface elements to emphasize them and allow them to draw the eye amongst what can often be a boring paragraph of black text. See here:

Recent example of a good balance and message hierarchy

The use of Serif typefaces should be sparse, especially in digital. What’s a Serif? Let’s just call it the “fancy fonts”. Serif fonts are often over-used in the financial industry given the distinguished look and feel they represent. I would confidently guess that 99% of the logos I have worked with in this industry are done in a Serif typeface. And that’s okay, but here’s what’s wrong with it. A serif is a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol within a particular font or family of fonts. Think “Times New Roman” or “Bakersville”. Serif fonts can become distracting and difficult to read, especially in smaller sizes or on mobile devices.

Interestingly enough, it’s the complete opposite for print. Pick up almost any book and it will be printed in a serif font. This is because serifs can cause a more even color, effectively lowering the contrast, thus giving a much smoother reading experience. It is said that when one book is in Arial and another in Times New Roman, the readers eyes will tire quicker with Arial. However, Sans Serif typefaces tend to work better in digital and screens because rasterized sans-serif typefaces can, in principle, use the given space more efficiently due to the pixelated, square, and rectangular textures of a screen. In addition, San Serifs are given more horizontal space to work with, so be sure to have a good balance. My typical rule of thumb is if you must use a Serif font, only use it in groups of text that do not exceed three sentences. A perfect example of this would be Rolex. Their company logo is Garamond, a Serif font, but you will not find one use of a Serif font on their website, except the logo.

Rolex.com

There are many other typefaces related characteristics to consider but one more I feel is most important is kerning (or letter spacing). In just one image I can show you how a household, billion-dollar global company learned the importance of kerning. Ready?

Kerning is the is the spacing between individual letters or characters and is one of the most important elements you need to consider when choosing a typeface. Your Kerning needs to be considered not only at a normal, legible size but always when displayed on smaller screens like an apple watch. In design, there are two types of center alignment. There is true center and then there is the visual center. True center is the exact point where two items align. Visual center is the perceived center. This can apply to typefaces as well. See this example of the word “Type” in a Serif font:

So remember, just because a font looks cool or elegant doesn’t necessarily mean it’s a good font for you to use or that it sends the right message. Often times we spend hours sifting through our font book trying to decide on what the best font to use is. And we have learned that  when it comes to websites, less is more. And the old rules still stand: stay away from Papyrus and Comic Sans. Please.

As a reminder of the communicative power of fonts, read these two phrases and notice which one inspires more trust: