Quick Tip: How to Consistently Render Typefaces Cross-browser

In this quick tip I’m going to show you how to apply CSS based on each browser’s text rendering engine.

Watch Screencast

Here’s the thing: depending on your browser and operating system the text displayed by your browser will be rendered differently. That can be problematic for designers, particularly those who focus on perfecting typographic details such as the typeface, the size, the weight, the spacing, and so on.

This library detects the text rasterizer and the antialiasing method used by the browser and adds classes to the html element to reflect the results, for example:

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

In our example above, we may want to reduce the weight of the blockquote in Chrome. Having loaded Type Rendering Mix into the page, a quick inspection reveals that the class tr-coretext has been applied in Chrome, reflecting the fact that it makes use of Core Text (Mac OS and iOS) for rasterizing.

We could then specifically target our heavier text by adding a rule like this to our CSS:

.tr-coretext blockquote {
font-weight: 300; // lighter weight
}

Conclusion

Type Rendering Mix has been around a number of years now, but it’s a simple and solid tool, offering reliable help to designers who want to tweak the way their type is rendered across different browsers.