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 to 10.5px and it works on Chrome tested 10,5px with , and it does not work.
Is this correct that we can set values of font size to example:
10.1px or 10.2px or 10.3px or 10.5px ? or is that incorrect or new css or beta something?
I really would like it to work like 10.5px because is exactly the font-size I need but reading and reading I find nothing about it.
If this works is it supported by all browsers and cellphones ?
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.
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.
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.