Improve Your Readability Easily!

This post was published 5 years ago. Some things may have changed since then - use the search function to see if anything has been posted since then, or reach out to us on Twitter if you'd like to see a more updated post!

This is going to sound really obvious, but people reading your blog prefer a nice, clean layout with no unnecessary interruptions. If your blog posts are full of random colours, fonts and sizes of text, then people are less likely to read it. Think about your own reading habits – would you be happy reading a whole bLoG pOsT lIkE tHis?

Thought not ;) (please don’t say you do, that was so painful to create!)

If you want to change the colour or font of your text, then it’s much better to do this in CSS than by using the post editor to change each post individually. Not only does this mean that it’s less work for you (change one section instead of amending 500 blog posts? Why wouldn’t you want to do that?) but it also means that if you change your blog layout, then all posts will match each other when you update the layout files. If you like to use colour to emphasise something, don’t worry – you can still do that! You may have noticed that when something is italicised on this site, it also turns purple. This is because in the CSS file, the section for <i> looks like this:

 .i { color:#6500e2; }

Changing the style of your text in a CSS file also means that when someone reads your blog in a RSS feed reader like Feedly, then they won’t get all the random bits of formatting that you’ve gone for – they’ll just see the text and images from your post.

Typically, sans-serif fonts are easiest to read on a screen. What is a serif, you might be wondering! Serifs are the extra little bits on the ends of some letters. Take a look at the below image, which should hopefully explain it a little better.

Popular serif fonts will include Times New Roman, Georgia and Palatino. Popular sans-serif fonts include Arial, Helvetica and Trebuchet MS. Monospaced fonts are ones where the letters and characters are the same size – Courier New is a good example of this type of font.

We’ve looked at colours for fonts before – you would want to go for a colour combination that isn’t too close together (so yellow on green probably wouldn’t work very well) – something like a very pale background will work best with a very dark font colour

Using headers to split up your blog posts might also be useful. You may have noticed that on some of our posts, there will be headers to split up the posts. This is done with tags like <h1>, <h2>, etc. Using these headers isn’t just good for readability purposes, but also for SEO ones. Search engines will know that a heading in a <h1> tag is more important than one in a <h3> tag, for example. (Heading tags are ones where you have to close them after you are done, so a heading in a <h2> tag should be formatted like this in your HTML view:)


What tips do you have to help with readability?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: