How to Give Your WordPress Site a Font Facelift

As we think about all the ways we can change ourselves for the better this year, why not throw a little of that energy into making our websites better, too? I don’t know about you, but I think a little facelift couldn’t hurt… especially if you’re in the mood to shake things up a bit.

When it comes to website revamps, there’s no need to do a full redo – unless your analytics are telling you there’s something wrong. Otherwise, a little nip and tuck should be all you need to give your WordPress website a fresher look.

My suggestion? Start with your typography.

Step 1: Evaluate Your WordPress Website’s Current Typography

Before tackling any makeover, it’s best to assess what you’re working with first. This’ll give you an idea of where any weaknesses may lie and how much flexibility you’ll have in making changes.

In order to evaluate a website’s typography, ask yourself the following questions:

1. Where did Your Current Font(s) Come From?

Are you aware of how your site’s current font selections came about? If your site uses the default fonts from your WordPress theme or they were chosen on a whim, that’s usually a good sign that they need to be changed. While they probably look good enough, they were not hand-selected to fit with your brand’s unique style. Consistency in design is key – from the images you use all the way down to the typography.

2. Is Your Typeface Complete?

Let’s say you’ve selected a high-quality font face that meshes well with your site’s design. What happens when you find out it doesn’t come with a complete character set? In other words, will you be okay relinquishing your site to all-capped text or forcing your writers to avoid certain characters that aren’t included in the set?

If you’re unsure of whether or not you have a complete typeface that includes all letters, numbers, and symbols, go back to the source of the font. There should be a preview field where you can enter custom text. Insert the following lines of text to ensure that all essential characters are present:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àèéïöùüçûæÆœŒ
.,;:?!/[]{}()*-– —…“”‘’_
0123456789
≤≥÷+=≈≠±-·√°@€£$%&*|«»\<>/~”‘§¶©®™

3. Have You Checked for Readability Issues?

If you’re working on a Mac, I’d suggest you download Font Book. Once you have a font that’s piqued your interest, install it in Font Book to test for readability issues. You can use this to:

• Check for a complete set (like with test #2 above).
• Preview the font digitally to get a sense for how it’ll appear on your website.
• Print the full character set at different sizes and styles to determine which ones are the most reader-friendly.

This also happens to be a great tool for storing your fonts and keeping them organized for the next time you want to give your typography a makeover.

4. Have You Reviewed Your Typography for Mobile?

Free online tools like Responsinator make checking a website for responsive compatibility easy. These same responsive checkers can also be used to review your site’s typography for mobile-friendliness.

The standard recommendation for cross-platform font sizing is 16 points or more. That may not be the case if you choose a highly stylized or tightly-kerned font, so be sure to verify that on one of these tools before committing.

You can also use this guide to popular font sizing to give you an idea of where to start.

5. Is Your Font Color Reader-Friendly?

Making over your site’s typography isn’t just about finding the right font or size. Nope, it’s also about finding the right color. If you haven’t experimented with this Material Design Palette yet, take a moment to do so now. You’ll see that regardless of which branding colors you select, the primary and secondary font color are always black or a shade of grey.

6. Have You Tested Your Typography for Accessibility?

Web developers know all about how to make websites accessible. However, if you’re really looking to give your typography a universal-friendliness in this next iteration, pay closer attention to factors that may affect those who are visually impaired or color blind.

Start by running your website through Color Oracle. This tool will simulate how your website appears to those who are color blind.

Then review the recommendations made by the American Foundation for the Blind. These “tips for making print more readable” include suggestions regarding print size, typography selection, color usage, contrast, and spacing.

You never know who may come to your website, so it’s important to consider these factors now while you’re taking the time to give your typography a facelift.

Step 2: Follow Typography Best Practices

Font choice is a personal decision, much like everything else in web design. So while I cannot tell you which fonts to use, I still think it’s important to lay out the best practices to follow while doing your research, testing, and implementation of new ones.

Here are the basic rules to follow:

• Match your brand: Select a font that follows the design rules you’ve already established for your brand.
• Keep it simple: Use no more than two or three typefaces across your website. That being said, it’s okay to use a font face that’s a little out of the ordinary, just make sure it’s easy to read.
• Maintain consistency: Use consistent font styling throughout the site. In other words, all headings should use the same font, size, color, and style. The same goes for all body text, navigational text, hyperlinked text, and any other types of text you use on the site.
• Create contrast: While consistency across font type matters, there should be a contract between headings and basic body text. You can do this by pairing a sans serif font with a serif or a cursive font with a handwritten one. Just be sure the contrast is striking, though not to the point of being off-putting.
• Check the color: As noted earlier, black or shades of dark gray work best for readability. There’s also the background color to take into consideration as well, so it’s important to pair colors accordingly (i.e. light text on a dark background and dark text on a light background).
• USE ALL CAPS SPARINGLY: All caps text can be very difficult to read. Either that or it may give off the wrong vibe. So, if you feel you have to use it, do so sparingly.
• Establish hierarchy: Just because the general rule is to use a font size of at least 16 points, that doesn’t mean all your site’s typefaces need to stick to that minimum limit. Headers, subheaders, and body text should be sized to establish a clear hierarchy in terms of what’s most important.
• Don’t forget about spacing: Once you’ve implemented the new typography on your site, you’ll want to optimize its spacing. If there are issues with lines spaced too closely with one another, fix the leading. If there are issues with readability within a line of text, you’ll need to adjust the kerning and maybe even the tracking. Ideally, each line of text should stretch no more than 15 words.
• A/B test before making a commitment: While you might be ecstatic about your new font choice, other people might not feel the same way. Do yourself a favor and make sure to A/B test your new font choice before fully committing to it. Your website (and business) will thank you for it later.

Wrapping Up

If want help finding that new, striking font face (or two) for your website, check out these resources to more efficiently find and use fonts (it’s at the bottom of the post). They’ll get you and up and running with some flashy new typography in no time.