Website fonts: A Practical Guide

The best website fonts are clear, readable and in keeping with your brand. Your fonts shape how visitors see your business, so they deserve some thought. This guide covers styles, sizes, pairing, licensing and the questions people ask most.

Quick answer

When you choose website fonts, focus on a few key points. Legibility and readability. Pick fonts that are easy to read, for headings and body text alike. Look at the x-height (the height of lowercase letters), the letter spacing and the line height. A legible font helps people take in your content quickly. Consistency and coherence. Choose fonts that work well together, and use them the same way across the site. Many sites pair a serif with a sans-serif for contrast. Keep font sizes and line heights consistent from page to page. Use fonts built for the web, and check how they look in different browsers. Check the licence, especially for commercial use. Test on phones, tablets and desktops. Use two or three font families at most.

Choosing the right font style

Your font style affects the look and feel of your site and how visitors see your brand. Serif fonts. Serif fonts, such as Times New Roman and Garamond, have small strokes at the ends of the letters. They are common in print, but they also work on screen. They suit sites that need a traditional or formal tone. Sans-serif fonts. Sans-serif fonts, such as Arial and Helvetica, have no end strokes. They are common in digital interfaces and give a clean, modern look. Script and display fonts. Script fonts, such as Lobster and Pacifico, imitate handwriting. Display fonts, such as Impact, are made for headings and titles. Both add personality, but use them sparingly. They are hard to read in long passages. Decide on your tone: formal, modern, playful or traditional. Think about your industry and what your audience expects. Read First Impressions in Web Design: What Visitors Judge First to learn how visitors judge a site.

Font size and line height

Size and line height matter as much as the font itself. Text that is too small strains the eyes. Lines set too close together are hard to follow, and lines set too far apart waste space. Choosing the right font size. Most browsers use 16 pixels as the default text size, and many designers treat it as the starting point for body text. If your audience includes older readers or people with low vision, go larger. Avoid very small sizes for anything people need to read. Use relative units such as rem in your CSS so text scales when users change their browser settings. Setting line height. Line height, also called leading, works well at about 1.2 to 1.5 times the font size. Body text usually reads best near the top of that range. Headings can be set tighter. You can change line height in your CSS or in your website builder's settings. Use a line height of about 1.2 to 1.5 for body text. Set headings tighter than body text. Keep line heights consistent across the site.

Font pairing and hierarchy

Good pairing and clear hierarchy make a site easier to scan. You are choosing a set of fonts that work together, not a single font. Consider the font's purpose. Each font should have a job. One might handle headings and another body text. For example, a sans-serif heading can sit above serif body text, or the other way round. Choose each font for the role it plays. Balance font styles and weights. Contrast creates interest. A bold sans-serif heading with lighter body text can look striking. You can also build hierarchy within one family by using different weights and sizes. Too many styles, though, look cluttered. Choose fonts with similar x-heights so they sit well together. Make headings clearly different from body text in size or weight. Your platform affects which fonts you can load easily. See How to Choose a CMS for a Small Business Website.

Web font services and licensing

Choosing a web font service. Google Fonts offers a large library of free, open-source fonts. Font Squirrel focuses on free fonts that are licensed for commercial use. Adobe Fonts, formerly Typekit, comes with Adobe Creative Cloud plans and offers a large library. Licensing and usage. Every font has a licence that sets out how you may use it. Some fonts are free for any use. Others need a paid web licence, a subscription or a one-time purchase. A licence for desktop use does not always cover the web, so read the terms carefully. Confirm the font is allowed for commercial websites. Check that it comes in web formats such as WOFF2. Make sure it works with your CMS or framework. Load only the weights you need to keep pages fast.

Frequently asked questions