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

Chrome doesn't let you set the minimum size less than 6 point. And text is legible A LOT smaller than that on Retina displays.

Answer 2

this should not be correct, you probably have an element overwriting your current given attribute.

like this:

body {
  font-size:10px;
}

#content {
  font-size:12px;
}

Answer 3

-webkit-text-size-adjust is no longer working after Chrome 27.

Try using transform to refuce font-size forcely.

font-size:12px;
transform: scale(0.833);/*10/12=0.833, font-size:10px*/

Answer 4

According to http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=en Chrome supports a minimum font size. If you open "Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences" in a text editor, do you see something like the following?:

   "webkit": {
      "webprefs": {
         "default_fixed_font_size": 11,
         "default_font_size": 12,
         "fixed_font_family": "Bitstream Vera Sans Mono",
         "minimum_font_size": 12,
         "minimum_logical_font_size": 12,
         "sansserif_font_family": "Times New Roman",
         "serif_font_family": "Arial",
         "standard_font_is_serif": false,
         "text_areas_are_resizable": true
      }
   }

Closing Chrome, changing the minimum font size, and restarting Chrome may help.

Answer 5

Is there a minimum font size preference? Is it set to 12px? Is page/text zoom enabled? Do you have any kind of Chrome plugins that alter page contents?

Answer 6

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.