DEV Community

Cover image for Solve REM problem with the 'happy rems' approach
Dominik Ilnicki
Dominik Ilnicki

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

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
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)