Writing a readable blog post

The importance of typography

The importance of typography

April 07th, 2016 – 14 Comments

For a blog, it’s of great importance that people can read the texts of your post properly. Reading from screens is hard, so make sure you don’t make it any harder than it already is. In this post, we’ll give tips on how to improve the typography of your blog.

Writing a readable blog post

Typography and readability

The readability of a particular text depends both on its content (for example, the complexity of its vocabulary) and its typography. In my previous post about readability, I gave tips to make sure the complexity of your text is adapted to your audience.

Typography is the science of arranging your letters in order to make written text readable and appealing. Before digitization kicked in, typography was a specialized occupation, nowadays typography is something everybody has to deal with, at least everybody who owns or maintains a website. Typography involves selecting typeface (font family), font size, line length, line-spacing and letter-spacing.

Font

Font size

Make sure you use at least 14 pixels for your font size. That size is a good read on both the larger desktop screens and our mobile screens. The preferred font size for a website nowadays is much larger than it was ten years ago. Back then, a font of 10 pixels allowed you to add more text to a page and made your page look more like a book. With the growth of computer screens, nowadays 16 pixels is very normal.

Font color

What font color to use is largely depending on the type of blog you have and what design your website uses. In general, we say that using a black font on a white background is still the best read. The general thought is that outlines are sharper and letters are easier to distinguish and identify.

Learn how to write awesome and SEO friendly articles in our SEO Copywriting training »

SEO copywriting training Info

The one thing you should do regarding font and background color, is test the contrast of your font color and background. There are a number of tools available, all with their own kind of contrast checker. A really easy and good one is Colorable. Colorable allows you to enter the foreground (text color) and background (background color). It will tell you immediately if the contrast is right or wrong and what score the combination of colors gets. Colorable is based upon the WCAG accessibility guidelines.

Whitespace

Next to font size, you also want to make sure that the text has sufficient room to breathe. If you’re using a larger font size, but forget to add whitespace for headings and paragraphs, your text will still be unreadable. Whitespace is especially important on a mobile device.

Besides adding enough whitespace between headings and paragraphs, you should also add enough whitespace between the lines. If you neglect to add a proper line height, your well-constructed sentences become one big block of letters. This is far from user-friendly and will make your page very unappealing for a visitor.

using whitespace to improve readability

Typography of links

The design of the links in your texts itself is important. Of course, backlinks are important for SEO. However, the design of the links is important for Usability. Make absolutely clear what’s a link and what isn’t. You can do so by picking a different color or by adding an underline.

To emphasize the link you can easily combine the two options above. Also make sure you change the style when hovering your mouse cursor over the link. Remove the underline or change the color.

Line length

A final thing to consider when it comes to typography is the length of your text lines. In Readability: the Optimal Line Length, Christian Holt mentions a number of suggested text lines, stating these should be 50 to 65 or 75 characters. Ilene Strizver states that non-justified text should be 9 to 12 words per line, and justified text should be 12 to 15 words. From our experience, 10 to 15 words is indeed a good read.

Conclusion

Making sure your text is nicely written and not too difficult is only one aspect of readability. In order to read a text properly, the typography of your text should be OK too. Make sure to use a decent font size, think about the contrast of the colors you use and add whitespace. Focusing on both aspects of readability (typography and difficulty) will make sure that people will start and keep reading your blogposts.

Read more: ‘5 tips to improve the readability of your post’ »


14 Responses to The importance of typography

  1. Vietcetera
    By Vietcetera on 19 April, 2016

    Back to the drawing board ;) Going to tweak words per line, toughest part will be to make it look good on both desktop and mobile. Thanks for the advices.

  2. Manny Gaser
    By Manny Gaser on 18 April, 2016

    thanks for some parameters for text, very useful this post, thank you!

  3. M.C. Simon
    By M.C. Simon on 14 April, 2016

    Good article, Marieke! Thanks for writing it. I was always wondering about the best font size. Happy to hear that it’s 14 :) . Also, I never thought about the line length… for sure I will, from now. Justifying the text is a must do for my eyes. What’s your opinion about it’s importance?

    • Marieke van de Rakt
      By Marieke van de Rakt on 14 April, 2016

      We do not justify our texts; at least not on the web. Opinions about justifying text (whether or not it increases or decreases the readability) greatly differ, even among scientists. But justifying text does appear to cause extra difficulties for dyslexic users, so that could be a reason not to do it.

  4. Claire Brotherton
    By Claire Brotherton on 14 April, 2016

    I like the clarity of the text on your blog. It’s easy to read. You practice what you preach.

    I wouldn’t use justified text though. It’s hard for dyslexic users as it creates uneven white spaces, which can be distracting.

  5. Dumaji
    By Dumaji on 14 April, 2016

    I’m going to start implementing the above strategy. White space in between headline and body text is the important key factor which was missing on my page.

  6. rakhi sharma
    By rakhi sharma on 12 April, 2016

    Thanks For Sharing This Information With Us Typography is most Important factor in website Optimization. Tenspark Software Solutions

  7. rakhi sharma
    By rakhi sharma on 12 April, 2016

    Thanks For Sharing This Information With Us Typography is most Important factor in website Optimization.

  8. ankit
    By ankit on 12 April, 2016

    Typography is also an important part of website optimization.
    If your user like your sites content and design its enhance the visibility of your website. Thanks for the important info.

  9. Langlumé Didier
    By Langlumé Didier on 10 April, 2016

    Bonjour,
    Je suis conscient que vos remarques sont trés pertinentes et essaye de les appliquer. En tout cas, je vous remercie pour le partage de vos compétences.

  10. Don Peterson
    By Don Peterson on 10 April, 2016

    I have been designing websites long enough to remember when we were determined to use tiny fonts to mimic the look of print design and, to hide the sheer ugliness of online fonts at larger type sizes. Thankfully, we have moved beyond that! Beautiful font choices and the realization that the Web is not print design has enhanced online legibility. I offer a few of my own online legibility tips here: http://webdesignportfolio.us/creating-legible-text-in-web-design/

  11. Janmejai
    By Janmejai on 9 April, 2016

    Choosing a font for website is the most difficult task, as you have to choose a font that a user will like not you.

  12. David Boozer
    By David Boozer on 7 April, 2016

    For some this could be a boring subject Marieke, but it is an important one as even today, in 2016 there are still blogs and websites with poor font use and formatting… Thanks for the reminder!

  13. Towhid
    By Towhid on 7 April, 2016

    Great Marieke, I truly believe typography is one of the underrated areas when it comes designing websites. We recently published a huge list of web typography resources.

    https://optimizerwp.com/web-fonts-resources/


Check out our must read articles about User eXperience (UX)