Remember the RWD magic formula we mentioned in Chapter 3, Mobile-first or Desktop-first?:
(target ÷ context) x 100 = result %
There's also another similar magic formula to calculate relative font sizes (ems) when the font size has been set in pixels. The only difference is that we don't multiply by 100.
This is that formula:
target ÷ context = result
The target is the font size defined in pixels. The context is the font size defined in the parent container. The result is the value defined in ems.
Here's an example considering that the font size in the parent container, the body in this example, is 16px:
header {
font: 30px Arial, "Helvetica Neue", Helvetica, sans-serif;
}To calculate the relative font size, we use the following formula:
30px ÷ 16px = 1.875em.
So our CSS rule will look like this:
header {
font: 1.875em Arial, "Helvetica Neue", Helvetica, sans-serif;
}We would have to do this for every font size in our design.
This is fine in terms of understanding...