Solve REM problem with the 'happy rems' approach

Some time ago I've heard about the approach called 'happy rems' helping to avoid problems with converting rems to pixels.

As you probably know rem is the CSS unit related to the browser. It's shortcut form root em. In Google Chrome and Firefox, the initial value of 1rem is set to the 16px.

And here comes the problem, when you want to use rems in your project but need to set font-size to 21px you need to make some calculations. In that case, it would be around 1.3125rem. So I want to share with you the happy rems approach that helps to avoid all those weird values.

Set root font size (rem) value to the 10px in your global style

html{
   font-size: 62.5% // from now 1rem === 10px
}
body{
   font-size: 1.6rem; // we set default font size value to the 16px as it was
}

As you see we didn't changed default browser font size it's still 16px, but now our 1rem is 10px so

.myCoolText{
   font-size: 1.4rem; // 14px
}