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.
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.
A font family is a group of fonts that have a similar design but different styles (Thin, Regular, Bold, etc.). They look like:
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.
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.
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.
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.
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:
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
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.
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.
If you would like to learn more about this whole topic, check out the official WordPress documentation about custom typography.
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- Show all related topics...
- How to Design and Choose Images and Illustrations
- Choosing and Applying Colors in Your Site
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- YouTube Videos with Advanced Options
- Styling Front-End Forms
- Creating a Hero Section
- Adding Dynamic Content to Your Homepage
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally