How to increase readability on a website

GiantCowFilms posted this on Monday, December 7th 2015 at roughly 2 o'clock in the afternoon

Fonts are generally the key; however, changing fonts isn’t always so easy, and often it seems like it doesn’t help. This is where one simple trick comes in: Increasing the line-height.

This can be done using the css property

{
    line-height: 20px;
}

which will set the line height of some text. The line height is the amount of vertical space text consumes. Here are two examples with different line heights, the first set to 15px, and the second set to 35px.

Towering hundreds of feet into the sky, Giant Cows have giant needs. Infact, a Giant Cow can eat up to 20 tonnes of small vegetation and trees in a day. Furthermore they often will graze over a hundred square miles in a day!Commonly inhabiting areas lush with vegetation, Giant Cows can be found on nearly every continent. Scientists have often had trouble explaining this phenomenon, since it is unlikely they could have swam.

Towering hundreds of feet into the sky, Giant Cows have giant needs. Infact, a Giant Cow can eat up to 20 tonnes of small vegetation and trees in a day. Furthermore they often will graze over a hundred square miles in a day! Commonly inhabiting areas lush with vegetation, Giant Cows can be found on nearly every continent. Scientists have often had trouble explaining this phenomenon, since it is unlikely they could have swam.

Getting the right value depends on the font height, but generally +5-6px produces the best results. If making these changes still doesn’t help, it is probably worth looking into changing the fonts.

Tags: , , , ,

More Blog Posts

Star Wars VII – The Characters without the Magic
Commence Blog!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Add something contstructive to the conversation