If you've ever noticed that text on your website looks a bit jagged or pixelated - especially on certain browsers or high-resolution displays - this simple CSS snippet can help smooth things out.

Font rendering can vary significantly between browsers and operating systems. macOS tends to use subpixel antialiasing for crisp text at smaller sizes, while some webkit-based browsers (like Chrome on macOS) might default to a grayer, less sharp appearance. Adding font smoothing properties can force better antialiasing and legibility.

The following CSS applied globally (or to specific elements) often resolves these issues:

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

How It Works

• -webkit-font-smoothing: antialiased; – Primarily affects WebKit browsers (Chrome, Safari) on macOS, switching from subpixel antialiasing to grayscale antialiasing, which can reduce jagged edges on thin fonts.
• -moz-osx-font-smoothing: grayscale; – Enables grayscale antialiasing in Firefox on macOS for a similar effect.
• text-rendering: optimizeLegibility; – A standard property that hints to the browser to prioritize readability, enabling better kerning and ligatures where supported.

Note: These properties are most noticeable on macOS. On Windows or Linux, the impact might be minimal since those systems handle font rendering differently. Also, some designers prefer the default rendering, so test thoroughly on your target devices.

This quick fix has been a go-to for many developers dealing with inconsistent text appearance across platforms. Give it a try if your fonts are looking a little rough around the edges!

Posted on kruxor.com – CSS tips and code snippets.