While a seemingly small detail, fonts play a key role in how people perceive your website. If you choose the wrong font, visitors will quickly navigate away, but the right one will draw them into your website and further establish your brand.
Themes on WordPress.com come with preset fonts, but many of them allow you to change the fonts on your website if you choose. If you decide to use custom fonts, here are some web font best practices to follow.
1. Establish a hierarchy
When creating a website, it’s important to have what’s called a “typographic hierarchy,” a series of fonts in various sizes that help to create a roadmap for readers. TemplateMonster explains that if the writing on your website is all one size and one font, your visitors won’t know where to focus their attention first or how to find the information they’re looking for.
For this reason, you’ll want to have a designated font for headings (which should be bigger) and a font for base text (which should be smaller). This will allow you to break up large chunks of texts and direct readers to the information they’re looking for — just as we’re doing in this article.
2. Keep it simple
When choosing fonts, your key consideration should be whether they’re easy to read. If they’re not, don’t use them — it’s that simple.
For instance, ornate calligraphy fonts are elegant, but they can become jumbled and illegible when displayed on small screens. If your visitors are having trouble reading the more complex fonts, they’re likely to navigate away. So when in doubt, you’ll want to stick to safe, simple typography.
3. Consider your brand
Different styles of fonts convey different characteristics — DesignMantic even has an infographic that details emotions elicited by various fonts. As you consider fonts for your website, you’ll want to think about the message they send and whether it’s appropriate for your brand.
For instance, as mentioned above, calligraphy and script fonts give off an elegant vibe, while a stocky, bold font seems more dominant and serious. Bubble or rounded fonts are more playful, while traditional serif fonts are timeless and traditional. Consistency is key in branding, so make sure to choose a font that matches the image you’re trying to convey.
4. Mix and match appropriately
It’s not enough to choose two fonts you like and throw them together; you’ll want to create balance and cohesion with font pairings. Visme suggests using the following guidelines when pairing fonts:
- Pair a serif font with a sans serif one.
- If you use a distinct font for your headers, stick with a neutral body font.
- Choose fonts that give off the same vibe, as discussed above.
- Don’t use more than two or three fonts — otherwise, your site will start looking messy.
If you need some inspiration, generators like Fontjoy can help you experiment with popular fonts and find good pairings.
5. Create contrast with the background
Finally, don’t forget to create contrast with the background of your website to ensure your chosen fonts are legible. If you put a thin, lightly colored font on a light background, it won’t be easy to read, and you may lose visitors.
These web font best practices may seem complicated or unnecessary, but at the end of the day, what’s most important is that your fonts are legible and appropriate for your brand. If you keep these two objectives in mind when choosing a font, you’ll be well on your way to creating and maintaining an effective website.
ABOUT THE AUTHOR
Go WordPress 