The golden rule here is that anything that is not a relative size is a mistake. So you need to go with relative sizing, and the best for fonts is: em
and rem
rem
: relative to the font size of the root elementem
: relative to the font size of it’s direct or nearest parent
So, by setting a baseline font size at the root html
element, you can then use rem
throughout your app to take control of font sizing. One more bit of magic is to use a root font size that will equate to something you can easily do the maths from. 62.5% equates to 10px in normal conditions:
html {
font-size: 62.5% <--- this is 10px
}
With your root element under your control, you can now use rem
with confidence throughout:
body (or whatever) {
font-size: 2.1rem; <--- this is 21px
}