font-size: calc({X} + {Y}vw)

いまViewport sized typography with minimum and maximum sizes を読んでて、font-size: calc({X} + {Y}vw) っていう指定に魅力を感じてる。フォントサイズが 16px 以下にはならないようにして、あとはウィンドウの幅に合わせて文字サイズをでかくするよ、という指定。

:root {
  font-size: calc(16px + 3vw);
}

ぼくはブレークポイントをつくって表示を切り替えるのをできるだけ避けたいと思う派で（ユーザーのためにも開発者のためにも）、できればメディアクエリーは使いたくない。

namikuguri.github.ioでも以下のような指定があるわけだけど、もしかしたら font-size: calc({X} + {Y}vw) 指定方法にすればメディアクエリーの指定は削除できるかもしれない。

html {
  font-size: 100%;
}

@media screen and (min-width: 64rem) {
  html {
    font-size: 112.5%;
  }
}