Web design
|
May 17, 2015

How to pick the nicest font for your site

And pairing your fonts to work well together
There are over 1,000 fonts on Typekit, and another 682 on Google Fonts. Somehow, you have to pick the best for your site—and ensure that they pair well. Where do you even start?

With all the fonts available, it's common to experience decision paralysis then simply default to the same font you've always used out of comfort. But if you want to make your design stand out from the rest of your portfolio’s work, it’s time to finally explore new typography options.

If you take the time to learn the nuanced art of font selection, you’ll forever have a skill that can edge you above other designers. And it’s incredibly easy to learn — that’s the best part.

There are many helpful strategies for choosing beautiful fonts. Equipped with the knowledge below, hundreds of professional web fonts will start making sense to you.

Strategies for choosing fonts

When choosing a font, the ultimate goal is to choose fonts that satisfy the overall intent of your design — not whatever merely “looks the best” ;)

Most of the content consumed on the web is text, and text predominantly conveys the ideas and feelings of a site, so it only makes sense to take a content-first (not an aesthetics-first) approach to typography. When designing sites, it is therefore important to focus on how the content is going to appear on the page, and only then to design around it.

Keep that in mind as we explore the following strategies.

Consider font size

Legibility is crucial — content will always be useless if it is illegible. Text legibility is largely affected by font size, so always test a font at the smallest size it will be used on your site. Be sure to take mobile devices into consideration. That’s where you should always start when testing a font’s suitability. Once you have a suitable “small size,” you can scale up for various headers and the like.

‍The smallest size used for the chosen serif font makes the top navigation hard to read.

Another benefit to ensuring your text isn’t too small is that users with vision impairment appreciate it when you go out of your way to make content particularly legible!

This brings up another dynamic: Some users will want to increase the font size, so consider testing your design at larger sizes as well. If your site looks bad when the font size is manually increased a few points, consider adding more white space to your design.

Consider devices and environments

The content of your website will be read on a variety of devices and under many conditions. It's important to make sure that the chosen font and weight is legible on mobile screens and has clarity and definition across operating systems, including OS X, iOS, and Windows (which all tend to render fonts differently).

It’s also worth nothing that fonts are not rendered equally across browsers, and it is very possible that a font that looks great in one browser might have kerning (letter-spacing) or weight issues in another browser. Test a font's appearance with different browsers and mobile devices. You can use a tool likeBrowserStack to preview how a design looks across the most popular browsers and devices.

Consider the tone of your content

Every font connotes a certain emotional response — whether it's playful, serious, or informative.

‍Kaspersky’s One Dollar Lesson uses a strong Helvetica Neue font to portray a serious tone.

The best way to determine if a font fits the desired response of your content is... get ready for it... to read the content with the chosen font. You simply have to experiment since font appropriateness is less of a science and more of a contextual feel. So, read through your content with the selected font once or twice. Then quickly have a colleague read it as well, and — without giving them any hints — ask them what they think the general tone of the content was. Then, cycle to a different font and reevaluate their response. Do this a few times with the help of others.

You might be surprised at the results: What you believed to be a playful font may actually be interpreted by most people as childish. The key is to sympathize emotionally with the viewer – not to just choose whatever “looks great.”

Bonus! Here’s one of my favorite fonts: Brandon Groteque. A clean, rounded, and interesting sans-seriffont. When I see this font in large, bold sizes, I can't help but think of the Gatsby era.

How to pair fonts

An important aspect of choosing fonts is knowing how different fonts play off each other – because you’ll likely want to have more than just one font on your site. This is a really enjoyable opportunity to get creative as a designer.

While it’s fun to accent a design with various fonts, don’t go overboard by having each section or page in a new font. A font pairing rule to live by is to limit the number of fonts in your design to around two or three to reduce confusion and to present consistency across your design. Don’t tax users’ brains with several busy or new elements; make navigating your site an instinctual breeze.

‍Beagle (www.getbeagle.co) combines a sans-serif font (Avenir) with a serif font (Kepler).

Below are a couple helpful considerations for pairing fonts.

Contrast font styles

Generally, there are four main font styles:

Serif – Times New Roman, Georgia

Sans-serif – Arial, Open Sans, Montserrat

Script – Great Vibes, Indie Flower

Decorative – Wingdings

Pairing fonts of different styles, like a serif for headings and a sans-serif for body text, tend to combine well. It adds richness through differentiation. Not only does pairing fonts open the door for a more expressive creative font palette, carefully choosing a pair of fonts introduces a dynamic between the fonts that can set the emotional tone for the site’s design.

