How to Choose Fonts for Your Websites

Lauren Olson, October 10, 2017

Will they match?

Or should you stick with a trend?

If not, is the font unique enough? Will they take too much attention away from the content? Is it even legible?

...And that’s just the tip of the iceberg.

As you probably know firsthand, considering fonts and typography for your website can be overwhelming.

Popular font libraries like Google Fonts and Adobe Fonts have made thousands of fonts available for websites, so you can find the one that’s perfect for your site.

Previously, we’ve talked about font color and other useful methods for taking control of your website’s content, but what’s equally as important — and sometimes overlooked — is its typeface.

Your typeface needs to be bold but not overpowering, classic but not boring, fun but professional, and legible yet unique. To make things easier, there are some common typography fundamentals you can follow.

These essentials will take you through some of the basic principles, as well as common mistakes and tips, when it comes to choosing your website’s font.

Serif or Sans?

It’s a fundamental concept in design 101 courses, but in case you never took one, the battle between serif and sans serif has been a long one…

Serifs are the small lines (or strokes, or tails) on the edges of letters and symbols, while sans serifs are typefaces without the lines. Serif is said to be more classic and formal and sans serif is considered as more modern and simple. Times New Roman is a serif font, and Arial is a sans serif font.

There is a myth that serifs should only be used in print and that sans serif is better suited for web. There is also a claim that the screen quality of computers and laptops make it hard to read serifs — even though many peopled learned how to type using Times New Roman; a serif font.

With HD technology and a wide variety of font options, that’s not really a problem anymore. However, there are still a few times and places where sans serif is preferred, such as:

Low-resolution displays
For new readers (i.e. children)
Small text
Low-contrast patterns or text with lots of colour

Regardless of which typeface style you choose, there are pros and cons to both. It just depends on the look you want your website to have. Can’t decide?

Try pairing them together. This simple and easy combination can produce a cohesive look.

Sans serif is adaptable so it can take on the the characteristics of surrounding typefaces, making it a good companion for most other fonts. For example, consider the Proxima Nova font family (immensely popular at the time of writing) — Mark Simonson’s evolved version of his earlier Proxima Sans font.

However, these are just guidelines, not laws. Sometimes a pair of fonts just look or feel right together, even when logic says they shouldn’t. You’ll be surprised what you like and don’t like together once you compare the typography side-by-side.

Avoid these Common Typography Mistakes

Unfortunately, rather than well-done typography, it’s the typography errors that tend to make the biggest statements. Typography is much more than just arranging pretty fonts on a nice background, it’s an essential part of website design and one that can either make or break the entire project.

Mistakes can stick out like a sore thumb, so if you want to get your message across without distracting errors, learn to recognize some of the most common mistakes.

#1: Your website isn't "readable"

Of course, the most important rule when choosing a font for your website design is ensuring that the text is readable (i.e., legible). If viewers are having a difficult time reading your text, your overall message will get lost in translation.

It’s easy to get so caught up in the excitement of the design process that you make choices to achieve a certain look, but they can end up being impractical.

Poor legibility isn’t necessarily the font’s fault. Sometimes, it’s just because the font color and background colors are too similar, or there’s not enough line spacing. Whenever you feel your eyes straining to read something, that’s a problem.

If viewers strain to read the text on your website, they won’t remain on it for long. The headers can be more elaborate, but large chunks of body text should be in an easy-to-read font. Keep in mind that “90 percent of design is typography and the other 90 percent is whitespace.”

It is usually pretty easy to eyeball it when it comes to the aesthetics of your website’s design, but if you can’t tell what the website is trying to communicate with just a glance, it’s not readable. Get someone else to look at your website, or test its readability with WebpageFX’s Readability Test Tool.

#2: Mismatched Typefaces

When combining fonts, you want them to contrast, not conflict. Using too many typefaces or mismatching them can be unappealing to the eye.

Just because fonts are different and look good independently, doesn’t mean they will automatically work when used together.

Website designs usually benefit from a limited number of fonts (generally, two to three fonts is a good rule of thumb). Typefaces that share a couple of the same qualities (for example, similar proportions or lowercase letters that have the same height) are more likely to look good together, even if the overall appearance differs.

Using typefaces from the same font family is always a safe bet, because they were purposely created to work together. Of course, you’ll still want to make sure they are distinct enough from one another to establish a hierarchy within the text of your design.

#3: Lack of Distinction

A good starting point for choosing fonts that fit the context of your website is to match the qualities of your intended message with the perceived traits of a typeface. Google Fonts has over 840 font families to choose from, while TypeKit’s marketplace has over 6,000 fonts.

Most people simply use a combination of the most popular fonts when designing a website, but it is important to take the time and consider other fonts for the purpose of uniqueness.

Sites like Template Monster offer unique fonts that will definitely help you stand out from your competitors. For example, Stay Classy is a unique and attractive handwritten script that can help highlight the key concepts of your content.

How to Choose and Pair Fonts

Now that you know the difference between serif and sans serif and have an idea of what not to do, it’s time to start choosing your fonts. In addition to what we wrote about legibility earlier, there’s an important factor to keep in mind when pairing typography - create contrast.

Your typefaces should have different text styles and still be aesthetically pleasing to the eye, all while keeping in line with your website’s brand.

When it comes to creating contrast, pair bolder and more subtle fonts with one another. Your text will have variation, without being too overpowering.

Opposites do tend to attract, so don’t be afraid to combine “introverted” and “extroverted” fonts. The key is establishing a balance with your website design by pairing similar but different fonts. If you need a quick pairing, choose one serif and one sans serif. As previously stated, the two work well together, particularly in contrasting sizes.

If you don’t know where to start when it comes to choosing fonts, there are resources to help you:

Font Pair lets you browse through title and body text pairings chosen from Google Fonts, to show you which fonts look good together. Brandmark’s Font Generator lets you choose your starting three fonts — or randomize them — and see how they vary on the page.

Remember, create contrast, but never conflict.

Final Thoughts

Typography should draw the eye without being too distracting, especially when overcomplicating things could be the death of your design.

Be sure to avoid common mistakes like mismatched typefaces and legibility to ensure your website has it’s own unique font. Pair bolder headers with more subtle fonts so your text contrasts without being overpowering. Before you make your typefaces public, find someone else — someone honest and candid — to have a look at the final project.

If a visitor can identify your brand solely by looking at the body text of your website, you’re on the right track. Keep it simple, make it legible, and eventually your consistency will pay off… People will be able to recognize your brand, simply from your font and typography.

PageCloud makes adding fonts to a website as easy as copy + paste. Start your free trial today.