As a website owner, one of your main goals is surely to guarantee that your website is always as unique as it could possibly be to an arriving visitor. One easy way to make sure that your website stands out – even after you’ve powered your WordPress website with a popular theme – is to use custom typography.

The ideal number of fonts

A single font throughout your website would be way too minimalistic, and it may even send the message that your website isn’t even finished. Using too many fonts, on the other hand, will create an overcrowded and unorganized look. Another important factor to consider is that loading custom fonts has an effect on your website’s overall speed and functionality. When taking design aesthetics and website speed and functionality into consideration, choosing two fonts is a safe bet. Any more than three is not recommended.

How to combine fonts

When combining fonts, the golden rule is to simply create some level of contrast. You can, for example, pair a serif font with a sans-serif font to add just a bit of distinction between two different headings, between a heading and a subheading, or between a heading and a body of text.

Serif fonts are fonts that have small lines attached to the ends of each letter, while sans-serif fonts are fonts without these lines.

Another way to create contrast with the fonts that you choose is to use fonts with different thicknesses. Most fonts will not only have a regular version, but also a bold, extra bold, light, and extra light version as well. Others might even have a black option (bolder than extra bold) or a thin option (lighter than extra light). You can use this strategy, in addition to the previous tip, or even on its own for the combination of two serif or two sans-serif fonts. However, using a single font is still not recommended, even with different thicknesses. Also consider the fact that neither too little nor too much contrast will look good – it’s all about finding the perfect balance. Stick to a thickness difference of two steps away from each other. For example, extra bold and regular or bold and light. While bold and regular typically doesn’t offer enough of a difference to create a visually appealing contrast, extra bold and light would probably offer too much.

Stay consistent

Once you have your fonts, it’s important to stay consistent with the ways in which you apply them. For example, one of the fonts can be dedicated for your main body text, while the other one can be used strictly for headings. Alternatively, you can have a third one, if you’d like, for other miscellaneous elements like footers and side-notes. Creating a style guide can help you and your team members stick to the plan and ensure a visual consistency all throughout your website.

Add some color or patterns

Don’t be afraid of colors and patterns! You can and should use them with your fonts. For example, changing the color of the font to white and placing it on a background made out of your dominant brand color or a photo is a great idea for sliders. Some recurring patterns can be used together with your font can to add a nice touch, especially for titles and headings. Finally, underlining or setting a different color for links is a common practice, so that your visitors can clearly see which part of the text is a link. If you choose to underline your text without changing the color, you could have a different color set that can be used as a “hover-over” effect, so when your visitors place their cursor over a menu item or link, the color of the font changes.

Photo by Jeroen den Otter on Unsplash