どのビューポートでもスムーズに動いてくれるフォントサイズ探し、「:root」なら柔軟に！

Webデザインで、たしかに厄介なのは適切なフォントサイズはどれ？を検証することだと思います。

 

今回は、適切なフォントサイズを探すのに「:root」を使ってみませんかという提案記事をご紹介いたします。

 

反応の良いWebデザインを制作するにあたって厄介なのがタイポグラフィです。どのビューポートでもスムーズに動いてくれるのが理想的ですよね。

 

解決法の1つとして、標準的なフォントサイズからはじめて特定のブレークポイントまでいったら変更する、という方法が挙げられます。

 

ですが、この方法だとブレークポイントに到達するまでフォントサイズは変更されません。

CSS

p {
  font-size: 1em;
}
@media screen and (max-width: 45em) {
  p {
    font-size: 1.25em;
  }
}

 

:rootを使ってみませんか？

 

私がおすすめしたいのが　:rootセレクタ　です。これを使って、ビューポートの高さと幅からフォントサイズを計算する方法です。

CSS

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

 

この方法だと:rootの計算に基づいてroot emユニットを活用できるのです。

CSS

body {
  font: 1rem/1.6 sans-serif;
}

 

ビューポートユニット

 

ビューポートユニットを見てみると　calc(　)　ファンクションに値が入ってますね。フォントサイズがどうやって計算されているのか、さっと復習してみましょう。

 

・1vw＝ビューポートの幅の1%
・1vh＝ビューポートの高さの1%
・1vmin＝1vwと1vhのうち、小さい方
・1vmax＝1vwと1vhのうち、大きい方

 

これをiPhone7のビューポート（375×667）に当てはめてみると、計算される　:root　の値は、

CSS

:root {
  font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */
}

 

See the Pen Use :root for Flexible Type by Matt Smith (@AllThingsSmitty) on CodePen.

 

適切なタイポグラフィにはさまざまなアプローチ方法があるので、臨機応変に対応していきたいですね。

 

私は今回紹介したようなやり方で　:root　を使うのが、いちばん柔軟に対応できるように思います。

 

※本稿はFlexible type with :rootを翻訳・再編集したものです。