Skip Navigation
Buy Now
Home » Course » WordPress Design » Website Typography and Colors » Using Typography for Better Website Readability

Using Typography for Better Website Readability

The fonts you choose affect the design and legibility of your site’s textual content. Sometimes these fonts can also impact your website readability or responsiveness, so you must understand the basics of website typography.

Understanding typography

Typography is the technique of arranging type, such as your site text, to be understandable and attractive. You must pick text designs, called fonts or font styles, and apply them to the different types of text on your site.

These different types include:

  • Headings (H1, H2, H3, etc.)
  • Paragraphs (body text)

The different font styles you apply to these parts should fit your brand identity and suit your site content. The fonts should also complement one another aesthetically. 

A homepage displaying non-standard font

A homepage displaying normal font

Please note that your logo font should relate to at least one or all of the font styles you decide to use on the rest of your site. This helps keep your brand image consistent.

How to choose a font family

A font family is a group of fonts that have a similar design but different styles (Thin, Regular, Bold, etc.). They look like:

An example of Lato font variants with different styling

In general, you should stick to one or two font families. If you use more than two font families, your content might appear inconsistent and less readable.

Creating your font pairings

You can use online services to find great font pairings, such as Fontpair and Google Fonts. Just make sure the fonts you select match your brand identity, convey the personality of your content accurately, and are legible.

Google Fonts displaying an example of a font pairing

When designing your typography, you can choose 2 font families and designate one for your headings and the other for your paragraphs. This creates a nice look which gives you more opportunity to express your brand identity. 

An example of a site page with two font families

However, the easiest way to design your typography is by choosing one font family and applying it with different styling effects such as bolding or italicizing. You can apply these to different text parts such as headings or paragraphs.

An example of a website with fonts from the same font family

Using typography for better website readability

The different textual parts of your site work together to create a content hierarchy that helps users understand the level of importance of text content. For example, the most demanding textual parts include your headings.

This is important because appropriate font styling not only conveys your brand identity but is also vital for page content organization and readability. 

When you arrange your font families together and create your hierarchy, you need to apply it to your text. When you’re done, it looks like the example below:

A post displaying content with levels applied

The hierarchy in the example above makes it instantly clear what information is primary and what is secondary on a page, which is essential for good readability and organization.

To make sure that your content is readable across different devices, we suggest trying out different font sizes and styling then checking everything on the front-end. Make sure to check the content for different screens, such as mobile, tablet, and computer.

A website page displaying content following recommended sizing

A website displaying content on mobile that follows recommended sizing

Applying typography to your site

Most themes allow you to apply font styling and sizing to different text parts, such as  Headings, in the Customizer. Making changes here allows you to control your entire site’s appearance. 

Customizing the Base Typography

You can usually find this by going to Appearance → Customize and locating the panel for Headings, Base Typography, or Fonts. If you aren’t sure where it is, refer to your theme documentation or contact their support. 

If you want to make changes to specific pages or posts, without changing the font styles for the rest of your site, use a plugin such as Toolset. Toolset enables you to easily style headings or paragraph text in the WordPress block editor, which means you can create custom page designs and styling.

Adjusting the Font in the block editor

If you would like to learn more about this whole topic, check out the official WordPress documentation about custom typography. 

Go to next step
Cloe
Updated
May 11, 2021
Send feedback to our documentation team