I’ve had this issue for a while where font weights in my design aren’t quite the same when integrated on the web. I decided to look into it a bit more today and it seems to be related to font-smoothing/antialiasing.
It seems that the web uses subpixel antialiasing by default, and that maybe Sketch uses pixel based antialiasing?
It would be nice to be able to change this, so our design reflect more what the end user will see.
More context:
Most of the time, my fonts look thinner in Sketch than they do in the browser. It’s mostly, or only, noticeable at smaller text size where it looks like the font-weight in not correct.
Adding the css property/value : -webkit-font-smoothing: antialiased mostly resolve the problem, as it looks really similar to the way it’s render in Sketch.
But, consulting these articles:
Please Stop "Fixing" Font Smoothing (Quite old, but still linked on MDN)
It seems that this css value should not be used for dark text on light backgrounds. It’s also only compatible with MacOS?
So, the general browser default and only Windows possibilty is ‘subpixel-antialiased’ , or ‘auto’. From what I get, it means the antialiasing is done at the subpixel level.
In contrary, ‘-webkit-font-smoothing: antialiased’ , the aliasing is done at the pixel level, and result in a lighter look.
I can ask my developper to add the css value, but it’s not great and isn’t supported by all platforms. I’m not sure of mobile compatibility.
I would like to be able to design and see the same thing as the end result will be. Maybe be able to choose the anti-aliasing of texts in Sketch.
From what I can see, this issue is also present in Figma.
I’m not a specialist in font rendering, and unsure about how stuff look on Windows in general nowadays. But I’d like to know how people are working with this issue.