How to Optimize Legibility to Increase Readability of Text

How can you Optimize Legibility to increase readability of your long articles. Online screen reading is an important consideration for web designers as people resort to more reading activities in search of information online. Getting the easiest reading experience is important.

Optimize Legibility

Well there is a simple line of CSS code which can drastically change the way text is displayed on desktop and laptop screens. The text rendering is a CSS feature supported by modern browsers which allows them to render text is such a way to make it easier to read.

See the difference.

optimize legibility

Normal text on top with no text optimization and below with OptimizeLegibility turned on. The browser has moved the letter w below T in Tweet word for easier readability.

We apply the following CSS code to body which applies the text tendering to the entire web page. You can choose to add it to the entry-content only if you so desire, while not affecting other web components.

body {
text-rendering: optimizeLegibility;
}

So what does OptimizeLegibility code exactly do?

This code instructs the browser to emphasize legibility (optimizeLegibility), and make it a priority  over other important text rendering characteristics like rendering speed (optimizeSpeed) and geometric precision (geometricPrecision). This also enables kerning and optional ligatures!

It reduced the spacing between characters. This is not same as letter-spacing (which reduces or increases spacing between ALL characters by a fixed pixels), which we use to condense headlines.

letter-spacing: -1px;

optimizeLegibility actually smartly reduces space between characters when actually needed to remove unnecessary space and give cleaner copy for easier reading. Try it on your site.

Get free awesome tips by email




Unsubscribe anytime. No spam. 10,000 subcribers
Sendy Self Hosted NewsletterSEMrush

9 Comments

  1. karan Rrawat says:

    The given code is working fine for me! thanks to optimize my legibility!
    thanks
    karan

  2. Michael says:

    I like the idea of optimizing for readability. But, the same can likely be achieved by increasing the font-size. Or, using font families that are naturally readable. Good article, though!

  3. Danrubby says:

    First thank you to shear the code and its work great. I think this type of posting can help people who are interest to optimize.

  4. Anu K says:

    Hi,
    Thanks for the post and the given code. It’s working smoothly.

  5. Santosh says:

    Thanks to optimize my legibility!

  6. Ryan Thomous says:

    Very nice topic sharing with us, I would like to thanks you for sharing readability optimize topic and thanks for providing code.

  7. Sajith anandan says:

    The display of text in terms of the font, alignment, spacing etc is most often the most ignored aspect of web content . These tips help you out of this predicament proactively as well being easy to implement! thanks

  8. Fahim Zada says:

    Agree i am going to apply this on my blog thankx :)

  9. Archana Dhawan says:

    Thanks for share very informative post, this is nice code for optimizing legibility.
    This code is good for reducing the spacing between characters.

Leave a Reply

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