Websites can go from good to great just from an improved font profile. The generic choices like Helvetica and Arial have been used so often that most visitors are immune to these bland typeface pairings.
These simple fonts work well for paragraphs and smaller text. But to draw attention you should be pairing up unique fonts for your headers, nav links, buttons, and other related page elements.
In this guide I want to talk about the importance of font pairing in web design and share a few tips+patterns you can follow. There is no specific right or wrong way to do this, but there are some methods that’ll help you improve your design skills a lot quicker.
There are dozens of different styles of font pairings based on the type of website you’re building. For example a generic blog page might use different typography than a web portfolio or social news site.
This is because all of them have different reasons for their font choices. For the Computer World homepage they use big thick lettering for each of the headlines.
These instinctively catch your attention regardless of the descriptive text underneath. This font pairing works well because visitors are naturally drawn to magnetic headlines and typography plays a big role in this process.
Important text needs to stand out more than other parts of the page. A better way to say this is that text should be organized into sections , and some sections will have overarching headers that help break up the reading experience.
How you split up fonts should be decided based on context and goals. For example, take a peek at the Quora question page layout.
Most fonts are the same in regards to typeface, but the fonts are designed differently in weight and size.
Each Quora answer prominently displays with the person’s name and their job title/areas of expertise. This mini byline is much larger than the other text surrounding it, thus giving prominence to each person answering the question.
This typographic pairing makes sense because people want to know this information and expect it to stand out from the person’s written answer.
Understand the context of each page and why certain text blocks should stand out. From there you’ll have an easier time pairing fonts and making typographic design choices.
There’s no denying that content should flow in a hierarchy. How you design this will vary based on your website and there’s no single right answer.
But the way you choose to pair your font styles together will make a world of difference.