text-rendering: optimizeLegibility;

[Historical Forums User]

What exactly does this do?

text-rendering: optimizeLegibility;

[Paulie_D]

http://bit.ly/16EdvYH

[Chris Coyier]

Good before/afters here http://aestheticallyloyal.com/public/optimize-legibility/

[chrisburton]

`text-rendering: optimizeLegibility` enables OT features such as kerning that would normally be set by the browser while also enabling ligatures. From what I’ve read, Firefox automatically has this turned on when the font-size reaches 20px or above. Perhaps @chriscoyier could add this property to the Almanac?

Without text-rendering: optimizeLegibility

With text-rendering: optimizeLegibility (ligatures)

---

Without text-rendering: optimizeLegibility

With text-rendering: optimizeLegibility (kerning)

@Paulie_D text-rendering isn’t that easy to understand in general, especially to those just starting out.

[chrisburton]

Also, just to point out, there’s a bug in Chrome that disables `font-variant: small-caps`. Unfortunately, it still hasn’t been fixed.

[CrocoDillon]

Great explanation, I always thought it was weird I didn’t see much difference. With those examples I (as a typographic newb) know what to look for :) I should probably Google this but since we are already on this subject I’m tempted to blatantly ask if there are other css properties that improve text rendering I should know about? (any way to get Firefox on Windows to anti-alias large fonts? It’s fugly…)

[chrisburton]

Trent Walton wrote an article with an image showing the results of using `optimizeLegibility` compared to not using it (below).

Optimized / Normal

any way to get Firefox on Windows to anti-alias large fonts? It’s fugly…

I’m not aware of any. But if you provided a link I could take a look.

[CrocoDillon]

> But if you provided a link I could take a look.

Took some time but I only went live last night so: http://www.crocodillon.com/ … well, it’s not that fugly but it’s not smoothed either (in FF on Windows).

[joemesot]

So I am using the Foundation 5 framework from Zurb to help with a RWD. I needed to find the occurrence of a persons name in all of the content and then link it to their bio.

So I opened the pages in chrome (version 33) and did CTRL + F to find the persons name. The search bar said 1 of 4, but no text was highlighted on the page. I was a bit perplexed at first and thought maybe I spelled the name wrong. Then I noticed that clicking and dragging to highlight any type on the page resulted in… nothing… no text could be selected.

Foundation includes two style sheets: foundation.css and normalize.css. So I quickly searched through them for any webkit-appearance definitions or :: definitions to see if somewhere in there the process of selection was disabled somehow. I found nothing.

So I opened up the inspector and began looking at the properties applied to the p tag, which is when I ran across this “text-rendering: optimizeLegibility”. I unchecked it just to see what would happen, and viola, I am able to highlight text again.

Also, my boss, when viewing the site, would occasionally have the font disappear. It was there in the DOM and the source, but the browser just did not render it for whatever reason. Disabling text-rendering fixed the “disappearing” text issue as well.

I don’t know if these a bugs or not, but according to MDN:

The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux.

Just thought I would share this little tidbit of information.

[Author]

Posts