We’re seeing a difference in how font looks in Figma, and how they appear in the browser.
The font size on the site was a lot bolder visually, despite being the exact same size, weight and the exact same font file. It feels very misleading and I’m not sure if maybe this was just an isolated experience because of the font we used.
Might just be my eye for typography but I’m not seeing an obvious difference. Could you make the examples use the same text and background image? Might help
Ah great that’s a lot clearer! I’m not a massive expert on font files but I know if a certain weight isn’t defined in the font, your browser will try to approximate the weight itself. Is there any chance that’s happening here?
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:
Thanks @ Ilya_Ivanov for the answer,
I encountered the same problem, and searched for the smoothing mechanism Figma uses.
It seems like Figma’s engine is doing font smoothing (antialiasing) on the level of the pixel.
Some browsers supports (by default) subpixel smoothing, which gives sharper results and slight bolder font.
Note that switching from subpixel rendering to pixel level anti-aliasing, to make Figma and browser aligned, will create lighter font, which will affect, for example, readability when using light text on dark backgrounds.
I think Figma is respecting the actual Native font weights?? But yes each browser is going to programmatically handle it differently. I would suggest looking at all font weights by number value in the browser, making a list of the weights on figma and what number value is shown in the inspect tool, then using the font weight in the CSS that looks most similar to the correct weights, rather than going off what it says in the inspect mode on Figma.
