You don't have to calculate anything, 1 rem is 16px by default, but you can set html font size to 62.5% and it will be 10px, so if you need something to be 20px

You don't have to calculate anything, 1 rem is 16px by default, but you can set html font size to 62.5% and it will be 10px, so if you need something to be 20px (if you are used to px sizes) - you can just set it to 2rem and it will render as 20px. It's not a matter of calculation but just a matter of getting used to how big is 1 rem. The biggest benefit is that you can target specific screen sizes with different html font-size values using @media queries, so for example for bigger displays you can set html font-size to 120% and it will result in automatic increase of size of all the elements where font-size or paddings etc are set with rem. Same goes for mobile devices, for examples all the headers will go from being 40px font-size to say 25px, just by changing an html tag font-size value, you don't have to target any elements individually, it will be automatic. For me it was one of the best discoveries to increase productivity, when building responsive designs.