36

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 settings. My version is 4.0.249.89. I am using Windows XP.

You can paste the following code to your Google Chrome to test it:

<html>
<body>
<p style="font-size:6px;">test 6px</p>
<p style="font-size:7px;">test 7px</p>
<p style="font-size:8px;">test 8px</p>
<p style="font-size:9px;">test 9px</p>
<p style="font-size:10px;">test 10px</p>
<p style="font-size:11px;">test 11px</p>
<p style="font-size:12px;">test 12px</p>
<p style="font-size:13px;">test 13px</p>
<p style="font-size:14px;">test 14px</p>
<p style="font-size:15px;">test 15px</p>
<p style="font-size:16px;">test 16px</p>
</body>
</html>

Results from different browser: https://i178.photobucket.com/albums/w258/neodeep2001/chrome-font-size-diff.jpg

7
  • 1
    Do you have an example we can look at? There's no reason why it shouldn't work! Feb 19, 2010 at 9:17
  • I have just added a piece of sample code.
    – Billy
    Feb 19, 2010 at 9:26
  • Works for me without a problem.
    – Kitson
    Feb 19, 2010 at 9:33
  • I have added the screencap of 4 browsers.
    – Billy
    Feb 19, 2010 at 9:48
  • well i added a screencap of my chrome, and you see it works!
    – Adam Kiss
    Feb 19, 2010 at 10:02

16 Answers 16

30

disable the auto adjustment by following style.

* {
    -webkit-text-size-adjust: none;
}
3
  • I think this should be accepted as the Answer. Although beware of possible pitfalls with this CSS rule: 456bereastreet.com/archive/201011/… May 3, 2011 at 15:48
  • 4
    This rule disappeared with version 29 of Chrome. There is no satisfactory replacement solution at the moment of this comment. While it is OK to ensure readibility for users, this create pitfalls, like being unable to size images with rems if HTML font size is less than 12px.
    – Ninj
    Dec 1, 2014 at 9:47
  • 2
    That this no longer works is probably intentional; Chrome has a minimal font size setting to allow the user to override font sizes that are too small. Jul 18, 2016 at 16:08
21

-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*/
1
  • 2
    Your solution is the best I have found, but it's important to understand: 1. You must first specify the transform origin or the text may not begin where expected. transform-origin: left; is sufficient in most cases. 2. Line breaks are calculated before the transform, causing multi-line text that is scaled down to break prematurely, and causing multi-line text that is scaled up to overflow. 3. For single-line, starting with a font size of 10px and then scaling down is easiest. These are just my personal findings so far.
    – Mentalist
    Nov 30, 2018 at 0:38
7

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.

1
5

Chrome has a minimum font size setting. Mine was set to 11px (by default) so I had to change it to view smaller font sizes.

To change the minimum font size in Chrome go to: settings > advanced settings > web content > font size > customise fonts > scroll down to the bottom and you will see the 'minimum font size' slider.

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;
}
0
2

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?

3
  • I was looking for a minimum font, too, but I couldn't find it. Doesn't mean the pref isn't hidden somewhere, though.
    – Anonymous
    Feb 19, 2010 at 10:31
  • I am using default setting and do not have any plugins.
    – Billy
    Feb 19, 2010 at 10:39
  • 1
    @Anonymous To change the minimum font size in Chrome go to: settings > advanced settings > web content > font size > customise fonts then scroll down to the bottom and you will see the 'minimum font size' slider. Mar 5, 2014 at 15:48
2

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.

1

what happens if you make the < P > tag a < SPAN > tag?

is it possible you have defined your < p > tag somewhere along?

1
  • The sample code is enough for testing. Just paste the code to your Chrome to have a look.
    – Billy
    Feb 19, 2010 at 9:54
1

