How to save web page fonts from Mac OS?

Question

css

Hello, I use Roboto fonts, under Windows everything looks fantastic, but under Mac the edges are blurred at a small font size, is there any way to make them more clear?
Styles applied to the page

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: 'liga', 'kern';

The top of the text is smudged.

font-size: 12px;
font-weight: 400;

/******************************/
When increasing to

font-size: 17px;
font-weight: 500;

/******************************/

Answer 1

Try to set the font sizes according to the Google guide (it describes in detail how to work with the Roboto and Noto fonts). The guide describes the style with size 12, but for mobile operating systems. For desktops, the same style seems to have a size of 11. More details here: https://www.google.com/design/spec/style/typograph...