フォントサイズの単位はどう選ぶ？px・em・remの違いを初心者向けに解説

2025年04月13日
fvImg
レスポンシブWebデザインに欠かせない単位「px・em・rem」。それぞれの特徴と使い分けのコツを初心者にもわかりやすく解説します。

目次

はじめに

Webサイトを作っていると、px や em、rem など、似たような単位がたくさん出てきます。
「どれを使えばいいの？」「見た目は同じに見えるけど、違いがよくわからない…」
そんな悩みは、Web初心者なら誰しもが通る道です。
本記事では、Webデザインの「読みやすさ」や「レスポンシブ対応」にも関わる大事なポイントであるフォントサイズの単位について、わかりやすく・実践的に解説します。

px（ピクセル）とは？

まずpxとは、「ピクセル（pixel）」の略称で、画面上の一番小さい点のことを指します。
たとえば、あなたが今見ているスマホやパソコンの画面は、小さな点が集まって映像や文字が表示されています。その点1つ1つが「ピクセル」です。

p {
  font-size: 16px;
}

この場合、段落pの文字サイズは常に16ピクセルで表示されます。親要素のサイズに影響されることはなく、「絶対的なサイズ」として指定されます。

▼メリット

  • サイズが固定されているため、デザインが正確に再現しやすい
  • XDやFigmaなどのデザインツールと数値が一致しやすい
  • 細かいサイズ調整がしやすい

▼デメリット

  • モバイル端末で読みづらくなることがある
  • ブラウザの文字拡大機能に対応しにくく、アクセシビリティに劣る

補足：デバイスによって”1px”は見た目が違う？

ここで「えっ？じゃあiPhoneとパソコンで見たときの1pxって同じなの？」と疑問に思った方、鋭いです！
実は、1px = 物理的なサイズではありません。
デバイスごとにピクセル密度（DPIやPPIとも呼ばれます）が違うため、「見た目の大きさ」はデバイスによって変わります。
でも安心してください。
CSSで指定する16pxなどは、「論理ピクセル」として統一されたサイズなので、基本的にブラウザが自動で調整してくれます。

こんなときにpxを使うと便利

  • ボーダー（境界線）やシャドウ（影）など、細かいデザインに調整が必要なとき
  • 特定の要素だけキッチリとしたサイズにしたいとき
  • 仮デザインやワイヤーフレームを作成するとき

em（エム）とは？

emは、”親要素のfont-size” を基準とする相対的な単位です。
つまり、emは常に親のサイズに影響される、「親の影響を受ける柔軟な単位」ともいえます。

body {
  font-size: 16px;
}

.container {
  font-size: 1.5em; /* ← 16px × 1.5 = 24px */
}

.container p {
  font-size: 2em; /* ← 24px × 2 = 48px ← ここ注意！ */
}
emの仕組み

この例では、親要素の文字サイズが16pxで子要素で指定する1emは「1em＝16px」
.containerのフォントサイズは、
1.5em = 16px × 1.5 = 24px
その子要素であるpタグはbodyの16pxではなく、親の要素の24pxを基準にしているので、
2em = 24px × 2 = 48px
となります。

▼メリット

  • 親要素に比例してサイズが変化するので柔軟性が高い
  • レイアウトや余白の調整にも使いやすい

▼デメリット

  • 入れ子が深くなると、サイズの計算が複雑になる
  • 意図せず大きくなりすぎたり小さくなりすぎることがある

よくある誤解と対策

「1em = 16px」と思っていたらサイズが違う！
→ 親要素のサイズが16pxでなければ、emのサイズも変わります。

対策として、複数階層でemを使うときは、意図的にサイズをリセットする工夫が必要です。

emはどんなときに使う？

font-sizeに連動して変化させたいとき、emは「親要素のfont-sizeを基準」にサイズを決められるので、フォントサイズが変わると自動で調整してくれるのが最大のメリットです。
「その場に応じて変化してほしい要素」に使うのがベスト！

▼こんな場面に便利！

  • セクション内の見出しや段落のサイズ調整
  • モジュールごとに一括で大きさを変えたいとき
  • コンポーネントの中で、相対的なサイズを保ちたいとき
  • paddingやmarginをfont-sizeに合わせたいとき

ボタンのサイズを画面サイズや親の文字サイズに合わせて自然に調整したいとき。

フォントサイズに対する余白を指定することで、文字サイズを変更しても余白が違和感なく調整できるようになります。

button {
  font-size: 1em;
  padding: 0.5em 1em; /* フォントサイズに対する余白の指定 */
}

一部だけ大きさを変えたいとき

よくある単語の強調にもemは便利です。<strong>とは別にサイズを指定したい際におすすめです。

<p>この商品は <span class="important">数量限定</span> です！</p>
.important {
  font-size: 1.2em; /* 親よりちょっと大きめに */
  color: red;
}

rem（ルートエム）とは？

remは「root em（ルートエム）」の略で、html要素のfont-sizeを基準とする相対単位です。
つまり、どの要素に使っても常に同じ基準でサイズが計算されます。

html {
  font-size: 16px;
}

p {
  font-size: 1rem; /* 常に16px */
}

h1 {
  font-size: 2rem; /* 16px × 2 = 32px */
}
remの仕組み

この例のように、htmlに指定したfont-size: 16pxがすべてのremの基準になります。
なので、どの要素に書いても 1rem = 16pxになるため、サイズが一貫してわかりやすいです。

▼メリット

  • ネストしてもサイズが変わらないので、設計が安定
  • 全体の文字サイズをメディアクエリ1か所で調整可能
  • アクセシビリティやレスポンシブ対応に強い

▼デメリット

  • 親要素に合わせた柔軟な調整にはやや不向き
  • コンポーネント単位で微調整したい場合はemの方が便利

remが特に便利なケース

レスポンシブデザインを考えるとき、 remならhtmlのフォントサイズをメディアクエリで変えることで、スマホ・PCに合わせた調整ができます。

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

上記のようにすると、2remの文字サイズは、

PCで：32px
スマホで：28px

のように自動で変わります。メディアクエリ1か所だけ変更すれば、全体のサイズも調整できるのはとても楽ちんですね。

▼実際にremとpxを変換してみたい方は、下記の変換ツールをご活用ください

px⇔rem変換ツール｜1remは何px？即確認できる便利ツール

まとめ：px ・ em ・ rem の使い分け早見表

emと併用する場合は、「rem＝全体設計、em＝部品の調整」と使い分けると分かりやすいです。

単位基準サイズ変動向いている用途
px固定値変わらない細かいUI、画像サイズ
em親要素のfont-sizeネストで変わるUIパーツ、フォームなど
remhtml要素のfont-size常に一定本文、見出し、全体設計

単位の使い分けをしっかり理解することで、
読みやすくてメンテナンスしやすいWebデザインが作れるようになります。
ぜひこの記事を参考に、実際のWeb制作で使い分けを試してみてください。

最終更新：