It works for me in Chrome 4.0.249.78 (36714) , could you be viewing a cached copy?....Try emptying your page cache (I've found chrome very fond of its cache)

3
  • It's not the cache problem. I am using Windows XP. Does the problem only happen in certain OS?
    – Billy
    Feb 19, 2010 at 10:00
  • I'm able to view the html code you posted fine and I'm using Chrome on Windows XP Pro (admittedly a slightly older build and the beta version with extensions support), the cache is the only thing I can think of if you are using the same basic html as you pasted in your OP. What happens when you use the "inspect element" menu option, does it show up as having your smaller font sizes?...or does it look like it's being overridden in some way?
    – James B
    Feb 19, 2010 at 10:47
  • What about viewing your html file in an incognito window?...Sorry but I'm still stuck on it being a cached copy of the file (it took me ages to change my Stack Overflow avatar and get it to show up in chrome due to its overzealous caching)...although it would show up correctly in an incognito window (as it was bypassing the cache)
    – James B
    Feb 19, 2010 at 10:50
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.

1

It works for me.

Try to:

  • use webdesigner tools, to check what css affects your element
  • post html and css aswell, so we can maybe figure out more

Edit: Latest Chrome (stable) renders this this way: Rendering in chrome
(source: kissyour.net)

2
  • I have added the screencap of 4 browsers.
    – Billy
    Feb 19, 2010 at 9:45
  • take screenshot of css that affects it - right click on one of test text: 6 - 11px and pick "check element" or something like it (i have localized chrome) - it should be the last one (if you know what i'm talking about, stop reading further) - then document inspector opens up and on the right side is panel styles - screenshot it and post it pls, maybe we'll see.
    – Adam Kiss
    Feb 19, 2010 at 10:18
1

Chrome and Firefox now allow a minimum font size setting of zero. Chrome 73 had downstream problems with this, and since then Chrome changed their policy and user interface for this setting. I don't know the history on Firefox, and I don't know the state of this setting on Safari or other browsers.

1

You can use css property zoom (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)

By setting zoom property equals to 0.25
all elements will be looked 4 times smaller,
so 12px font text will be looked like 3px font text.

.text {
    zoom: 0.25;
    font-size: 24px;
}

text will be looked like font-size: 6px; text.

But this property isn't supported by firefox.

0
<html>

<head>
<style>
    #text {
        transform-origin: top left;
        background: #aed5ff;
    }
</style>
<script>
  window.addEventListener('load', function() {
    var node = document.getElementById('text');
    var fontSize = node.style.fontSize.replace(/[\D]+$/, '');
    if (+fontSize <= 12) {
      node.style.fontSize = '12px';
      node.style.transform = `scale(${fontSize / 12})`
    }
  });
</script>
</head>

<body>
<p id='text' style='font-size:10px'>test 10px</p>
<p style='font-size:12px'>test 12px</p>
</body>
</html>


-1

Have you tried putting an "!important" clause behind the font styles? This would override everything else. At least then you would know where to look for the problem. Like this:

<p style="font-size:6px !important;">test 6px</p>
3
  • That shouldn't be necessary when he's using a style attribute instead of a style rule. Feb 19, 2010 at 13:15
  • 1
    This does absolutely nothing to fix the issue. All this will do is overwrite another rule that might be affecting the font-size Jan 1 at 7:17
  • !important would just override the other stylings given by the developer. It won't bypass the limitation of Chrome. Mar 16 at 4:23
-1

you can use

body {
font-size:125%;
}

to set 0.5em=10px.

2
  • 1
    The problem seems to be something local to Billy's machine as judged by the comments of the other users. Also, your answer isn't explaining why Chrome's font-size was only changing once the font was set to higher value than 12px as per his question. Perhaps try elaborating on your answer and make sure to test HIS code as well as YOUR code. If you can't replicate his error, you can't test your suggested fix.
    – Frits
    May 9, 2016 at 12:24
  • Welcome benzford - my advice to you is focus on new questions not old. As @Frits says you need to really to crack the answer, especially one that has a high accepted answer. Persevere!
    – micstr
    May 9, 2016 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.