【CSS】remとemの違いとは？font-sizeや余白で迷わない使い分けを解説

CSSで文字サイズや余白を指定するとき、px、rem、emのどれを使えばよいか迷うことがあります。特にremとemは名前が似ているため、「どちらも相対単位なのは分かるけど、基準が何なのか分からない」と感じる方も多いはずです。remはルート要素の文字サイズを基準にする単位、emは親や自分自身の文字サイズを基準にする単位です。

この記事では、remとemの違い、pxとの使い分け、font-sizeや余白での実務的な使い方まで解説します。

remとemの違いとは？

remとemは、どちらも文字サイズを基準にした相対単位です。

.title {
  font-size: 2rem;
}

.button {
  padding: 0.75em 1.5em;
}

remはルート要素が基準

remは、ルート要素であるhtmlの文字サイズを基準にします。

多くのブラウザでは、初期の文字サイズは16pxです。そのため、特に変更していなければ次のように考えられます。

指定	目安
1rem	16px
1.5rem	24px
2rem	32px

emは親や自分の文字サイズが基準

emは、指定するプロパティによって基準が少し変わります。文字サイズでは親要素のfont-size、余白ではその要素自身のfont-sizeが基準になります。

.box {
  font-size: 20px;
  padding: 1em;
}

この場合、padding: 1em;は20pxになります。

remはページ全体で安定しやすく、emはその要素の文字サイズに合わせて余白も一緒に変えたい場面で便利です。

px・rem・emの違い

CSSのサイズ指定では、px、rem、emをよく使います。

単位	基準	向いている場面
px	固定値	枠線、細かな調整、画像サイズ
rem	htmlの文字サイズ	本文、見出し、余白の基本設計
em	親または自分の文字サイズ	ボタンのpadding、アイコン間隔

なぜpxではなくremを使うべきなのか？（アクセシビリティ視点）

文字サイズを指定する際、「直感的に分かりやすいからpxでいいや」と考えてしまいがちですが、実務では本文や見出しのfont-sizeにpxを多用するのは非推奨とされています。その最大の理由は、Googleも重要視している「アクセシビリティ（すべての人が快適にWebサイトを使えること）」への配慮です。

世の中には、視覚障害のある方や高齢者の方など、ブラウザの標準機能で「文字サイズ：大」に設定してWebサイトを閲覧しているユーザーが数多くいます。

もし文字サイズをpxで完全に固定してしまうと、ユーザーが「もっと文字を大きく読みたい」と望んでも、サイト側の文字サイズが大きくならず、閲覧を妨げてしまう原因になります（W3CのWebアクセシビリティガイドラインでも指摘されています）。

そのため、ユーザーが設定した文字サイズを尊重しつつ、デザインを崩さないようにするために、現在のWeb制作では「フォントサイズはremで設計する」のが世界標準のルールとなっています。

実務で大活躍！remの計算を爆速にする「62.5%」の裏技

remは非常に便利な単位ですが、1点だけデメリットがあります。それは「計算がめんどくさい」ということです。

ブラウザの初期文字サイズ（16px）のままだと、デザインカンプ（設計図）がpxで書かれている場合、「24pxを指定したいから……24 ÷ 16で、1.5remか」といちいち計算しなければなりません。これではコーディングのスピードが落ちてしまいます。

そこで、実際の制作現場ではhtml要素にfont-size: 62.5%;を指定するという定番のテクニックがよく使われます。

html {
  font-size: 62.5%; /* 16px × 62.5% ＝ 10px になる */
}

ブラウザの基準である16pxに62.5%をかけると、計算上のルート文字サイズがぴったり「10px」になります。

これにより、remの計算が以下のように劇的に直感的になります。

• 14pxにしたい場合 ➔ 1.4rem
• 16pxにしたい場合 ➔ 1.6rem
• 24pxにしたい場合 ➔ 2.4rem

このように、小数点を1桁ずらすだけでよいため、計算の手間が一切なくなります。実務でremを使った設計を行う際は、この「62.5%のベース設定」をセットで行うのが標準的な流れとなっています。

font-sizeはremで統一すると管理しやすい

見出しや本文の文字サイズは、remで統一すると管理しやすくなります。

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

文字サイズをpxで固定しすぎると、ユーザーのブラウザ設定に追従しにくくなる場合があります。

emが入れ子で大きくなる理由

emでつまずきやすいのが、入れ子構造でサイズがどんどん変わる問題です。

.parent {
  font-size: 1.2em;
}

.child {
  font-size: 1.2em;
}

この場合、.childは親の1.2倍をさらに1.2倍するため、想像より大きくなることがあります。

.parent {
  font-size: 1.2rem;
}

.child {
  font-size: 1rem;
}

入れ子の中でも文字サイズを安定させたい場合は、emよりremを使うと管理しやすくなります。

emが便利な場面

emは難しく見えますが、使いどころを絞ると便利です。

ボタンの余白を文字サイズに合わせる

ボタンでは、文字サイズに合わせてpaddingも変わってほしいことがあります。

.button {
  font-size: 1rem;
  padding: 0.75em 1.5em;
}

この場合、ボタンの文字サイズを変えると、余白も自然に連動します。

.button-large {
  font-size: 1.25rem;
}

アイコンと文字の間隔を調整する

アイコン付きボタンでは、文字サイズに合わせて余白が変わるとバランスを保ちやすくなります。

.icon-button {
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}

remとメディアクエリを組み合わせる

スマホ対応では、メディアクエリで文字サイズや余白を調整することがあります。

.section-title {
  font-size: 2rem;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
  }
}

このように、remを使っていてもメディアクエリで切り替えられます。

clamp()を使う方法もある

画面幅に合わせて自然に文字サイズを変えたい場合は、clamp()も便利です。

.hero-title {
  font-size: clamp(1.75rem, 5vw, 3rem);
}

この指定では、最小1.75rem、最大3remの範囲で、画面幅に応じて文字サイズが変わります。

viewport単位だけで文字サイズを決めると、画面幅によって小さすぎたり大きすぎたりします。最小値・最大値も考えましょう。

実務で迷わないrem・emの使い分け

実務では、次のように使い分けると整理しやすいです。

用途	おすすめ	理由
本文のfont-size	rem	ページ全体で安定する
見出しのfont-size	rem	階層設計しやすい
ボタンのpadding	em	文字サイズに連動する
カードの余白	rem	全体で統一しやすい
1pxの線	px	固定値の方が分かりやすい

公式ドキュメントも確認する

remやemなどCSSの長さ単位を正確に確認したい場合は、公式情報も参考になります。

• MDN Web Docs CSS length
• MDN Web Docs font-size
• MDN Web Docs clamp()

まとめ：文字サイズはrem、部品の余白はemが使いやすい

この記事では、CSSのremとemの違いについて解説しました。

remはルート要素の文字サイズが基準、emは親や自分の文字サイズが基準です。

文字サイズやページ全体の余白はremで管理すると安定しやすく、ボタンのpaddingやアイコンの間隔はemを使うと文字サイズに合わせて自然に調整できます。

emは入れ子になると計算が複雑になりやすいため、初心者の方はまずfont-sizeはrem、ボタンの内側余白はemという使い分けから始めるとよいでしょう。