Is It Safe to Use the CSS Rule "Text-Rendering: Optimizelegibility;" on All Text

CSS Font smoothing HTML emails

They both work, but what you're seeing is a quirk of GMail- it doesn't like css3. There isn't anything to my knowledge you can do about it. https://www.campaignmonitor.com/blog/post/3107/css3-support-in-email-clients/

^dated 2010, and doesn't mention font-smoothing, but it is still css3 and it still holds true for gmail.

Try opening the same email in Apple Mail, or on an iphone/android, and the fonts should be smoothed.

P.S optimizeLegibility is a bad idea, it can crash android < 2.3 and cause problems elsewhere. See below:

Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?

Chrome is randomly displaying unreadable words when using optimizeLegibility on headers and paragraphs

Ok so we finally found what was wrong:

Foundation puts text-rendering:optimizeLegibility by default on all <h> and <p>.

Looks like this css property behaves really buggy with chrome, you can read more about the problem here:

Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?

https://code.google.com/p/chromium/issues/detail?id=39017

It looks different from the bug issued above, but it has the same behavior although in different circumstances.

From what we have experienced it happens when:

- you load a custom font from Google Web Fonts

- you load one or more JS files in your page

- you have set text-rendering:optimizeLegibility on text elements and there's an <a></a> inside OR wrapping the text element

it happens really random and it's not easy to reproduce.

The solution was just to set the SASS variables that use this property in Foundation to text-rendering:none !default; and everything went in his place.

Hope this helps.

Iconfont / webfont not showing in iPhone safari browser

The problem is that IOS provides partial support for font-feature-settings CSS property but you can use ligatures in iOS Safari adding text-rendering: optimizeLegibility. The following link (http://clagnut.com/sandbox/opentype/ligatures) shows a text using the font Magenta with Common & Discretionary Ligatures ON and other text with Common & Discretionary Ligatures OFF.

If you access this link from an iOS device you will see that both texts are equal. This means that iOS does not support ligatures only with font-feature-settings and that is why the gyphs in your typography do not work on iOS.

To make it work in iOS, you'll have to add text-rendering: optimizeLegibility to your css. A good reference may be "Tomorrow’s web type today: The fine flourish of the ligature". But, you should read "Is it safe to use the CSS rule “text-rendering: optimizelegibility;” on all text?".

You will find an example of your font working in iOS in the following link:

http://jsfiddle.net/poselab/TQjgC/

text-rendering: optimizeLegibility;

A screenshot of this jsfiddle from an iPhone:

Inconsistent text rendering between iOS and Mac

SOLVED

Use Typekit instead of Google font.

You get what you pay for.

Here's the code which did the trick.

<script>
    WebFontConfig = {
      typekit: { id: 'xzw9acq' } // Typekit kit containing Lato
      //google: { families: ['Lato'] }
    };
    ... rest of font loader script
  </script>

Letters Connected in Safari

From your image, it does not look like a letter-spacing issue, as your first idoes not have the dot on top of it. You might have the css property font-variant-ligatures set to common-ligatures. Try setting it to no-common-ligatures.

EDIT:

Based on the provided jsfiddle, replacing text-rendering: optimizeLegibility with text-rendering: optimizeSpeed; solves your problem.

Here's a more detailed explanation on text-rendering.

---

Related Topics