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.
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.
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.
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.
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.
Every font connotes a certain emotional response — whether it's playful, serious, or informative.
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.
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.
Below are a couple helpful considerations for pairing fonts.
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.
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.
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.
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.
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.
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.
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:
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.
Oops! Something went wrong while submitting the form
It’s a web design tool, CMS, and hosting platform in one.
Oops! Something went wrong while submitting the form