3 CSS Rules To Improve Your Site Readability

While a blog with original and useful content can improve your business, ugly and unreadable blog can drive away customers.

Typography is important — avoid bad practices!

Bad readability = interest killer

Sometimes when I land on a page, genuinely interested in the topic, I stop reading after first few lines and skim over the rest of text. I simply can’t keep my focus. And when I discovered Medium and saw how clean and sexy it is, I found the root of the cause. The content is so well presented that it was easy for me to read even the longest articles. I found myself using Medium as inspiration for designing any page that contains large bodies of text and found the root of this pleasant experience in just 3 simple CSS rules.

I’m not a designer or UX expert and don’t think of me as an authoritative figure on this topic. I just found what works for me, if you have any criticism or ideas how to improve readability of content yourself, feel free to leave them below.

Fix suggestion

The root components for content readability are: 
 — font-size (no shit, Sherlock) 
 — font-weight 
 — line-height

By changing only these few parameters, I managed to improve readability of several popular pages.

These are the magic rules I found to work the best:

line-height: 180%; 
font-size: 20px;
font-weight: 100;

Real Life Examples

Example 1: Inchoo.net

As their CEO Tomislav loves to say, Inchoo’s blog is one of their core business drivers. These rules make a difference, don’t you think?

If you were a customer, which site would you spend more time on?

Inchoo’s blog after applying 3 simple CSS rules

Example 2: Softwarecity.hr

Even though they already had pretty good readability, there is room for improvement. Line height was pretty good, all we needed to do was increase the font size a little bit.

Example 3: FOI.hr

FOI had serious redesign few weeks ago, but we can see that some readability progress is easily achievable.


Originally published at itworkslocal.ly on February 19, 2016.