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 element
em: 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
}