The font-size of the body is 18px.
My headings are all declared as rem values. I want to have margin-bottom as big as the line-height of each heading and margin-top twice as big as the line-height of each heading.
I thought I could achieve this by also using rem for the margins, but I actually don't know what root value is used for the margins of headings when you use 1rem. I'm getting 16px now.
rem
s are relative to the base font size which would be the font size set on the HTML element (usually 16px by default). It's generally advised to set the font size of the HTML element as a percentage to allow the user to set a font scaling setting in their browser for accessibility purposes. I personally tend to use font-size: 62.5%
as that lets you think about rem
units as px / 10
so 1.6rem
would equal 16px
assuming the user has their browser font size set to 16px
.