Comments on: text-rendering

By: Randy

Randy — Mon, 20 Mar 2017 17:19:45 +0000

In reply to Adam.

I had this problem with the combination of Helvetica Nue font. So after changing the value to auto, the texts are showing well on Safari browser.

Therefore, this css property won’t work for some fonts. That’s why we should always test our site on different browsers and devices. :)

Thank you @Adam!

By: Artur Kohut

Artur Kohut — Tue, 11 Nov 2014 19:05:40 +0000

In reply to Mike Mai. html:not(.touch) or initial value for .touch would be better.

By: Nitesh

Nitesh — Sat, 09 Aug 2014 19:21:39 +0000

In reply to Adam.

HI Adam,

I also faced the same problem, can I know how did you fixed it?

Thanks in advance
Nitesh Mittal“

By: Mike Mai

Mike Mai — Mon, 30 Jun 2014 22:32:42 +0000

The font I use for my blog has pretty nice kerning and ligatures, so I am pretty confident of using the following (requires modernizr):

* { text-rendering: optimizeLegibility; }
html.touch * { text-rendering: optimizeSpeed; }

Optimize speed just for touch devices.

By: pudgereyem

pudgereyem — Wed, 28 May 2014 04:51:22 +0000

FYI: This is broken in Android 4.3 (and maby 4.2?), so you would probably have to use some kind of User Agent Sniffing to fix that.

By: Adam

Adam — Fri, 09 May 2014 15:36:48 +0000

Just wanted to point out, optimizeLegibility renders empty paragraphs in Safari 5.1.7 for Windows. Text is still in the DOM, just not displayed (paragraph is fully collapsed). Font is Open Sans.

By: Chris Coyier

Chris Coyier — Thu, 06 Mar 2014 14:08:45 +0000

In reply to Gilles FRANCOIS.

thanks fixing.

By: Dan

Dan — Thu, 06 Mar 2014 10:37:39 +0000

In reply to Gilles FRANCOIS. He's right, you know:

The text-rendering property in CSS allows you to choose quality of text over speed

Good article - particularly the notes on its performance. My preference is to use on pull quotes and headlines in magazine-style layouts.

By: Kseso

Kseso — Wed, 05 Mar 2014 22:13:12 +0000

If you don´t like ligatures there is the property font-variant-ligatures: none or font-feature-settings: none for disabled them. But Css ligatures are "fun" [es-es]

By: Gilles FRANCOIS

Gilles FRANCOIS — Wed, 05 Mar 2014 22:12:27 +0000

Hey Chris,
Not sure about that because my English is Rusty, but I think there is a word (or two) missing in your first sentence.

Anyway, good stuff, as always !