Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!
J A S O N@jscottpearson
Font weight rendering in Figma (too thin?) vs The Browser (too thick?)September 24, 2020 at 8:51pm
Font weights I've noticed are generally heavier (thicker) in the browser when comparing their appearance to Figma. I know this is dependent on the font, OS, and browser to varying degrees. I'm using Open Sans, MacOS, and Chrome.
The "fix" to get fonts to look the same in the browser and Figma, is to use a CSS property that sets font-smoothing to antialias. It thins out the fonts quite a bit in the browser. But it seems like an anti-pattern, to apply an override to the default medium you're working toward because the tool you're working in can't adhere. I think what happens is designers resort to using this fix because they see the result of their hard work in the browser looking very different to what they intended. Kinda like this: https://github.com/matrix-org/matrix-react-sdk/pull/3677.
Having to correct for this by changing the browser's default font rendering method seems misplaced. Open Sans – https://fonts.google.com/specimen/Open+Sans - for example, does not have a font smoothing override applied on the specimen's site so between Figma and the source there are already inconsistencies.
Here's a demonstration of the differences. https://www.figma.com/file/zpSfjAVOaG8AUYm4cUp0jJ/Font-Smoothing?node-id=0%3A1 - As you can see, the difference in weights is drastic enough to be problematic for Open Sans, 14px @ weights 300 and 400. The differences in 400 itself almost seem like a full magnitude apart.
As it stands now though, the only way to have typography appear for the designer in Figma and the end users of the resulting web product is to enforce the thinner, non-standard rendering method in the browser.
What I think needs to happen is, by default, the design tool should render typography as it will in the browser – or the designer should at least be able to anticipate in the design tool how the design will render. As much as I don't like the idea of a font rendering option in Figma, maybe that's the solve.