Google Font Size 10.5 Px (.5) The Correct Way And Multibrowser Support

I am using Google font Open Sans and if I set the font to font-size 11px it looks big for the text I need and if I set it to 10px it looks small so I tested just for fun and set it

Solution 1:

Basically, the answer is that no, it is not a good approach if you want to make sure that your font renders precisely in a cross-browser fashion. There is no such thing as a half-pixel when it comes to rendering the font, so you leave yourself open to different browser-applied rounding effects which could differ from browser to browser and between client devices, which have different resolutions and pixel densities.

Solution 2:

Convert your font size to a scalable unit like em or rem, and you can get what you are looking for.

By default, 1rem = 16px. so 10.5px = 0.65625rem.

The added benefit is accessibility. Some users may increase their default font size. Your text will scale accordingly if you use em or rem units. Pixel sizes won't.

Solution 3:

Use percentage instead, you won't get the same size on different displays/browsers, but you should get more control over the size of your text.

e.g: font-size: 98%;

This article may help.