Myriad

Resources

De-mystifying digital marketing, one article at a time.

Just My Type(ography) | Why Website Fonts Matter

It could be our inner word nerds speaking, but we believe your graphic design is only as good as your typography. And we’re not alone.

According to multiple sources, typography (or the style and appearance of words) is about more than just a pretty (type) face. This subset of design actually possesses the ability to influence behavior. 

In 2012, The New York Times performed a study titled, “Are You an Optimist or a Pessimist?” to see how people would respond when asked about a hypothetical catastrophic event. The subjects were presented with an end-of-days scenario and then asked a series of questions that would indicate whether they were more positive- or negative-minded.

At least, this was the supposed purpose of the survey. 

Behind the scenes, another study was at play. The group of over 45,000 participants was actually broken down into six subgroups—with each subgroup receiving a version of the survey that was typed in a different font. The researchers at the NYT wanted to know if different fonts would spark different responses to the questionnaire. 

And they did. 

Granted, the overall effect was about a 1% to 2% difference in behavior, depending on the font. But from this data, we learned something very important in the era of mass content consumption: Our website fonts make a difference. 

Find Your Type and Send a Message

A good website is all about communication. And typography is the package in which we present our important information. Truthfully, there’s no limit to what the right typography can do for your website. But here are a few of the noteworthy objectives we think you should be aware of.

Used Wisely, Typography Can . . . 

1. Tell Us What’s Important

Notice how, in this very article, there is a range of titles in different colors and font sizes? Now, at a glance, could you tell us which title we believe is most important? (Hint: It’s the biggest and boldest of the bunch.)

In this way, typography can help to establish the hierarchy of information on a webpage. Research tells us that the average internet user spends less than six seconds on a page’s written content. By establishing a hierarchy through font size and color, you can ensure that those six seconds are well spent. Or, at the very least, that the reader gets the introductory information you want them to. 

Here are a few tips for establishing your hierarchy:

  • Write your main body text in one cohesive font.
  • Put your most important headings in bold (or a larger font size).
  • Put your most important subheadings in a different color so they stand out.
  • Use more space around the headings that are most important.

In other words, keep things cohesive but play with the font, sizing, emphasis, and color of your words to highlight any important headings/subheadings. 

2. Establish Consistency

For those of us who are a little eccentric and eclectic, there might be a temptation to go all-in on website fonts. But most graphic design experts will recommend that you stick to around two or three fonts max per webpage. Remember, most viewers will be in and out of a webpage in no time at all. So you want to make the experience as seamless as possible.

Using too many fonts overstimulates the senses and creates a fight for attention. One font type is typically just fine. But if you want to switch things up a little, be sure to check that the ones you use are cohesive and complement each other. 

Remember, the point of good typography is to attract the reader to your content, not wow them with your creativity or uniqueness. For that reason, a standard font like Arial, Verdana, or even Times New Roman is more than okay. Better to play it safe than risk overwhelming your readers!

3. Make Your Content More Accessible

What’s black and white and read all over? Your website. (Hopefully)

Elementary school jokes aside… if your website is not readable, it’s not really anything. You want your hard-earned content to go to good use, so you make sure it’s readable. And you do that with typography. 

This comes down to several key details, including:

  • Contrast, or how the color of your font plays against the background-color
  • Line height, or the space in between each line of text
  • Letter spacing, or the space between letters
  • Line length, or the number of words on each line

These details may seem minor and inconsequential, but they make a big impact in terms of readability. For example, black on white is much, much easier to read than blue on purple. Protect your poor readers’ eyes and keep things simple, readable, and user-friendly. 

If you are interested in diving deeper into website accessibility, check out these tips for getting started. You’ll find ways to improve your website writing, design, and development so it’s more accessible for every visitor. 

4. Build Your Brand

Simple doesn’t have to mean boring. With a few smart choices, you can showcase your business’s personality through your website’s typography. For example:

Serif fonts convey class, respectability, and trustworthiness.

Sans serif fonts are clear, direct, and no-nonsense.

Script fonts convey elegance, creativity, and femininity.

Modern fonts are contemporary and easy to read.

There is actually quite a bit of psychology that comes into play when you’re considering what fonts work best for your brand.

Give the decision some time so that you can consider all of your options. It may even help to take a look at what your competitors are doing. If all else fails, we recommend that you fall back on something timeless and easy to read.

Bonus Section: Actionable Tips You Can Write Home About

You know we can’t let you go without sending a few actionable tips your way first. If you’re looking for some concrete guidance to get you started, here it is:

Tip #1: Test for a Responsive Website

Listen, we know that there is a lot that goes into your website design. Typography is just one piece of the proverbial puzzle. But before you sign off on a design, be sure to check it across multiple devices and browsers to make sure your website stays responsive. 

Sometimes, font size, line height, and other details will work for mobile but look terrible on a desktop. The same could hold true about the difference between what users see on Mozilla vs. Google. Check out this infographic to get a visual of what we’re talking about:

Fortunately, you can ensure your design is compatible across devices and browsers with the help of any number of online tools. 

Tip #2: Make Your Content Skimmable

When it comes to keeping a webpage skimmable, the words, sentences, and paragraphs you write matter. But there are also several design and typographical elements that may make or break your skimmability. To keep the content flowing, we recommend that you:

  • AVOID WRITING IN ALL CAPS.
  • Limit your line length to between 40 and 60 characters.
  • Avoid using animated text.
  • Choose a font that clearly distinguishes between upper and lower case “i” and “L”.

Again, these are simple but powerful ways to make your content accessible and easy to read.

Tip #3: Fall Back On These Go-To Fonts

If you’re overwhelmed by the idea of picking a font that is cohesive, accessible, and full of personality, we get it. Choosing the perfect font can sometimes be a tall order. If you need a little inspiration, check out this list of our favorite go-to fonts:

  • Helvetica
  • Lato
  • Merriweather
  • Montserrat
  • Nunito
  • Open Sans
  • Oswald
  • Playfair Display
  • Poppins
  • Roboto

In our opinion, you can’t go wrong when you choose a font from the list above. And if you’re feeling especially creative, you might try pairing some of these for a combo that is totally unique to your brand!

Share this article

Did you find this article useful? Share it up!