← Back
July 22, 2020

Optimize font rendering with CSS

Are you wondering why your fonts look chunky when designing a website? Here's why.

Have you ever designed a beautiful website in Figma that ends up looking very different when live?

Don't blame yourself or any front-end developer - it's the way fonts are rendered in the browser.

But there's a solution. We can utilize the text-rendering CSS property to make our font sharper.

You can try adding these properties to your whole body:

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

One such technique is called anti-aliasing, which uses partial opacity to emulate smooth curves of the glyphs. The smoothness of the glyphs is mirrored using restricted opacity, making the glyphs more similar to the type’s design.

Using this will make your text look as crisp as it looked in your Figma designs. However this come with a little downside. These properties will affect the performance of your site, so the loading time might go down a little bit.