Font-size <12px doesn't have effect in Google Chrome

Question

Elements with css font-size <12px doesn\'t have effect in Google Chrome - remains font-size 12px.

What should I do?

My Google Chrome browser uses default

Answer 1

Same for safari. I guess this is set to 9px for accessibility reasons. The trick is to not rely on making your fonts that small, so that you are blowing them up in css rather than reducing them. This is of particular relevance if creating your own font using something like icnmoon. So, here it is best to reduce the glyphs sizes in the font, so that you are setting them quite large in your css and you are avoiding setting them to below 9px if the user 'zooms out'.

Interestingly font-size: 0 still works even if the minimum font size is set to 9px in your browser preferences.

With regards tablets and smartphone and other devices, it may be possible to use the following to avoid automatic text size adjustments using the following:

-webkit-text-size-adjust: none;

-moz-text-size-adjust: none,

-webkit-text-size-adjust: none;

-ms-text-size-adjust: none;

font-size-adjust: none;

This may actually break the accessibility of your websites on these devices but as far as I know there is no way to adjust your browser text size as it stands on these devices. They only seem to be adjusted automatically, depending on the situation which can be a bit of a mystery. These commands may prevent that, but i think the default minimum font that is set in your browser preferences may override that setting anyway, at least in some browsers.