Type Rendering Mix

View source on Github

Get Type Rendering Mix, read the instructions and start styling!

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.

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.

<htmlliteral">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.

Share:

Related Articles:

This entry was posted in Freebies, Resources, Web Design News and tagged , . Bookmark the permalink.

One Response to Type Rendering Mix

  1. Keira says:

    It’s a pity you don’t have a donate button! I’d
    certainly donate to this fantastic blog! I guess for now i’ll
    settle for bookmarking and adding your RSS feed to my
    Google account. I look forward to new updates and will talk about
    this website with my Facebook group. Chat soon!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>