/* 最小フォントサイズ : 16px */
            html {
            font-size: 16px;
            }

            /*
            * レスポンシブフォントサイズ
            * ウィンドウ幅 860px から 1280px まで、
            * フォントサイズが 16px から 24px に流動的に変化する
            */
            @media (min-width: 860px) {
            html {
            font-size: /* TODO */ ;
            }
            }

            /* 最大フォントサイズ : 幅 1280px 以上は 24px */
            @media (min-width: 1280px) {
            html {
            font-size: 24px;
            }
            }

                font-size = calc(1rem + ((1vw - XX) * YY))

- XX : ViewPort の最小幅 / 100 (単位 : px)
- YY : 100 * フォントサイズの差 / ViewPort 幅の差 (単位 : なし)
            

                XX と YY にあたる数値を計算する必要がある。

今回の例でいくと、XX は次のように計算する。「ViewPort の最小幅」、つまりフォントサイズを動的に変え始める最小サイズは 860px 指定したので、860px / 100 で 8.6px となる。

続いて YY だが、コチラは「フォントサイズの差」が 24px - 16px = 8px、「ViewPort 幅の差」が 1280px - 860px = 420px となる。100 * 8(px) / 420(px) で 1.90476... となる。四捨五入して 1.9048 という数値を使うことにしよう。

こうして導いた値を利用すると、以下のようになる