:root
element, not your body
. By doing this you can reference this font size anywhere in your document with the rem
unit.16px
, and 100%
would equal 16px
.0px
, and in order for your text to work on screens as small as possible, you should set your font size to 0%
. This might sound absurd, a font size of 0
isn’t useful, but neither is a browser width of 0
and that’s where our styles start. From there, ramp up the base font size as quickly as possible using easing and adjusting your maximum context.rem
everywhere and %
on :root
%
on the :root
element, and rem
everywhere else. Any transitional CSS unit will work, you can even mix px
and vh
if you wanted to. But again, best practice is to use rem everywhere and %
on the :root
element.