How to Improve WordPress Blog Typography – Actionable Tips

If you are a blogger, you already used a lot of advice on how to write correctly. Make sure you are aware of the latest SEO trends. Definitely try to choose the right theme for your WordPress site. Should we even start with the add-ons? You are still trying one after another, with the sole intention of improving the functionality and usability of your blog.

Now is the time to talk about another aspect of maintaining a WordPress blog: typography. [19659002] If you are looking for a precise definition of typography, it says something like this: "Typography is the visual art of creating written words." If we talk about a WordPress blog, this definition can be misleading. It focuses mainly on artistic typography. When you look at the most popular blogs, such as TechCrunch for example, you will notice that there is nothing artistic about the written words.

TechCrunch Blog – Typography Design

The typography is clear and legible That's what we're talking about when we refer to blog typography. Does this mean that we are only focusing on the source? No. The way in which the source is implemented within the blog environment is equally important. We are talking about all the elements of text, colors and the combination of sources that you will use to create a recognizable and digestible blog typeface.

Why should you worry about WordPress typography?

Let's go back to that definition: the creation of written words was the most significant part.

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

When you play with fonts and colors within a sentence, you can even change its meaning. Graphic designers depend a lot on that concept. They strive to create meaning through the visual appearance of the texts and the 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 in which 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:

  hello-design-1
Hello – Typography Design 1
  hello-design- 2 "width =" 515 "height =" 508 "srcset =" https://fdmania.com/wp-content/uploads/2018/05/1526904577_331_how-to-improve-wordpress-blog-typography-actionable-tips.png 515w, https: // themegrill-jgzsdow3hv .stackpathdns.com / blog / wp-content / uploads / 2018/04 / hello-design-2-300x296.png 300w "sizes =" (max-width: 515px) 100vw, 515px "/> 
 
<figcaption class= Hello – Typography Design 2

The first, presented as a big bold word, is hard to ignore, you heard hello in your head as a strong and dominant voice by a person who is happy The second illustration shows the same word, but the positioning and the scale make it seem hesitant … Personally, I feel that it is accompanied by a false smile

see, the layout of the letters and the path fit with the rest of the design and can alter the meaning of the message. That's obvious in graphic design, but it shows us how important typography is in any type of text, including blog posts.

Take a look at The Sartorialist another popular WordPress blog. You will notice a clean and readable font. The text is very small, but that is because the focus of this blog is on the visual content. Use a less readable font in the Twitter section, mainly because it is in italics. However, that also has a reason: it makes you feel that it is handwritten notes, so you get the feeling that the author expressed a momentary thought or feeling on Twitter.

  typography-style writing
Twitter feed in handwriting style – Typography Design

Think about it this way: if visual design is what your website looks like, typography determines how it sounds. And you're definitely worried about how you sound, right?

Do we have a problem with a random choice of WordPress typography? [19659008] What's the problem if you choose a random font on a random scale and color and combine it with other random sources in random colors?

The most important problem is that the incorrect typography will affect the readability of your publication. [19659002] A study conducted by Nielsen Norman Group showed that people will not read content online unless the text is clear, the style is simple and the information is easy to understand. All bloggers know it! The attention span of the audience is not impressive. That's why he uses shorter paragraphs and expresses himself as clearly as possible.

However, many bloggers do not realize that the typeface, font size, and contrast between text and background play an important role in readability. As defined in the same Nielsen Norman research that we mentioned, readability is the "low-level consideration in the usability of content." It's the first thing people notice on your website. If the typography is not well done, they will not bother to force the eyes to read what you want to say.

Then yes; we do have a problem with random-size random sources on random backgrounds.

Tips: How to improve the typography of your blog

1. Stay away from illegible sources

When choosing a source, you have too many options to experiment with. However, it is important to know what specific fonts you should avoid.

  • Pacifico: It seems artistic and could be great for graphic design, but it would seem silly as the dominant source in a WordPress site.
  • Impact: It's fine for the headlines and we often see it in that feature, but it's definitely too narrow for the text on your WordPress site.
  • Comic Sans MS – Are you writing comics? Then you can use it in the design. It is better that you do not consider this source for a re
    al blog post.
  • Lobster: Imagine reading a long blog post written with the beautiful, but illegible, handwriting of someone. Exactly!
  • Franklin Gothic: this clean font is good for a newspaper, maybe. But it seems a bit obsolete to use in a blog. Although it is not as bad as the previous sources on this list, it is better to avoid it.

