CSS 62.5% Why Do Developers Use It

CSS 62.5% why do developers use it?

Developers use it to make it simple for them to design. The default font size is 16px, so they set the body font size to 62.5%. Therefore:

Body font-size = (62.5/100)*16 = 10px

Now as human beings, we find it very easy to use the decimal system. It's also easy to understand fractions in terms of 10, so responsive designing becomes easier!

By the way, i recommend you use font-size: 10px; explicitly in the body, as all browser default font-size might not be 16px.

Hope I am helpful :)

What does font-size 62.5% do?

font-size: 62.5%; on html tag is a method helping you to convert easily px to rem.

As 62.5% of the default font size in browser (16px) is equal to 10px, convert pixel values to rem values become easy. For example, 1.6rem will have a 16px rendering (16/10=1.6). 

You can get more informations about CSS font size units on this link : https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

Should I keep the 62.5% font-size with Modular Scale?

It depends on your browser requirements. If you need to support IE8, your REMs would need to be backed up with pixels anyway. The reason for the 62.5% is so the maths is easier for EM based sites so 1EM = 10px. Other than that it doesn't do anything so you can drop it if you're using REMs, don't mind the maths (if you're converting to pixels in your head) and you're not supporting IE8 and under.

How to salvage an `html { font-size: 62.5%; }` situation, so that when I add new text elements to the page they aren't so tiny by default?

I might be being a bit thick here but can't you just fall back to good old "search and replace".

Get a list of sizes used in your project, a quick search for "\d{1,3}\.?\d{0,5}rem" should cover most cases and then just filter the list. (1-3 digits, optional decimal full stop, optional 1-5 digits and then REM).

Search for any sizes in REM first, turning "1.6rem" to "1rem" and "2.4rem" to "1.5rem" etc.

Now you can probably see an issue here, you can't do it in one pass as you would obviously end up with a scenario where you change one value and it then collides in a further search and replace (you change a value from 3.2rem to 2rem and then do a pass to change all the 2rem sizes and inadvertently change larger items as well).

Instead I would set the values 100 times larger than they need to be on the first pass and then reduce them all by 100 after. (so 3.2rem would go to 200rem on the first pass, then 200rem to 2rem on the second pass, obviously if anywhere you do use 100+rem then change this to 2000rem etc.)

Then once you have done all of that just change the root font size from 62.5% to 100%.

That should catch about 95% of issues as if someone is then using em units the base units it is working from should end up the same size.

With this approach I can't see you having to do more than 50 search and replaces across even a gigantic application that uses REM for div sizing etc.

I can't think of any "gotchyas" with this approach, but I am sure there will be some so back up before you do it obviously !

Purpose of 62.5% font-size in elastic layouts

If you were setting all your padding/margins with rem - That way you know 1rem = 10px when at a 100% browser zoom.

---

Related Topics