The Basics of Website Font Pairing

General Typography Rules

Many find website font pairing a bit daunting at first. It seems easy to pick a few fonts that you like. Then, when they begin to interact in the modules, it can quickly look like a mess. These general typography rules that impact website design.

1. Select fonts that are legible. Website visitors must be able to read your text.
2. Limit your fonts to 2-3 options. You can add some variation by changing the font size and weight between these options.
3. Keep your brand’s personality in mind when you pair the fonts. For example, a traditional serif header font can look more modern if you pair it with a sans serif font for the body copy.
4. Use white space and text alignment to your advantage. You don’t need to crowd the information because on a website, you have limitless vertical space. Use it.
5. Create entry points into the text using headers, pull quotes, indents, and drop caps. You can design text in such a way that it encourages reading.

My Top Tips

I build upon general typography rules by considering how they’re used on responsive website designs. These tips help you avoid frustration as you start implementing the fonts throughout your website content.

1. Create a font hierarchy that will work on every page of your site. I start by laying out the modules (ie. feature boxes, subscription forms, galleries, blog preview, etc) and creating page templates that include those modules. Then, I use this to make sure the assigned fonts will work. Sometimes, ideas that work in theory don’t look great when the modules are near each other.
2. Lean toward fonts that are thick if your modules include text over images and textures. Otherwise, readers will have a hard time seeing your text.
3. Fix the line height in CSS. Many themes build in a default line height that looks awkward with less common fonts.
4. Pick a secondary font that you absolutely love. Whatever you use for H2-H6 will be everywhere on your site. Make sure you really like it.

The Basics of Website Font Pairing

Planning the typography for a site requires an understanding of the hierarchy of information. Ideally, the fonts (including the size and weight) will work well in order from Heading 1 to Paragraph. 

CSS Meanings: 

• H1 is the first header for your website. On your homepage, this is often the text that goes on top of the Hero section. On other pages, you use this for the page title. It should only be used once on each page of your website.
• H2-6 are heading options used in order. Think of it as a writing outline. H3 goes under H2. H4 goes under H3 which goes under H2. Keep this in mind as you’re choosing the font family, weights, and sizes. Ideally, H2 will be larger than H3 and so on.
• P denotes the main text for your website. Ideally, you find an option that offers several weights to make it easier to add emphasis to long sections.

Font Families:

• Serif fonts use a small stroke or tail at the end of each letter. They’re usually considered more formal or traditional.
• Sans-serif fonts lack that little tail. Most people see these as modern and minimalist.
• Monospace fonts have the same width for each of the letters. They appear mechanical and blocky.
• Cursive fonts include handwriting fonts. They’re organic and often playful.
• Fantasy fonts capture all the other styles. They’re often fancy or unusual.

Font Style:

• Normal denotes the default setting for the font.
• Italic shows the text in italics.
• Oblique slants or leans the text. You see this less often because it’s not as widely supported.

Font Weight:

• Normal font weight matches the default weight for the font.
• Bold makes the font thicker.
• Variable fonts allow you to choose from a variety of weights

Font Size:

• Pixels px are most commonly used to set font weight for websites (as opposed to points in other design programs).
• Em allows users to resize the text. 1em equivalent to the current font size. You can calculate the pixels to em by dividing pixels by 16.
• Percent % is also used in combination with em. This works well for designs across all browsers.
• Responsive font size vw allows the text to size to fit in relation to the browser window.

In CSS, you program the fonts and they are applied globally throughout the site. Your chosen combination will influence the way a reader experiences the site.