Two-way enlarger (manual)

This brings me to the concept of the two-way enlarger -- the best of both worlds.

Here, we start with 24px and subtract 1.25vw at first -- then, at a particular breakpoint, we switch to a base font size of 7px, and add 1.25vw to it.

html {
  font-size: calc(24px - 1.25vw);

  @include breakpoint($md) {
    font-size: calc(7px + 1.25vw);
  }
}

Now, at phone resolutions, the font size increases as viewport width decreases.  Then, somewhere in the tablet realm, the font size starts increasing as viewport width increases.

But, it's kind of difficult to hunt and peck for the right combination of font sizes and vw values.  It's not impossible, just a little tedious.  But it doesn't have to be this way...