フォントサイズの基本を学ぶ！ウェブサイトでの重要性

サイトデザインにおいて見落とされがちですが、フォントサイズは重要です。

フォントサイズ一覧

以下は、よく使われるfont-sizeの値の一覧とそれぞれの説明です。

記述	種類	説明
12px	Absolute Size (絶対サイズ)	ピクセル単位で指定されるフォントサイズ。画面上の実際の大きさが一定。
1em	Relative Size (相対サイズ)	親要素のフォントサイズに対する相対的なサイズ。親が16pxなら、1emも16pxになる。
1rem	Root em	ルート要素（通常は``要素）のフォントサイズに基づく。ルートが16pxなら、1remも16pxになる。
100%	Percentage Size (パーセンテージサイズ)	親要素のフォントサイズに対するパーセンテージでのサイズ。親が16pxなら、100%も16pxになる。
1vw	Viewport Width	ビューポートの幅の1%に相当するサイズ。
1vh	Viewport Height	ビューポートの高さの1%に相当するサイズ。
1vmin	Viewport Minimum	vwとvhのうち、小さい方の1%に相当するサイズ。
1vmax	Viewport Maximum	vwとvhのうち、大きい方の1%に相当するサイズ。
small、medium、etc.	Keyword Sizes (キーワードサイズ)	ブラウザによって事前に定義されたキーワード。’medium’はデフォルトサイズ。
calc(1em + 2px)	Calc Function	計算関数を使用してサイズを動的に算出。例えば、親要素のフォントサイズに2pxを足したサイズを指定する場合などに使用します。

基準フォント	実際の表示
ふぉんと	これは絶対サイズ（24px）での文字表示です。
ふぉんと (12px)	これは相対サイズ（2em）での文字表示です。
ふぉんと	これはroot em（1.5rem）での文字表示です。
ふぉんと	これはパーセンテージサイズ（150%）での文字表示です。
ふぉんと	これはビューポートの幅（5vw）での文字表示です。
ふぉんと	これはビューポートの高さ（5vh）での文字表示です。
ふぉんと	これはビューポートの最小値（5vmin）での文字表示です。
ふぉんと	これはビューポートの最大値（5vmax）での文字表示です。
ふぉんと	これはキーワードサイズ（large）での文字表示です。
ふぉんと (20px)	これはcalc関数を使ったサイズ（1em + 10px）での文字表示です。

ピクセル単位で指定されるフォントサイズ。

デザインの特定の要件に基づいて、一定のピクセルで文字サイズを指定する場合に使用。

親要素のフォントサイズに対する相対的なサイズ。

親要素のサイズに基づいて柔軟にサイズを変更したい場合や、コンポーネントの再利用性を高めたい場合に使用。

ルート要素（通常は<html>要素）のフォントサイズに基づく。

サイト全体の基本的なフォントサイズを基準として、一貫性を持たせたい場合に使用。

親要素のフォントサイズに対するパーセンテージでのサイズ。

親要素に対する割合でサイズを指定したい場合に使用。

ビューポートの幅の1%に相当するサイズ。

画面の幅に応じて文字サイズを動的に変更したい場合に使用。

ビューポートの高さの1%に相当するサイズ。

画面の高さに応じて文字サイズを動的に変更したい場合に使用。

vwとvhのうち、小さい方の1%に相当するサイズ。

画面の幅や高さのどちらかが狭い場合に、文字サイズを動的に調整したい場合に使用。

vwとvhのうち、大きい方の1%に相当するサイズ。

画面の幅や高さのどちらかが広い場合に、文字サイズを動的に調整したい場合に使用。

ブラウザによって事前に定義されたキーワード。

ブラウザのデフォルトのサイズをベースに、標準的なサイズを指定したい場合に使用。

計算関数を使用してサイズを動的に算出。

複数の単位や数値を組み合わせて、動的なフォントサイズを計算したい場合に使用。

これらのfont-sizeの種類を理解し、適切な場面で使用することで、レスポンシブデザインやユーザビリティの向上に寄与することができる。

適材適所でフォントサイズを使用しましょう。