Font in browser seem bolder than in the figma?

This topic is a bit more complicated than many designers think.

The thing is that every browser engine has its own font renderer that rasterize vector fonts and performs smoothing in a bit different ways. And it also depends on platform-specific algorythms, so that you might get significantly different look in MacOS and Win, for example. More of that, there are user-specific settings on particular machines (e.g. ClearType) that also affect the look of the font. Figma uses it’s own engine to provide consistent cross-platform view for users sharing the same files and it doesn’t always match the view provided by the Chromium engine.

In most cases you won’t get equal view for all platforms and cases. However, some cases can be solved by playing with smoothing params in CSS at the frontend level. This is my typical snippet:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
9 Likes