#Webkit font smoothing full

Subpixel anti-aliasing uses a similar technique, but with the full RGB color pallette. When each red, green, and blue light are illuminated the same, the pixel appears to be gray. The same principle applies for the pixels in grayscale anti-aliasing.

Remember that hexadecimal color values have 2 hex digits for red, 2 digits for green, and 2 digits for blue? Note that when those values are all the same ( #eeeeee, #222222, or #666666), the color is a shade of gray. Note that in the highlighted pixel, the red and green lights are illuminated but the blue is not. Note that the highlighted pixel is partially illuminated (with each red, green, and blue light illuminated the same amount). These photos were taken of 24px text using the Times typeface displayed on an LG UM95 Ultra Widescreen monitor (109dpi, a low DPI makes it easier to see).Īnti-aliasing is disabled. When you zoom in on the image, you can see the individual pixels-each with their own red, green, and blue lights! Fascinating!Ĭompare the three different modes below. Sorry, your browser doesn't support embedded videos. They’re pretty distorted around the edges because of the lens, but they’re good enough to see what’s going on.

To get a closer look, I strapped a cheap 25x macro lens to my smartphone and took some pictures. Try it out on this page # Anti-aliasing: None Grayscale Auto Subpixel What’s the difference between these modes? #

Let the browser decide (Uses subpixel anti-aliasing when available this is the default).

-webkit-font-smoothing: subpixel-antialiased.

Grayscale anti-aliasing (also known as Full pixel or Traditional anti-aliasing).

In my tests, Firefox had no mechanism to disable font smoothing 👍.

But before we dive in, let’s level set on what the values for these properties are: The full browser support matrix is available under font-smoothon Can I Use. There are two non-standardized, implemented vendor-prefixed properties to control anti-aliasing on text: -webkit-font-smoothing and -moz-osx-font-smoothing. Here’s what I learned.Ĭontrolling anti-aliasing modes in CSS is easy. Before writing this post, I didn’t know very much about anti-aliasing-so I decided to learn everything I could about it to better understand the reasoning behind a decision like that. Recently, Twitter made a global anti-aliasing CSS change to their website.

Webkit font smoothing