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.
Attaching the screenshot of comparison
Font – Grosa, type – woff2
Did anyone else experience this? What could be the issue here?
Edited: Added few more Images for better visibility of difference in typography.
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
Hey Baffour sharing two images for better visibility of difference in typography.
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?
Thanx for helping Baffour.
Sadly No, We have defined that particular weight in the font.
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: