Advertisement
  1. Web Design
  2. Web Typography
Webdesign

Quick Tip: How to Consistently Render Typefaces Cross-browser

by
Difficulty:BeginnerLength:QuickLanguages:

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.

Browser type render
The same page shown on (left to right) Chrome Mac OS, Internet Explorer, Microsoft Edge

If you aim for more consistency in your designs, a JavaScript library by the name of Type Rendering Mix by living typography legends Tim Brown and Bram Stein will help you out.

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:

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:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.