WP-Mix

Working with text in Chrome (and other Webkit-based browser) and Firefox can be frustrating. Depending on context, certain fonts may be displayed weird: too heavy, too fat, too thick, and so forth. So much so that the text can look distorted and difficult to read. Fortunately, we can apply the CSS font-smoothing property to make text clearer, thinner, and easier to read.

CSS Font Smoothing

Clean up sub-pixel rendering and improve text display in Webkit (Chrome) and Mozilla (Firefox) with the following CSS rules:

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
	}

Here we are “smoothing” fonts via the font-smoothing property (and its vendor-specific equivalents). Declaring a value of antialiased for these properties usually does the job, but there are some alternate values that may work better, depending on which fonts you are using, background and text color, and other variables. Here are the possible values (that I know of, there may be others):

• antialiased – Cleans up text, makes it thinner, improves display
• subpixel-antialiased – Cleans up light text on dark backgrounds
• auto – Default value, browser determines how fonts are displayed
• none – Disables the property
• inherit – Inherits this property from its parent element
• grayscale – Cleans up light text on dark backgrounds (-moz- only)

Of these property values, antialiased is used the most. Also, grayscale frequently is used instead of antialiased for Mozilla because it tends to produce better results in Firefox. So instead of the previous CSS snippet, most designers prefer this instead:

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	}

Just to emphasize that the only difference between this code and the previous is that here we are using grayscale instead of antialiased for -moz-osx-font-smoothing. FWIW, this is the code that I use on many of my own sites, simply because it just works. Of course, instead of applying the font-smoothing properties to everything via the body selector, you can apply the styles to a particular element, like h1, p, or whatever requires it.

CSS Text Rendering

Another commonly seen property for improving text display is text-rendering with a value of optimizeLegibility. As far as I know, this is an older technique that was used before the font-smoothing property was fully implemented. You may have encountered it, something like this:

body { text-rendering: optimizeLegibility; }

While this technique continues to have an affect on font-display in most browsers, it’s known to cause more harm than good in terms of side-effects. For example, it can cause pre tags to display incorrectly, and also cause weird bugs in other elements. So it’s best to avoid this property unless you need to clean up font-display for a specific element and none of the font-smoothing techniques will do the job. I.e., don’t use unless you understand the potential side-effects.