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.
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.
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.
Choice of TypographyWhen choosing a typographical design for your website, you’ll want to consider two main things: your branding, and legibility.
BrandingAs 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:
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:
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.
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:
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.
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.
While neither font is a terrible choice, the pairing is lackluster and pretty boring.
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.
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: