How to Improve WordPress Blog Typography – Actionable Tips

If you’re a blogger, already went through tons of tips about proper copywriting. You make sure to stay on top of the latest SEO trends. You definitely try to pick the right theme for your WordPress site. Should we even start with the plugins? You keep trying one after another, with the sole intention to improve the functionality and usability of your blog.

Now, it’s time to talk about yet another aspect of maintaining a WordPress blog: typography.

If you’re looking for a precise definition of typography, it goes something like this: “Typography is the visual art of creating written words.” If we’re talking about a WordPress blog, this definition may be misleading. It’s mostly focused on artistic typography. When you take a look at the most popular blogs, such as TechCrunch for example, you’ll notice there’s nothing artsy about the written words.

The typography is clear and readable. That’s what we’re talking about when we’re referring to blog typography. Does this mean we’re only focusing on the font? No. The way the font is implemented within the blog environment is just as important. We’re talking about all text elements, colors, and the combination of fonts you’re going to use to create recognizable and digestible blog typography.

Why Should You Care about WordPress Typography?

Let’s get back to that definition: creating written words was the most significant part of it.

Clearly, the written word is the primary medium of a WordPress blog. People visit blogs because they want to read something, even if we’re talking about infographics. Typography is all about the presentation of that written word. Depending on how you use it, it will emphasize the points you want your readers to pay attention to.

When you play with the fonts and colors within a sentence, you may even change its meaning. Graphic designers rely on that concept a lot. They strive towards creating meaning through the visual appearance of the texts and images they use. Through typography, they communicate age, personality, tone of voice, gender, and mood.

In 2012, Smashing Magazine published an interesting article about the way typography can manipulate the meaning of a message in graphic design. They illustrated that fact through a simple example: the word hello provided in two different designs:

The first one, presented as a huge word in bold, is hard to ignore. You hear that hello in your head as a loud and dominant voice by a person who is happy to see you. The second illustration shows you the same word, but the positioning and scale make it seem hesitant… Personally, it feels to me like it’s being accompanied by a fake smile.

As we can see, the arrangement of the letters and the way they fit with the rest of the design can alter the meaning of the message. That’s obvious in graphic design, but it shows us how important typography is in any kind of text, including blog posts.

Take a look at The Sartorialist, another popular WordPress blog. You’ll notice clean, readable typography. The text is very small, but that’s because the focus of this blog is on the visual content. It uses a less readable font in the Twitter section, mainly because it’s in Italic. However, that comes with a reason, too: it makes you feel like these are handwritten notes, so they give you the feeling the author expressed a momentary thought or feeling on Twitter.

Think of it this way: if the visual design is how your website looks, the typography determines how it sounds. And you’re definitely concerned about the way you sound, right?

Do We Have a Problem with a Random Choice of WordPress Typography?

What’s the problem if you choose a random font on a random scale and color, and you combine it with other random fonts in random colors?

The biggest issue is that the wrong typography will affect the readability of your post.

One study by Nielsen Norman Group showed that people won’t read online content unless the text is clear, the style is simple, and the information is easy to understand. All bloggers know that! The attention span of the audience is not impressive. That’s why you use shorter paragraphs and you express yourself as clearly as possible.

However, many bloggers don’t realize that the typeface, size of the font, and the contrast between the text and the background play a huge role in legibility. As defined in the same Nielsen Norman research we mentioned, legibility is the “lowest-level consideration in content usability.” It’s the first thing people notice at your website. If the typography is not well done, they won’t bother straining their eyes to read what you want to say.

So yes; we do have a problem with random fonts in random size on random backgrounds.

Tips: How to Improve Your Blog’s Typography

1. Stay Away from Unreadable Fonts

When choosing a font, you have too many options to experiment with. However, it’s important to know what specific fonts you need to avoid.

• Pacifico – This one seems artistic and it might be cool for graphic design, but it would look plain silly as the dominant font on a WordPress site.
• Impact – It’s okay for headlines and we often see it in that function, but it’s definitely too narrow for text on your WordPress site.
• Comic Sans MS – Are you writing comics? Then you’re allowed to use it in the design. You better not consider this font for an actual blog post.
• Lobster – Imagine reading a long-form blog post written in someone’s beautiful, but unreadable handwriting. Exactly!
• Franklin Gothic – This clean font is good for a newspaper, maybe. But it looks a bit outdated to use on a blog. Although it’s not as bad as the previous fonts on this list, it’s still better to avoid it.

Here is how they look visually:

Hey; it’s your choice. There are plenty of fonts to choose from. Maybe you’ll feel like Franklin Gothic fits into the vibe of your site. However, you should always have the reader to mind, so make sure to choose a font that will be appealing and readable for an average website visitor.

2. Think about the Font Combinations

Instead of thinking of an individual font that would be universal for your site, you should shift your focus towards choosing a combination of fonts that work together. If you take a look at some WordPress sites that are easy on the eye, you’ll notice they use different fonts for the headline, subheadings, body of the text, and all other textual elements at the website. That’s because it’s easy to emphasize certain aspects if you simply change the font.

If you want to prevent the comments from taking the focus away from the text, you’ll choose a less prominent font and you’ll make it smaller. When you want to emphasize certain points, such as the subheadings, you’ll opt for a bolder font than the one you use in the post’s body.

So what combinations work? That’s a tough question. It all depends on the overall design of your site. Experiment with different combinations and you’ll come down to the winning version, which will give a recognizable feel to your site.

FontPair is a nice tool to use when you want to see how different fonts work together. It saves you a lot of time with experimenting since you won’t have to change the fonts at your site over and over again.

3. Mind the Size

You chose your fonts? Good for you. But remember: that’s not the only aspect of typography. You must consider the size of the font, too. You know how tiring it is to go through a post with a really small text. There’s a solution: you’ll zoom in the page, but that takes off its design. You don’t want your readers to make that extra burden.

A font that’s too large is also a problem. It makes your site looks gimmicky. It also feels like you’re yelling.

So what size should the font be? Here comes the answer that you despise: it depends.

Here’s a question that will help us explain: how do you read eBooks on your tablet? The horizontal view is more difficult on the eyes. It’s not because you’re used to the standard book format. It’s because the horizontal view has too many characters in a single line, so your eye loses focus.

It’s the number of characters that matter. According to most researchers that investigated the issue, 50-60 characters per line is the ideal ratio, and up to 75 characters are still acceptable. These characters include spaces and interpunction. Yes; a highly interested reader would read your text even if it was provided with 150+ characters in a single line. However, if you upsized the font to reach around 60 characters in a line, that same post would be much more pleasurable to read.

You want some help on determining the font size? The Golden Ratio Typography Calculator is a good tool to use. You can enter the content width (in pixels) and the desired characters per line, and you’ll get suggestions for the font’s size.

4. Use the Right Plugin to Change the Font

You can change the fonts through theme settings, but you might get confused there. Some themes give you great control over the fonts, sizes, and colors of the text. The default WordPress themes, however, don’t offer that luxury.

So what do you do? You use a plugin, of course! Here are few suggestions for plugins that help you deal with your blog’s typography:

• Styleguide – Custom Fonts and Colors

With this plugin, you can quickly edit fonts and colors in your theme with the WordPress Customizer, and you’ll get a live preview before making the final decision. Styleguide lets you choose among the top Google fonts in any theme. That’s more than enough for you since Google Fonts is one of the most elaborate and most convenient font libraries available. It’s free to use, so that’s a huge bonus.

• Initial Letter

This plugin will allow you to set a recognizable style for your posts. How? – By creating a beautiful initial letter. This method has been used in classical typography for a very long time, and it might as well work for your blog.

• Font Squirrel

If you don’t want to play it safe with Google fonts, you might like Font Squirrel. This plugin gives you tons of hand-picked fonts that are free for commercial use.

• Zeno Font Resizer

Clearly, typography is not only about the font’s style. It’s about the size, too. So let’s say you choose a size and you think it’s perfect. What if it doesn’t work for one of your readers? With Zeno Font Resizer, you will allow your visitors to change the size of the font, so they will read the blog post as they like it.

5. Mind the Background

The perfect typography is nothing when you don’t place it in an appropriate setting. It’s important to have high contrast between the background and the characters. Plain white background and dark characters is the safest option, but it’s also the most effective one. You see tons of white space and readable text on most successful WordPress blogs. There’s a reason for that.

Take the TED blog as an example. Black text on white background. Nothing revolutionary about that design. But guess what: you don’t have to be revolutionary when it comes to WordPress typography. You only need to offer something that works.

Wrapping Up

Although blog typography seems like a simple issue when you first think about it, you’ll discover many layers as you start digging into it. With the use of different fonts, sizes, colors and typographical emphasis, you can achieve the tone that delivers the right message.

This is the most important takeaway: no matter how much you play with the design, the text has to be readable.

Author’s Bio

Laura Buckler is an editor at Essays Scholar Advisor and freelancer writer. Her favorite topics are social media,  digital marketing, and content writing. She calls on her past experience as a social media marketer to produce in-depth and insightful work. Follow Laura on Twitter.

(This is a guest post. View guest posting guidelines.)