Fix the Font size bug in Google Chrome

If you use responsive font sizing on your website, then you must have encountered this annoying font-size bug in Google Chrome. The bug zooms in the body text without actually zooming and makes it appear as big as headings – which is not cool at all. The zooming disappears as soon as you inspect element or resize the browser window.

Its a known bug in Chrome browser, however not confirmed by Chrome itself. It irritates a lot, specially when you’re working in the direction to make your site mobile-friendly. Many Chrome uses have reported this issue here and here.

Chrome font-size bug: Elaboration

As you might already know, CSS rem font-size unit is in great use these days to make the font scale good at different resolution. The unit is supported by all the modern web browsers including Chrome.

I generally use rem units with a pixel fallback with base font-size of 62.5%. The final code goes something like below:

html {
font-size: 62.5%; /* 62.5% of 1em (16px) = 10px = 1rem*/
}

body {
font: 16px/1.618 Arial, Sans-serif; /* Pixel Fallback */
font-size: 1.6rem; /* Font-sizing with rem unit */
}

Chrome doesn’t disregard the font-size in rem in the above case. Actually when the base font-size (font-size for the html element) is declared smaller than 100% (or 16px), the browser resets it to 100% again, ruining all of your typographic setup…

How & Why?

Let me explain this with an example. Observe the above CSS code, in which the base font-size is resized to 62.5%. The trick behind that resizing is to make the base font-size of 10px, which makes it easy to convert different pixel values to the rem units; i.e. 10px becomes 1rem, 16px becomes 1.6rem and it continues. Its a handy technique that most of the CSS people use.

Now, because of the bug, Chrome reads the font-size value of 62.5% for the html element, and resets it back to 100%, which comes out to be 1em (16px); and then 1rem becomes 16px, 1.6rem becomes 25.6px and so on; and that’s what Chrome throws out while rendering.

So your expected 1.6rem body font-size becomes 25.6px and you see the body text all zoomed-in.

Why this reset occurs? I don’t know, maybe its a bug or its Google forcing people to always read on 100%. Or whatever.

The Fix

Best way to avoid this fix is stop setting font-size property value less than 100% for the html element. But if you have become used-to of the ‘multiples of 10’ rem technique, here are couple of things that can help you fight the bug:

JavaScript

Since its a browser specific bug with the HTML and CSS rendering, you can easily fix it using a short n’ quick DOM trick. The trick lies in re-declaring the base and/or body font-size in the DOM. Below are some JavaScript code snippets that you may try to get rid of it:

For a body font-size of 16px or 1.6rem and base font-size of 62.5%, I added below code to this site’s HTML, and it worked like magic! The bug was gone!

<script type="text/javascript">
document.getElementsByTagName('html')[0].style.fontSize = '62.5%';
document.body.style.fontSize = '1.6rem';
</script>

Note: You should modify the font-size values according to your CSS.

Re-declaring the body font-size through DOM also removes the bug. So using below snippet will / may also work for you:

<script type="text/javascript">
document.body.style.fontSize = '1.6rem';
</script>

CSS

I’ve seen that CSS people don’t like to fix things like this with JS. So here is a CSS alternative that also works the same as the above DOM trick – it resets the zoomed-in font-size to the normal. Use the following CSS code just above the </head> tag of your markup:

<style>
body {
font-size: 1.6rem;
}
</style>

Change the font-size as per your styles.

Hope this solves it for you. Feel free to raise questions, suggestions and thoughts on this topic in the comments.