Understanding px to em to percentages for responsive design
You can find more information about that formula on A List Apart
target ÷ context = result
If we assume the body’s default type size to be 16px, we can plug each desired font-size value into this formula. So to properly match our header to the comp, we divide the target value (24px) by the font-size of its container (16px):
24 ÷ 16 = 1.5
So the header is 1.5 times the default body size, or 1.5em, which we can plug directly into our stylesheet.
h1 { font-family: Georgia, serif; font-size: 1.5em; /* 24px / 16px = 1.5em */ }
When dealing with text, em
and %
are pretty much equivalent:
100%
== 1em
50%
== 0.5em
When designing grids, I would straight up think in percentages (or columns) rather than do that conversion by hand.