The Importance of Typography in Web Design

Typography is everywhere. We scroll through it on social media apps, click on ads, flip through magazines, and make buying decisions influenced by packaging. In all of these examples, each design was chosen with high intent.

It’s an important part of the graphic design process that helps brands build recognition and increase user experience; it should be no surprise that the importance of typography in web design is paramount.

Say you’re getting ready to launch your streetwear brand’s website; after spending so much time and effort on writing optimized, high-quality copy, it’s time to look into the delivery of that copy. Essentially, you want to think of your typography not as what you say, but how you say it.

Your choice of typography should reflect your brand and your mission while offering your audience an outstanding first impression.

In this blog post, we’ll go over everything you need to know in order to make an informed decision when choosing the typography for your next design project.

Key Terms

Before we get started, there are a few terms we should be familiar with:

  • Typeface: A typeface is the name of a particular collection of fonts.
  • Font: A font refers to the weight, style and size used.
  • Font Family: A font family is a set of fonts that shares a common design. This is most commonly seen within the same typeface.

Familiarizing yourself with this information will make the next parts, which are more technical, much easier to digest.

Types of Font: Serif Fonts vs Sans Serif Fonts

Most fonts can be split up into two main categories: serif and sans serif.

| Aa
You can identify serif fonts by—well—their serifs, AKA those decorative strokes that finish off a letter. Serif fonts are great for printed work as the serifs act as a connection between letters, offering an easy reading experience. Serif fonts are distinguished and bring a certain level of elegance and formality.
| OffWhite Serif

Let’s take your streetwear brand into consideration again: if your aesthetic is modern and informal, a serif font may not be the best choice to represent your brand. However, if your brand leans more towards luxury (like Off White), this could work in your favor.

Sans serif fonts do not have these strokes on the letters, making it the preferred choice for digital reading. Sans serif font types can be seen as more modern, and maybe informal, but offer an overall clean, minimalistic reading experience.

Stüssy’s copy design is a bold choice that presents a stark contrast to the brand’s flourishing logo.

| Screen Shot 2020 09 10 at 9.29.20 AM
Keeping these points in mind, let’s dive deeper into how you should always keep your brand’s aesthetic in mind while considering kinds of typefaces.

Choice of Typography

When choosing a typographical design for your website, you’ll want to consider two main things: your branding, and legibility.

Branding

As we’ve said before, your typographical choices are acting representatives of your brand, so you’ll want to pay attention to your copy design. A good place to start would be looking at your logo, especially if it utilizes typography. Let’s take a look at some streetwear brands with typography as their logo:
| Screen Shot 2020 09 10 at 10.28.16 AM

Infantry Collective uses a block lettering in its logo, giving off a rugged, tough-yet-straightforward vibe to its audience.

NTVS utilizes a mix of typefaces in its logo, which showcases a clean, modern twist on a classic, old school style.

| Screen Shot 2020 09 10 at 2.23.27 PM

Now that we’ve looked into how typography in your logo can affect your brand’s overall vibe, let’s look into how to use your typographical logo as a starting point for the rest of your site’s copy design.

Bricks & Wood does a beautiful job with this:

| Screen Shot 2020 09 10 at 10.42.28 AM

The logo, an italicized serif font, is echoed in their blog post’s image. While it may not be the same exact font, it’s remarkably close, but not too repetitive due to it not being italicized or in all caps.

This site is also a great example of how serif and sans serif fonts can create harmony—adding texture and interest for the site visitor.

Legibility

As we already know, legibility is key for web experience, and with your copy design, you have a lot of room to play around. Changing up font sizes, style, type and even color could help make your site easier to read and more aesthetically pleasing.

Mobilize presents a great example for legibility:

| Screen Shot 2020 09 10 at 10.57.18 AM

First of all, the text really pops against the turquoise background. It’s a vibrant and colorful alternative to the classic black-and-white combo. The font size is readable but doesn’t take up too much space, and its typeface choice is clear and easy on the eyes.

On the other hand, there are some elements that aren’t as legible as the aforementioned. The black “Shop” and “Orange Shirt Day 2020” buttons aren’t as easy-to-read due to the typeface and color choice. However, stylistically, these buttons work, as the coral color can be seen in the photo and the typeface echoes back to the Cree symbols in the brand’s logo.

With these points in mind, let’s move on to how to make sure a collection of fonts will work well together on your site.

How to Pair Fonts

Here are a few helpful tips (with examples) on finding the right font pairs for your site:

Limit the total number of fonts

Rule of thumb: try to stick to around three fonts. This will keep your page from looking too busy.

| Screen Shot 2020 09 10 at 12.54.51 PM

As you can see, there’s a lot happening on this page, and with so many fonts to look at, it’s difficult to get a read on what the brand is trying to tell us. The pixellated typeface completely clashes with the flourishing script used for the paragraph.

Basically, what your site visitor is left with is a lot of mixed messages—which will work against you when it comes to brand recognition.

Avoid using fonts that are too similar

On the other hand, you’ll want to avoid matching fonts as well.

Using fonts that are too similar to each other isn’t the greatest design sin you could make, it’s just really uninteresting.

| Screen Shot 2020 09 10 at 12.54.35 PM

While neither font is a terrible choice, the pairing is lackluster and pretty boring.

| Screen Shot 2020 09 10 at 11.54.31 AM

However, if you want to use similar fonts, there is a way to execute this successfully.

Although The Hundreds’ site uses somewhat similar fonts, the brand’s use of bold fonts, different sizes and all caps keeps it interesting while fitting the site’s aesthetic.

Utilize decisive contrast

Contrast can occur with typefaces as well as font families. Take a look at how Bella Doña pairs its fonts: 

While the font they use for their headline and their tabs is more decorative and ornate, the brand uses a simple sans serif typeface for its more detailed copy. It also bolds that sans serif typeface for item names and uses a regular style for the prices.

| Screen Shot 2020 09 10 at 11.34.30 AM

These examples of contrast keep the visitor’s viewing experience interesting and readable while still communicating the brand’s style.

Helpful Tools and Sites

Hopefully, this quick rundown on the importance of typography has helped you out! Before you go, here are a few helpful tools and sites for you to bookmark for your next project:

Sign up for our Newsletter