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.

Advertisements

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.

  1. Hitasoft says:

    Thanks for sharing a informatic post, lot of bloggers including me also struggled such kind of issues

  2. karan Rrawat says:

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

  3. 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!

  4. 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.

  5. Anu K says:

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

  6. madhu says:

    This is really interesting, thanks for bringing this info to me. Now i feel i got to know something better.
    Thanks again.

  7. Santosh says:

    Thanks to optimize my legibility!

  8. What an website! I would like to visit this again and again.I think the content of this website will really help me.I am a begginer for web design. I will keep in mind your idea.thanks for sharing.my facebook id

  9. 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.

  10. Karan says:

    Hello Author,

    This is a great post. I’m sure that many of the people would not have ever though of it.

    Thanks!

  11. This is Really nice and Helpful Post. Thank you So Much for Sharing with us . Keep up This Good writing.

  12. i must admit that i do strugle sometimes and face these issues. But your tips did help me in having a better understanding! Thank.
    I am bookmarking this

  13. I am impress you have nice command on writing you know exactly how to play with words.

  14. 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

  15. Rashed Khan says:

    That is really intriguing, thanks regarding bringing this kind of info if you ask me. Now i’m i have got to know one thing better.nice blog i love this idea.

  16. Fahim Zada says:

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

Leave a Reply

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


Share

Free Tips Newsletter

10,000+ subscribers / More info »

css.php