If you set the <body>
element to have font-size: 100%
then you are effectively setting the pixel size base line to be 16px
.
So now 1em
equals 16px
.
To size either our text or our layouts to match what the designer has specified in pixels we use the following calculation:
target / context = result
This means if your target font size for a <h1>
is 24px and your 'context' (the container) is 16px then you calculate this as: