I'm currently facing an issue where bold Lato seems to render incorrectly at 14 and 16px when using MacOS Monterey on a non-retina resolution as shown here: Lato 16px non-retina vs retina

Sample code:

<p>16px: <strong>provider</strong> and</p>

You can also test this behaviour yourself here: JSFiddle

This is a huge problem as my website is using Lato as its primary font-face.

From what I understand it only affects MacOS users (Monterey, maybe Big Sur) who are using a non-retina resolution on their display - regardless of browser used. That means that if you have a retina display you can enable the bug by changing your resolution to a standard, non-retina resolution and conversely "fix" this issue on a non-retina display by forcing a retina resolution with a physical or virtual dummy. (If you have multiple screens you can even move your browser window and have the issue appear / disappear depending on what screen you move it to.)

Did anyone else encounter this or a similar font rendering issue this severe? And more importantly - is there anything that can be done on my side to fix this issue for my users?