CSSのフォントサイズ指定方法（vw、rem、em、px）

Webサイトのデザインにおいて、フォントサイズの指定は重要です。CSSでは、さまざまな単位を使ってフォントサイズを指定できます。本記事では、vw、rem、em、px などの単位の特徴と、適切な使い分けについて解説します。

1. px（ピクセル）

特徴

• 画面上の1ピクセルを基準にした固定サイズ。
• 一貫したデザインを作りやすい。
• 画面サイズや親要素の影響を受けない。

使用例

p {
  font-size: 16px;
}

適した場面

• デザインの意図を崩したくない場合。
• 固定レイアウトのサイトやアイコンなどのサイズ指定。
• 既存のデザインシステムを維持する必要があるとき。

注意点

• レスポンシブデザインに適応しにくい。
• ユーザーのブラウザ設定によるフォントサイズ変更が反映されないことがある。

2. rem（ルートem）

特徴

• ルート要素（html）のフォントサイズを基準にした相対単位。
• 一般的にブラウザのデフォルトフォントサイズは16pxなので、1rem = 16px。
• html { font-size: 10px; }と設定すれば、1rem = 10pxとなる。

使用例

html {
  font-size: 10px;
}
p {
  font-size: 1.6rem; /* 16px */
}

適した場面

• レスポンシブデザインで、フォントサイズを一括管理したいとき。
• ユーザーのフォントサイズ設定を尊重したい場合。
• 一貫したデザインルールを保ちつつ、柔軟に調整したいとき。

3. em（相対サイズ）

特徴

• 親要素のフォントサイズを基準にする。
• 1em は親要素のフォントサイズの1倍の大きさ。

使用例

div {
  font-size: 18px;
}
p {
  font-size: 1.5em; /* 18px × 1.5 = 27px */
}

適した場面

• 親要素ごとにサイズを調整したいとき。
• ボタンやナビゲーションメニューのテキストサイズを動的に変えたい場合。

注意点

• 親要素のサイズによって変動するため、意図しないサイズになることがある。
• em を入れ子で使用すると計算が複雑になり、管理が難しくなる。

4. vw（ビューポート幅）

特徴

• ビューポート（画面の幅）に対して相対的なサイズ。
• 1vw はビューポートの幅の1%に相当する。
• vh（高さ）、vmin（小さい方のビューポートサイズ）、vmax（大きい方のビューポートサイズ）も関連単位。

使用例

h1 {
  font-size: 5vw; /* 画面幅の5% */
}

適した場面

• 画面サイズに応じてフォントサイズを自動調整したいとき。
• ヘッダーやキャッチコピーなど、大きなフォントサイズを設定するとき。
• デバイスごとに異なる見え方を最適化したい場合。

注意点

• 画面幅が極端に小さいまたは大きいと、フォントサイズが読みにくくなる可能性がある。
• 最小・最大サイズをmin()やmax()関数で制御するとよい。

5. どの単位を使うべきか？

6. 実際の使い分けの例

スマホ・PCに対応したレスポンシブデザイン

html {
  font-size: 62.5%; /* 10px基準（1rem=10px） */
}
p {
  font-size: 1.6rem; /* 16px */
}
h1 {
  font-size: clamp(2rem, 5vw, 4rem); /* 最小20px, 最大40px */
}

ボタンのフォントサイズを親要素に合わせる

button {
  font-size: 1.2em;
}

画面幅に応じたフォントサイズ変更

@media (max-width: 768px) {
  body {
    font-size: 4vw;
  }
}

まとめ

• px は固定サイズ向け、デザインを崩したくない場合に有効。
• rem は全体の一貫性を保ちやすく、レスポンシブデザインに最適。
• em は親要素に依存するが、局所的な調整に便利。
• vw は画面サイズに応じたダイナミックなフォントサイズ調整に向いている。

それぞれの特徴を理解し、適切な場面で使い分けることで、柔軟で見やすいデザインを実現しましょう！