Why Fonts Look Bolder in Browsers Compared to Figma—and How to Fix It

So, recently I was showing few designs for our growth experiments to Yogini Bende in Figma. And as soon as she saw my screen, her first reaction was—why our designs doesn't look sharp in browser as they look in Figma prototype.

We were thinking about this problem for a very long time. Finally I decided to do some quick research. Found that many people are facing the same problem.

If you've ever designed a website in Figma, you may have noticed that fonts often appear bolder in the browser than they do in Figma. This discrepancy is frustrating, especially when you’ve meticulously crafted typography, expecting it to look the same to users after the development.

TL;DR — Use this CSS in your code

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

If you want to learn more about this problem, why it happens, and how the solution works, then continue reading!

The Problem — Subpixel Rendering Differences

The most common cause of fonts looking bolder in the browser is due to how subpixel rendering is handled by different operating systems and browsers. Subpixel rendering allows for smoother font rendering by using individual pixels more efficiently. However, the implementation can vary significantly between Figma and browsers, leading to visual inconsistencies.

• Figma's rendering tends to be optimized for design precision, focusing on creating sharp, accurate typography on the canvas.

• Browsers, on the other hand, handle fonts differently depending on the operating system (Windows, macOS, Linux) and the browser engine (Chrome, Firefox, Safari). For example, Windows may render fonts slightly bolder than macOS due to the differences in anti-aliasing and font-smoothing techniques

CSS settings used in browsers also play a role in font appearance. Properties like font-smoothing or text-rendering can affect how fonts are displayed. For instance:

• -webkit-font-smoothing: antialiased; is often used to make fonts appear thinner on webkit-based browsers (e.g., Chrome, Safari).

• font-weight values may sometimes be interpreted slightly differently between Figma and the browser.

Solution: How to Fix the Font Weight Discrepancy

Use CSS to Control Font Rendering
To minimize the font weight difference, you can explicitly define CSS properties that control how fonts are rendered in browsers:

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

Am not sure how much useful the text-rendering property is. If you're using tailwind css, then use the class antialised to the body.

This should solve the problem you are facing with bolder looking fonts in browser vs in Figma.

If you still face the problem, make sure you are using the fonts from the same source. For ex: Google Fonts.

Hope this solves the problem you're facing. If not, comment below. If it does, you can say thank you 😅.