[chrismorgan]

All those media queries!

  500px ⇒ 14px
  570px ⇒ 15px
  620px ⇒ 16px
  680px ⇒ 17px
  720px ⇒ 18px
  800px ⇒ 19px
  860px ⇒ 20px
  920px ⇒ 21px
  1000px ⇒ 22px

This can be simplified a lot with the vw unit. 1vw = 1% of viewport width.

The differences between each pixel increase in font size seem rather arbitrary: 70, 50, 60, 60, 80, 60, 60, 80. Let's simplify it, going for 14px below 500px, 22px above 1000px, and linear interpolation between widths 500px and 1000px. That way you can just use calc(). Oh, and I'll use `:root` instead of `html`, for joie de vivre.

  :root {
      font-size: calc(6px + 1.6vw);
  }
  @media screen and (max-width: 500px) {
      :root {
          font-size: 14px;
      }
  }
  @media screen and (min-width: 1000px) {
      :root {
          font-size: 22px;
      }
  }

If a browser doesn't support calc() or the vw unit, it will just keep the browser's default of 16px.

[max_luster]

The idea of using calc and VW units to linearly increase the font size is pretty cool. On real sites, though, it's important to keep control over exactly when the increases in scale are triggered. I'll set up some breakpoints just for the root font-size shifts, and have other breakpoints coordinated with additional layout changes I make within a design. The scaling and breakpoint settings tend to be unique between designs and non-linear.

I'm going to follow up to this post soon with a SASS mixin that gets around the @media query code bloat and lets you coordinate with globally named breakpoints.

[chrismorgan]

> On real sites, though, it's important to keep control over exactly when the increases in scale are triggered.

I flatly disagree with this. It is typical for some significant alterations of layout to take place somewhere in scaling it down, but that is not incompatible with something like this. It is entirely feasible to have most of your responsive design using a technique like this but at a certain point change the layout; also, the font-size need not be a globally continuous function; it's entirely reasonable to have local discontinuities where you adjust the m or c of font-size = m x + c for a range of widths.