enable-responsive-font-sizes confusion

[qcybb]

I'm confused about the $enable-responsive-font-sizes option.

When this option is enabled, it decreases the font size when shrinking the viewport.

Isn't this the opposite of what it should be doing? You want the font size to increase on smaller viewports for readability.

When enabled, the text is barely legible on my iPhone SE (2nd Gen).

Am I doing something wrong? Is there a way to make this option work in a reverse manner?

[coliff]

Responsive Font Sizes are awesome!
You can see a demo of it at: https://project-rfs.github.io/

• Font sizes are never smaller than normal body font-size
• the body text size is never changed in any viewport size
• The only font size changes are headings scale down nicely on smaller screens, but they do so that they are always proportionally sized (a h1 is always bigger than h2, h2 always bigger than h3 etc). A 'display-1' would usually be too big on an iPhone screen, but with Responsive Font Sizes enabled it scales down nicely.

For reference, here are the calculated sizes:

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw) ;
  }
  h1, .h1 {
    font-size: calc(1.375rem + 1.5vw) ;
  }
  h2, .h2 {
    font-size: calc(1.325rem + 0.9vw) ;
  }
  h3, .h3 {
    font-size: calc(1.3rem + 0.6vw) ;
  }
  h4, .h4 {
    font-size: calc(1.275rem + 0.3vw) ;
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw) ;
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw) ;
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw) ;
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw) ;
  }
  .close {
    font-size: calc(1.275rem + 0.3vw) ;
  }
}