This is how they look visually:

 avoid-these-fonts

Hey, it's your choice. Many sources to choose from. You may feel that Franklin Gothic adapts to the vibes of your site. However, the reader should always be kept in mind, so be sure to choose a source that is attractive and readable for the average website visitor.

2. Think of the font combinations

Instead of thinking of an individual source that is universal for your site, you should change your approach to choosing a combination of sources that work together. Take a look at some WordPress sites that are easy to use, you will notice that they use different sources for the title, the subtitles, the body of the text and all the other textual elements on the website. This is because it is easy to emphasize certain aspects if you simply change the source.

If you want to prevent comments from diverting attention from the text, you will choose a less prominent font and reduce it. When you want to emphasize certain points, such as subtitles, you will opt for a bolder font than the one you use in the body of the publication.

So, what combinations work? That is a difficult question. It all depends on the general design of your site. Experiment with different combinations and you will get to the winning version, which will give a recognizable feel to your site.

FontPair is a good tool to use when you want to see how different sources work together. It will save you a lot of time to experiment since you will not have to change the sources on your site over and over again.

3. Mind the Size

Did you choose your sources? Good for you. But remember: that is not the only aspect of typography. You should consider the size of the font, too. You already know how exhausting it is to go through a publication with really small text. There is a solution: you will expand the page, but that will erase its design. You do not want your readers to do that extra burden.

A font that is too large is also a problem. It makes your site look deceptive. It also feels like you're screaming.

So, what size should the font have? Here comes the answer you despise: depends .

Here is a question that will help us explain: how do you read electronic books on your tablet? The horizontal view is more difficult in 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.

Is the number of characters that matter. According to most researchers who investigated the subject, 50-60 characters per line is the ideal ratio, and up to 75 characters are still acceptable. These characters include spaces and interworking. Yes; a very interested reader would read your text, even if it was provided with more than 150 characters in a single line. However, if you increased the font to reach about 60 characters in a line, that same publication would be much more pleasant to read.

Would you like some help to determine the size of the letter? The Golden Ratio typography calculator is a good tool to use. You can enter the width of the content (in pixels) and the desired characters per line, and you will get suggestions for the size of the font.

 golden-ratio-typography-calculator

4. Use the correct plugin to change the font

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

So, what are you doing? You use a plugin, of course! Here are some suggestions for add-ons that help you deal with the typography of your blog:

With this add-on, you can quickly edit the fonts and colors in your theme with the WordPress customizer, and you will get a live preview before you make the final decision Styleguide lets you choose from the best Google sources on any subject. That's more than enough for you, since Google Fonts is one of the most elaborate and most convenient source libraries available. It is free to use, so it is a great advantage.

This add-on will allow you to establish a recognizable style for your publications. How? – Creating a beautiful initial letter. This method has been used in classical typography for a long time, and it could work for your blog.

If you do not want to play safe with Google sources, you might like Font Squirrel. This plugin offers you tons of hand-picked fonts that are free for commercial use.

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

5. Mind the Background

Perfect typography is nothing when you do not place it in an appropriate environment. It is important to have a high contrast between the background and the characters. The light white background and dark characters is the safest option, but it is also the most effective. You'll see tons of white space and readable text on most successful WordPress blogs. There is 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 do not have to be revolutionary when it comes to WordPress typography. You just need to offer something that works.

  ted-blog-typography-design
TED Blog – Background

Wrapping

Although blog typography seems like a simple problem when you think about it for the first time, you will discover many layers as you begin to search she. With the use of different fonts, sizes, colors and typographic emphases, you can achieve the tone that delivers the correct message.

This is the most important point: no matter how much you play with the design, the text must be legible.

Biography of the author

Laura Buckler is an editor of Scholar Advisor Essays and a freelance writer. His favorite topics are social networks, digital marketing and content writing. She draws on her past experience as a social media marketer to produce deep and deep work. Follow Laura on Twitter .

(This is a guest publication, see guest publication guidelines)