1

Google Chrome (Version 89.0.4389.114, 64-bit) has some strange behaviour when using a % value for the font-size property.

In stead of the expected behaviour, reducing the font size to a given percentage, it will stop doing so if the calculated font size would be smaller than 6px, and it will not go below that magic 6px. FireFox does scale down the font as expected.

Example:

I created this fiddle in which I scale down the font at the :root to 1%. In both browsers, the default font size is 16px, so the expected font size is 0.16px. FireFox does indeed render it as such, Chrome however does not, as the rendered font size is 6px. An image with FireFox on the left and Chrome on the right to illustrate the issue without you having to fiddle around https://pbs.twimg.com/media/EyTFQ3WWgAA_fL6?format=png&name=large.

So I am wondering, does anyone know how to bypass this?

I need it to work for the % unit, as I use it to enable this "rem to px" conversion. By setting :root's font-size to 6.25%, 1rem will equal 1px (if the browser's default font size is set to 16px). This allows me to develop the site in rem units without having to deal with conversions all the time. The benefit? The site will now scale perfectly when the user decides to change their default font size to, f.e., 20px.

I haven't found a workaround yet, so any ideas are much appreciated!

Cheers

Hylke
  • 15
  • 5
  • Sounds too small to read! but you could try `calc(1% * 1)` or something to see if that gets around the limit? – Damon Apr 06 '21 at 15:28
  • 1
    Similar, though not exactly the same, discussion here [link]https://stackoverflow.com/questions/53856831/rem-font-size-not-adjusting-below-arbitrary-threshold - 6px seems to be a lower limit for Chrome. – A Haworth Apr 06 '21 at 15:49
  • @Damon, that sadly doesn't work :( – Hylke Apr 07 '21 at 06:47
  • @AHaworth, thanks for the link, that clears up some stuff. Sadly no solution in the comments. At least it gives me some peace of mind, knowing it is not my fault ;) – Hylke Apr 07 '21 at 06:50

1 Answers1

1

This is a feature of Chrome designed to prevent font sizes from becoming illegibly small. Chrome cannot assume that the developer will always restore the font size to a readable value using a multiplier, so it enforces a minimum size.

The conventional way to adjust font sizes for easy rem calculations is by setting the base font size to 62.5%, not 6.25% or 1%, then use rems in x.y increments:

:root {
  font-size: 62.5%;
}

.foo {
  font-size: 1.2rem; /* 12px */
}

See CSS fonts rem trick: 62.5% or 6.25%

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Indeed a good workaround, sadly it would require me to add decimal points everywhere in my code base, so a bit of a hassle. Thanks for the suggestion, will certainly think of using this in the future instead! – Hylke Apr 07 '21 at 06:44