New Way

There are several ways to achieve this.

*CSS supports dimensions that are relative to viewport.

1. 3.2vw = 3.2% of width of viewport

2. 3.2vh = 3.2% of height of viewport

3. 3.2vmin = Smaller of 3.2vw or 3.2vh

4. 3.2vmax = Bigger of 3.2vw or 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

see css-tricks.com/…. and also look at caniuse.com/….

Old Way

1. Use media query but requires font sizes for several breakpoints

    body
    {
        font-size: 22px; 
    }
    h1
    {
       font-size:44px;
    }
   
    @media (min-width: 768px) 
    {
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
    }
   

2. Use dimensions in % or rem. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em.

• “Root Ems”(rem): The “rem” is a scalable unit. 1rem is equal to the font-size of the body/html, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Root Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..

• Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

see kyleschaeffer.com/….