Root font-size reset

Tips and Tricks
1

After watching a few YouTube tutorials on general web design, I’ve seen the root, or HTML font-size “trick” where you reset the font size to 62.5% to shift the base of all rem calculations from 16px to 10px to make the following work more intuitive.

This makes 2rem correspond to 20px, instead of 32px. Adding a 150px padding would be 15rem instead of… wait a minute… 9.375rem.

It might not be necessary, but it certainly also doesn’t seem to hurt. Plus, it seems like a very simple thing to do… IF it can be easily setup in the beginning. Is this applicable to Blocs? Would it have undesired ripple effects?

2

IMO and I know the whole thing has people in both camps, is we should work with the default font size and not change it.

Several reasons to do with accessibility working correctly and not to mention 16 is easily divisible, where as 10 can lead us to having 1/2 pixels when using REM. Also potential issues with 3rd party libraries and code. And professionally team environments or where you may start working on an existing site can create confusion.

There really is no reason to change it. The negatives far out way making it worth it.

1 Like
3

Thanks for your input!