What? Why is this useful?

Type Rendering Mix is useful in many situations. Let’s say you are using Proxima Nova on your website. Below you can see how the “thin” weight will look in OS X and Windows 7. Due to the way the Core Text rasterizer works, fonts will look heavier on OS X and iOS than on other platforms.

“Proxima Nova Thin” rendered using Chrome on OS X (left) and Windows 7 (right). Note that OS X renders text heavier compared to Windows 7.

Designers often attempt to create consistent font rendering by applying -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale . This will make type appear lighter, but it also disables sub-pixel antialiasing which results in text looking more blurred.

From left to right: the letter “a” rendered without antialiasing, with grayscale antialiasing and with subpixel antialiasing.

Using Type Rendering Mix you can instead decrease the font weight for browsers that use Core Text to render text. By only applying changes when Core Text is used you will achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing.

.tr-coretext { font-weight: 100 ; }

Another use case for Type Rendering Mix is to disable web fonts when no antialiasing is applied. In the following example we fall back on “Verdana”, one of the core web fonts that is known to render well when antialiasing is disabled.

.tr-aa-none { font-family: Verdana, sans-serif ; }

You can also disable web fonts if you know that they render badly on some text rasterizers.