Ask A Question


You’re not receiving notifications from this thread.

HTML font-size: 62.5% is way larger than it should be

AndersonGarcia asked in CSS

Hello, I'm running into a problem where I want to use rems as a unit, so I set the html font-size to 62.5%, which I've seen as a common practice, which should give me 1rem = 10px (because the default font-size should be 16px). But, when I go to use these newly set rems the styles on the page using them are larger than what they should be. For instance, I set a margin bottom to 8rem expecting 80px but on the page its displayed as 120px, despite me inspecting it with dev tools and it saying its using 8rem. I'm just so confused what could be making these rem larger than 10px / rem. I'm using Chrome if that matters. Any ideas? I know this is common practice.


Once you get used to thinking in rems, you'll find that it's actually quite easy to express familiar powers of two as fractions of 16, the root font size of every browser. But if you need to express any other value in rems—like odd numbers or very large numbers—you'll need to do the math by hand, convert it with CSS calc, or use a preprocessor like Sass. Alternatively, you can make your life easier using a trick with a root font size of 62.5%.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 84,387+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.