Fix the Font size bug in Google Chrome
Quick fix to the font-size bug in Chrome browser for ‘rem’ and percentage units – short CSS and JavaScript code snippets to get rid of it.
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.