Contrasting font styles of the same family also pair well, such as Museo (serif) and Museo Sans (sans-serif) in the example below. This leads to a more organic differentiation, and is a nice fallback when you don’t want to find entirely separate fonts that pair well together.

‍Kaber Tech (www.kabertech.com) combines Museo (serif) and Museo Sans (sans-serif).

While on the topic of contrast, the simplest way to create contrast between fonts is by having different sizes. Always opt for size differentiation over font differentiation to help maintain aesthetic simplicity. Larger heading text contrasts with smaller body text, which not only helps aesthetically, but it also reinforces their relative importance.

‍Basic Agency (www.basicagency.com) uses contrast between font sizes and weights.

Balance readability between header and body text

A heading is generally a short, infrequent string of words that is meant to attract attention. With headings, using an "interesting" font is more forgivable than using such a font for body text — where legibility is of utmost importance.

The novel font “Vogue Paris” is used sparingly on Skybrud (www.skybrud.dk) for visual appeal. It is paired with a more conservative “Melior” serif font for content.

For body text, it may be tempting to avoid “overused” fonts because they are ubiquitous, and you really want your design to stand out. But, many fonts are common for a good reason: They have already been proven to be effective across a variety of designs and environments. This boils down to the fonts being *simple* from an aesthetic standpoint — e.g. devoid of fancy ligatures and embossings — which means thatthey’re universally easier to read. And as we already learned, legibility is king.

‍Huge, inc. (www.hugeinc.com) keeps it simple with the “Avant Garde Bold” font for the headings, and “Galaxie” for the content.

Simply put, a font with more intricacies in its design will be harder for our brains to interpret at a fast pace, and is therefore less suitable for body text, which may contain complex ideas and thousands of words.Make it as easy as possible on your users to consume your primary content.

Test pairings

It can be tiring to download and test out a range of fonts together, so here are some great resources to quickly visualize potential font pairings:

FontPair — a tool showing a variety of suggested font pairings, allowing for the insertion of custom text for each one.

typeconnection — a typographic dating game. Answer a series of questions to have your optimized pair suggested to you.

Just My Type — a series of suggested font pairings.

Many of the fonts featured on the above sites are available on Google Fonts and Adobe Typekit—many are even completely free to use.

If you’re using our Webflow design interface, it's quite fun to preview Google and Typekit fonts within your site settings: If you see a font on Typekit or Google Fonts, you can 100% use it within Webflow. Booya!

If you’re a visual learner, here’s a quick overview of the typographic styling power we provide designers:

 

Webflow Tutorial for Typography Styling. See more at http://tutorials.webflow.com/

Pretty awesome, right? It’s typically easier to experiment with UI tweaks inside a sitebuilder than it is to do so in code. So, sitebuilers can come in handy here. If you feel like diving in deeper, check out our Tutorials section.

Bonus! Here’s one of my favorite fonts: Garamond Premier Pro Display. A sophisticated, classy, and legible serif perfect for headings.

Wrapping up

As you can see, typography is truly an art – not a science. If you take it seriously and hone your eye, your sites can become more refined, more professional, and simply more readable. Remember: Experiment with fonts and font pairs before suddenly committing to a design, as the chosen fonts will set the tone for the rest of your design.

Here are a few fantastic sources to turn to for help choosing fonts and visualizing your text:

Typewolf

TYPEinspire

Awwwards Picked Typography Sites

Final Bonus! Here’s another one of my favorite fonts: Proxima Nova. This is a very clean and versatile sans-serif font that you have definitely seen before... in fact you’ve been reading it for the past 10 minutes! All of Webflow's blog posts are written using Proxima Nova.

Now it’s your turn: Which are your favorite fonts? Which sites use typography to its maximum potential? We'd love to see your links in the comments!

CC Wood letterpress photo courtesy of Michelle M. F. on Flickr.Bonus font images taken from Adobe Typekit.

Get our top web design content in your inbox
Just like over 400,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
David Khourshid

Pianist and Web Developer, with a passion for Sass and JavaScript. Professional reverse engineer.

Related Articles
Inspiration
Sep 15, 2016
12 inspiring landing page designs that engage and convert
Get inspired by the ways these landing pages use smart design and content to engage and convert visitors.
Announcements
Sep 14, 2016
New feature: Responsive images
Webflow now automatically scales and optimizes inline images for every device, at every resolution. Find out why — and how — we did it.
Tutorials
Aug 18, 2016
The art of progressive disclosure in web design
Find out how to use progressive disclosure techniques in your website designs — and build an accordion menu of your own.
What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Trusted by design teams everywhere
© 2016, Webflow, Inc. All Rights Reserved.
Get our top web design content in your inbox
Just like over 400,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.