Why this simple CSS snippet makes your fonts look so much better

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;
}

If you’ve ever noticed your fonts looking slightly blurry, heavy, or just not quite right — especially on macOS or iOS — you’re not alone. Typography plays a huge role in how polished a website feels, and this tiny CSS snippet can make a massive difference.

Let’s break down why this works and what each line actually does.

1. -webkit-font-smoothing: antialiased;

This is specifically for WebKit-based browsers like Safari and older versions of Chrome.

• What it does: Forces the browser to render fonts using grayscale antialiasing rather than subpixel antialiasing.
• Why it matters: Subpixel rendering can make fonts look bolder or fuzzier, especially on retina screens. Grayscale antialiasing produces cleaner, thinner, and more consistent letterforms — closer to what you’d see in design tools like Figma or Sketch.

2. -moz-osx-font-smoothing: grayscale;

Same idea, but for Firefox on macOS.

• What it does: Switches Firefox’s default text rendering to grayscale smoothing.
• Why it matters: Just like in WebKit, this helps create cleaner, sharper type — especially helpful for light font weights or high-resolution screens.

3. font-smooth: always;

This one isn’t a standard CSS property (yet), and it’s largely ignored by modern browsers — but developers still include it for future-proofing or legacy fallbacks.

There may also be large incompatibilities between implementations and the behavior may change in the future.

4. text-rendering: optimizeLegibility;

This one is the most interesting.

• What it does: Tells the browser to prioritize legibility over performance when rendering text.
• Why it matters: Enables features like ligatures and kerning, which can subtly improve the flow and readability of text. For example, the combination of “fi” or “fl” will appear more naturally connected, like how a designer would intend.

TL;DR — Why Use This?

When combined, this CSS snippet:

• Reduces font blur and visual heaviness
• Makes letterforms appear thinner and more professional
• Unlocks subtle typographic improvements like kerning and ligatures
• Makes your type look more like a design, not a default browser render

Whether you’re polishing a landing page, refining a UI, or just care about sharp aesthetics, adding this one-liner to your CSS can elevate your design significantly.

Bonus Tip

Pair this with a high-quality web font and consistent line-height/letter-spacing, and you’ve got a solid foundation for beautiful typography across your app or site.

Want help tuning up the rest of your font stack too? Let me know — happy to dive into font choices, fallbacks, and responsive type scales with you.