プログラミング

プログラミング

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

1,786 views

読了時間 : 約1分29秒

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

 

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

 

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

 

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

 

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

CSS

 

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

 

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

CSS

 

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

CSS

 

ビューポートユニット

 

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

 

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

 

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

CSS

 

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

 

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

 

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

 

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

おすすめ新着記事

おすすめタグ