サイトデザインにおいて見落とされがちですが、フォントサイズは重要です。
フォントサイズ一覧
以下は、よく使われる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）での文字表示です。 |
種類別用途
Absolute Size (絶対サイズ) – 例: px
ピクセル単位で指定されるフォントサイズ。
デザインの特定の要件に基づいて、一定のピクセルで文字サイズを指定する場合に使用。
Relative Size (相対サイズ) – 例: em
親要素のフォントサイズに対する相対的なサイズ。
親要素のサイズに基づいて柔軟にサイズを変更したい場合や、コンポーネントの再利用性を高めたい場合に使用。
Root em – rem
ルート要素（通常は<html>要素）のフォントサイズに基づく。
サイト全体の基本的なフォントサイズを基準として、一貫性を持たせたい場合に使用。
Percentage Size (パーセンテージサイズ) – %
親要素のフォントサイズに対するパーセンテージでのサイズ。
親要素に対する割合でサイズを指定したい場合に使用。
Viewport Width – vw
ビューポートの幅の1%に相当するサイズ。
画面の幅に応じて文字サイズを動的に変更したい場合に使用。
Viewport Height – vh
ビューポートの高さの1%に相当するサイズ。
画面の高さに応じて文字サイズを動的に変更したい場合に使用。
Viewport Minimum – vmin
vwとvhのうち、小さい方の1%に相当するサイズ。
画面の幅や高さのどちらかが狭い場合に、文字サイズを動的に調整したい場合に使用。
Viewport Maximum – vmax
vwとvhのうち、大きい方の1%に相当するサイズ。
画面の幅や高さのどちらかが広い場合に、文字サイズを動的に調整したい場合に使用。
Keyword Sizes (キーワードサイズ) – 例: medium
ブラウザによって事前に定義されたキーワード。
ブラウザのデフォルトのサイズをベースに、標準的なサイズを指定したい場合に使用。
Calc Function – calc()
計算関数を使用してサイズを動的に算出。
複数の単位や数値を組み合わせて、動的なフォントサイズを計算したい場合に使用。
これらのfont-sizeの種類を理解し、適切な場面で使用することで、レスポンシブデザインやユーザビリティの向上に寄与することができる。
適材適所でフォントサイズを使用しましょう。
コメント