Font smoothing doesn't match designs

[ara4n]

Our new designs in Figma feel much lighter and airier than the reality in Chrome (on retina macOS). This looks to be because Figma runs with -webkit-font-smoothing: antialiased rather than -webkit-font-smoothing: subpixel-antialiased on retina screens, so @nadonomy has been picking weights/font-sizing and generally balancing the design in Figma... but the end result is then mangled by the browser.

TL;DR: we should try setting everything to -webkit-font-smoothing: antialiased and its -moz equivalent. Need to check it doesn't make this illegible on Windows, and on non-retina displays. (I think antialiased is the default for non-retina displays though, so it hopefully shouldn't break those)

[ara4n]

Concretely (you'll need to view the images fullsize on a retina screen to see the differences):

Figma: (with experimental timeline font sizing which should be ignored):

Reality in Chrome on Retina on macOS:

Using font-smoothing: antialiased on retina macOS rather than the default (subpixel-antialiased):

Or, zoomed: left is Figma, right is Chrome (today):

The effect is further complicated by the bg colour not matching figma, which gives the effect of increasing weight also.

[ara4n]

(i'm currently running in Chrome with -webkit-font-smoothing: antialiased on the body tag, and it's a marked improvement on Retina in terms of feeling lighter and crisper and prettier).

It's worth noting that we've tried playing with this in the past and screwed it up as per matrix-org/matrix-react-sdk@30bb7ee - it's unclear how/where the screwup is coming from this time. Perhaps it's that Sketch used one smoothing and Figma used the other, and so having rebalanced the font weighting in Figma, that's how we've got out of whack.

[jryans]

MDN claims -webkit-font-smoothing / -moz-osx-font-smoothing only affect macOS, so Windows / Linux should be unaffected.

[turt2live]

Yea, before (which is just auto in our app) and after on Windows it's still a ransom note:

[turt2live]

Presumably fixed by matrix-org/matrix-react-sdk#3677