0

Why is it that even though my website CSS is identical, the Lato font is rendered with a slightly heavier weight on Chrome (MacOSX) than on Safari on the same machine?

Sammy
  • 3,395
  • 7
  • 49
  • 95

2 Answers2

5

As you can see in this Answer: Font weight turns lighter on Mac/Safari

…use

-webkit-font-smoothing: subpixel-antialiased;
to make the font appear in Safari the same as in Chrome (thicker).

…or

-webkit-font-smoothing: antialiased;
to make the font appear in Chrome the same as in Safari (thinner).

Community
  • 1
  • 1
alexkaessner
  • 1,966
  • 1
  • 14
  • 39
  • Thank you. Does this affect both Windows and Mac? Which is considered more "superior" and which is the most compatible or widespread? – Sammy Apr 30 '17 at 06:07
  • @Sammy I don't have Windows, so I can't test it. But I think it's more a Mac thing, because the font rendering in general is different on macOS. Maybe you can test wich option is better for Windows? – alexkaessner Apr 30 '17 at 07:27
  • will do. Thanks! – Sammy Apr 30 '17 at 07:28
0

The best way to normalize fonts across Safari, Chrome, and Firefox on MacOS is actually not to make them thicker in Safari, but to make them thinner in Chrome and Firefox:

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

This will make all the fonts more like how Safari renders them, although crisper. Windows tends to make fonts lighter than Mac, so this should also normalize the fonts across Windows and Mac.

Gavin
  • 7,544
  • 4
  • 52
  • 72