The battle for consistent font smoothing is a universal struggle for web designers. Photoshop has its own proprietary way of displaying type, none of which accurately reflect browser rendering. Every browser renders type in its own way AND even operating systems have their own method of text rendering. Oy!
Consistency just doesn't seem to exist in the type rendering world. However, channeling my frustration into productivity, I did successfully implement a little trick in Google's Chrome & Safari (Mac OS) to counteract this dilemma.
Note: Before I dive into this technique, this is a solution for now, and while it works, its effectiveness is not definite.
Sub-Pixel Rendering
Sub-pixel rendering is:
Subpixel rendering is a way to increase the apparent resolution of a computer's liquid crystal display (LCD) or organic light-emitting diode (OLED) display by rendering pixels to take into account the screen type's physical properties. Source
What this means is the typeface, regardless of how it is being served (Typekit, Google, @font-face) is loaded and then computed at a sub pixel level. The smoothing happens in a space we can't see easily.
Because of this, some browsers (looking at you Chrome & Firefox) take beautiful, slender fonts and bloat them, making the edges appear jagged, losing the quality of beautiful, crisp shapes us designers crave in web type.
You Might Be Working With a Font That Doesn't Need Subpixel Rendering
This fantastic article from UsabilityPost does a good job illustrating why you should not remove sub-pixel rendering. This has been the de facto standard, working its way into many UI/UX practitioners toolbox. However, this article is more than a year old, and we are in a very different space then 2012.
High-PPI monitors and devices are changing how type is rendered and it wasn't until I got a retina MacBook Pro that my gears began to turn.
High-PPI Monitors Give us Leeway
Sub-pixel rendering is not an issue on retina devices. This is due to the high amount of pixels. The double pixels mean the canvas has twice the amount of space to render a font. I noticed right away that typography on a retina device is beautiful, the likes of which I set out to replicate on non-retina screens.
Here's My Solution:
I have been using this solution in a select few cases and it appears to have no detriment to a codebase. Note that this only works in Chrome on Mac OS X
First, I remove sub pixel antialiasing by using the antialiased property:
html { -webkit-font-smoothing: antialiased; } Then, I take it one step further and target higher pixel density screens by using this media query fantastically crafted by Mike King, edited to only affect Chrome & Safari:
@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { -webkit-font-smoothing: subpixel-antialiased; } The Rule
Custom fonts are becoming the web design standard and as more fonts are optimized for the web, less and less typefaces require sub-pixel antialiasing. This technique does not work with every typeface though and should be tested extensively. In addition, an extra sensibility is required when dealing with light type on a dark background.
If the typeface is optimized, you will have typography that shines on both retina and non-retina screens (only in Chrome on a Mac, but hey, that's better than nothing).
Check out my codepen for a demo
Keep the conversation going! We'd love to hear from you.
