Type Rendering Mix

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.

How does it work?

Download and include trmix.min.js (or the trmix.js debug version) anywhere in your HTML page. If you are using Bower you can also install Type Rendering Mix with bower install trmix.

<script src="trmix.js"></script>

Reload your page and Type Rendering Mix will detect your browser’s text rasterizer and add two classes to your HTML element. One class will describe the text rasterizer and the other the antialiasing method.

<html class="tr-coretext tr-aa-subpixel">

The text rasterizer class can take the following values:

tr-coretext for OS X and iOS;
tr-gdi for Windows XP and Windows Vista SP1;
tr-directwrite for Windows Vista SP2 and above;
tr-freetype for Android and Linux.

The antialiasing method class will be one of the following:

tr-aa-none when no antialiasing is applied;
tr-aa-grayscale when grayscale antialiasing is applied;
tr-aa-subpixel when subpixel antialiasing is applied.

If Type Rendering Mix can’t determine the antialiasing method with absolute certainty it will attempt to guess. In this case unknown will be added to the class name. The resulting classes are:

tr-aa-unknown-none when aliasing is guessed;
tr-aa-unknown-grayscale when grayscale antialiasing is guessed;
tr-aa-unknown-subpixel when subpixel antialiasing is guessed.

When it is impossible to determine or guess the text rasterizer and antialiasing method tr-unknown and tr-aa-unknown will be used to indicate an unknown text rasterizer and antialiasing method.