CSS Font Sizing。 Pixels vs Em vs Rem vs Percent vs Viewport Units

Pixels vs Em vs percent vs rem、およびどのフォント プロパティをいつ使用するかについては、これまで多くの議論がなされてきました。 オンライン上に 100 以上の記事があるにもかかわらず、これらのフォント プロパティの使用方法がプロジェクトのニーズによって異なるため、このトピックは非常にわかりにくいものとなっています。 例えば、ベースレベル（htmlやbody要素）で固定ピクセル値を使わない方がいいという意見もあります。 しかし、私のようにbootstrapに依存している人間にとって、これはお勧めできません。 結局、基本値はピクセル単位で固定され、プロジェクト全体のフォント プロパティを基本ピクセル値に関連して作成する必要があります。 もちろん、正しい方法はなく、どのフォント サイズをどのように使用するかは、これらのフォント サイズ単位と問題のプロジェクトに対する理解に基づいて、ほぼ決定されるでしょう。 レスポンシブ デザインが登場する以前は、タイポグラフィーから幅、パディング、高さまで、すべてのフォント サイズとしてピクセルが広く使用されていました。 しかし、ピクセルは固定サイズの単位であり、ビューポートのサイズに基づいて変化したり、スケーラブルに変化するものではありません。 ピクセルを使ってレスポンシブWebサイトを構築する場合、メディアクエリ内の値を含め、CSSスタイルシート全体でピクセルベースの値をすべて追跡することは非常に困難です。 では、CSSスタイルシートの変更を最小限に抑えつつ、スケーラビリティを確保できるフォントプロパティは何でしょうか。 そこで、em、rem、percent、および viewport 単位が登場します。

Em:Em は、ブラウザによってピクセル値に変換される、柔軟でスケーラブルな単位です。 クロームのデフォルトのフォント サイズが 16 px である場合、1 em = 16 ピクセルです。 emに関する大きな誤解の一つは、親要素のフォントサイズとの相対的な関係であることです。 W3仕様では、emは使用される要素のフォントサイズに対して相対的です。 この記事は、emの概念をわかりやすく丁寧に説明しています。 emがどのように機能するかを本当に知りたいのであれば、上記の記事を読み飛ばさないようにしてください。 emは一般的に、見出し、テキスト、段落などのタイポグラフィーと、マージン、パディングなどのタイポグラフィーに関連する要素に使用されます。 htmlやbodyの基本要素のフォントサイズをピクセルで設定し、タイポグラフィ要素のプロパティをemsで定義すれば、レスポンシブデザインでは

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

のように基本レベルのフォントサイズを変更するだけで、すべてのems値は自動的に基本レベルに再計算されます。 たとえば、フォント サイズが 16px の <div> がフォント サイズが 2em の <p> を含む場合、<p> 要素は 32px に変換されます。 ここで、フォントサイズが 0.5em の <p> の内部に <div> を追加すると、div の結果は 8px ではなく 32px の半分である 16px になります。 そこで登場するのが、

Rem です。 レムは、ルート要素（html要素）のフォントサイズに対する相対的なものです。 html 要素の font-size が 16 px の場合、1rem = 16 px です。 Remは、要素の入れ子に関係なく、常にルート要素からの相対値になります。 しかし、remだけを使用してemsを使用しない場合、タイポグラフィが大きくなりすぎたり小さくなりすぎたりして、スケーリングの問題につながる可能性があるため、それなりの問題が発生します。 この記事では、この問題を解決する素晴らしい方法について説明します。 パーセント値は、要素の親の値または要素自体の別のプロパティから、常に別の値に対する相対値です。 パーセンテージはレスポンシブ デザインで広く使用されています。 TwitterのBootstrapフレームワークが良い例でしょう。 Bootstrap の 12 カラム レイアウトでは、幅がパーセントで設定されているため、常に流動的で、親要素に対して相対的なサイズになります。
パーセントは、コンテナー、div の幅と高さ、およびレスポンシブ画像のサイズ設定によく使用されます。

1vw = ビューポート幅の 1%
1vh = ビューポート高さの 1%

ここでいうビューポートとは、ブラウザのウィンドウ サイズのことを指します。 親要素/ルート要素ではなく、ビューポート幅に基づいて要素をサイズ調整したい場合、ビューポート単位はあなたが使用する必要があるフォントサイズ調整単位です。
このプロパティの使用方法について説明している素晴らしい記事を参照してください。 画像、コンテナ、div の幅と高さ、タイポグラフィー用の ems と rems、および margin、padding などのタイポグラフィーに関連する要素の設定にパーセントを使用しています。 現在、レスポンシブタイポグラフィのためにビューポートユニットを使って遊んでいますが、これはすごいことだと思います。 これらのフォント プロパティをたくさん試してみると、すぐに自分に合ったスタイルになるはずです。