rem em px 違いは、サイズを何に対して相対的に決めるかにあります。remはルート要素のフォントサイズが基準なので、ページのどこでも1remは同じ大きさです。emは要素自身のフォントサイズが基準です（font-sizeで使う場合は親の基準）。そのため、コンポーネントごとに変わります。pxは固定のCSSピクセルで、ユーザーのフォントサイズの設定を無視します。目安は次のとおりです。フォントサイズとページの余白にはrem、テキストに合わせて伸びるべきもの（ボタンの内側の余白、アイコンのサイズ）にはem、罫線や影にはpx、メディアクエリにはemかremを使います。
emとremの計算方法
3つの単位の違いは、基準にする点だけです。MDNの長さのリファレンスは、次のように定義しています（2026年10月に確認）。
| 単位 | 基準 | ブラウザーの既定値での1単位 |
|---|---|---|
px |
何もなし。1px = 1/96インチ | 1px |
rem |
ルート要素（<html>）のフォントサイズ |
16px |
font-sizeでのem |
継承されたフォントサイズ（親のもの） | 16px、または親のサイズ |
font-size以外でのem |
要素自身の計算済みフォントサイズ | 要素のフォントサイズ |
16pxは一般的なブラウザーの既定値であり、定数ではありません。MDNは、ユーザーの設定でこの値が変わることがあると述べています。テキストに相対単位を使うべき理由は、まさにそこにあります。
コンポーネントの中での例は次のとおりです。
html { font-size: 100%; } /* ブラウザーの既定値では16px */
.card { font-size: 1.25rem; } /* 20px */
.card h2 { font-size: 1.5em; } /* 1.5 × 20px = 30px */
.card p { font-size: 1.5rem; }/* 1.5 × 16px = 24px。カードの影響は受けない */
.card .tag { padding: 0.5em; } /* タグ自身のフォントサイズの半分 */emの見出しは、置かれた位置に依存します。.cardの外に出すと24pxになります。remの段落は、どこにあっても24pxです。
emが累積する理由
font-sizeのemは親のサイズに掛け算されるので、入れ子になった要素では、さらに掛け算が重なります。
li { font-size: 0.875em; }3段の深さのリストは、0.875 × 0.875 × 0.875 ≈ 0.67、つまり基準サイズの約3分の2になります。16pxのルートからだと約10.7pxです。0.875remにすると、どの段も14pxのままです。この累積のため、フォントサイズにはremがより安全な選択であり、emは、ローカルのテキストに合わせて拡大縮小することが目的の場所に限って使うべきです。
CSSプロパティごとの単位の選び方
単位は、そのサイズが何に追従すべきかで選んでください。ユーザーのテキストの設定、コンポーネント自身のテキスト、または何にも追従しないか、のいずれかです。以下は推奨であり、デザイン上の判断です。仕様が求めているわけではありません。
| プロパティ | 単位 | 理由 |
|---|---|---|
font-size |
rem |
ユーザーの既定の文字サイズに追従し、累積しない |
line-height |
単位なし（1.5） |
要素の最終的なフォントサイズに応じて拡大縮小する |
| ボタン、バッジ、入力欄の余白 | em |
コントロール自身のテキストに合わせて伸びるので、大きな文字が端に触れない |
| セクション間の余白や間隔 | rem |
コンポーネント間でリズムが揃う |
本文の列のmax-width |
remかch |
文字が大きくなっても行の長さが読みやすいまま |
| テキストの横に置くアイコンのサイズ | em |
隣のテキストに揃う |
letter-spacing |
em |
字間がフォントサイズに比例する |
border-width、outline、box-shadow |
px |
細い罫線は、どんな文字サイズでも細いままであるべき |
| メディアクエリの条件 | em（またはrem） |
ブレークポイントがユーザーの既定の文字サイズに追従する |
画面に追従すべきで、テキストには追従しない幅はpxでかまいません。1pxの罫線、44pxの固定のアバター、1200pxのページコンテナーは、フォントサイズに合わせて大きくなる必要はありません。ただし、その中のテキストは大きくなるべきです。
余白は判断が必要です。remの余白は、ユーザーが文字を大きくしたときにページのリズムをテキストと揃えます。pxの余白は、大きな文字のときに小さい画面により多くのコンテンツを収めます。360pxの幅のスマートフォンでは、このトレードオフがすぐ見えるので、テストする価値があります（最後の節を参照）。
フォントサイズとアクセシビリティでの rem と px
フォントサイズにはrem（または%やmediumなどのキーワード）を使ってください。pxのフォントサイズは、ユーザーがブラウザーで選んだ既定の文字サイズを無視するからです。デスクトップ版Chromeでは、この設定は「設定 > 外観 > フォントサイズ」にあり、「フォントをカスタマイズ」でさらに選べます（Chromeヘルプ）。既定値から20pxに上げたユーザーは、1remでは20pxの本文を得ますが、16pxでは16pxのままです。
ブラウザーのズームは別の働きをします。ズームはすべてを拡大します。pxも含みます。そのため、pxのレイアウトも、Ctrlキーと+を押すと拡大します。フォントサイズの設定は、remとpxが違う振る舞いをする例外的な場面で、弱視の人は、横にスクロールするページにせずに文字だけを大きくしたいときにこの設定を使います。
WCAG 2.2の達成基準1.4.4 テキストのサイズ変更（レベルAA）は、テキストを内容や機能を失わずに200%まで拡大できることを求めています。その十分な手法には、フォントサイズにem単位を使うことが含まれます。相対単位はこの基準を満たしやすくしますが、保証するものではありません。固定の高さの箱は、大きくなったテキストを切り取ってしまうことがあるからです。
スマートフォンとシステムの文字サイズ
スマートフォンでは状況が変わりつつあります。Chrome 146（2026年3月10日安定版）は、オペレーティングシステムとブラウザーの文字サイズの設定に、ルートのフォントサイズを追従させる任意のメタタグを追加しました（Chrome 146のリリースノート）。
<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">このタグがあると、MDNのtext-scaleのリファレンスによると、rem、em、フォントサイズのキーワードはシステムの設定に合わせて拡大縮小しますが、pxのフォントサイズはしません。2026年10月時点で、MDNはこのタグを実験的で対応が限られるものとして扱い、モバイルの文字の拡大率は200%から300%超まであり得ると警告しています。そのため、このタグを使うページは、その範囲でテストする必要があります。タグがない場合、AndroidのChromeは「設定 > ユーザー補助機能」に既定のズームのスライダーを用意しており、ページ全体を拡大します（Chromeヘルプ）。その場合、pxとremは一緒に大きくなります。
これは、今日フォントサイズにremを使うべき最も強い理由です。remで作られたサイトは、メタタグを1つ追加した日から、システムの文字サイズに対応できます。
ルートのフォントサイズと62.5%のテクニック
ルートのフォントサイズは、そのままにするか、パーセンテージで設定してください。html { font-size: 16px; }と設定すると、すべてのremが固定の16pxを指すので、ページ全体でユーザーの設定を上書きしてしまいます。
よく知られた62.5%のテクニックは、html { font-size: 62.5%; }と設定します。これにより、既定値で1remが10px、1.6remが16pxになります。パーセンテージはユーザーの既定値に適用されるので、ユーザーによる拡大縮小は保たれます。ただし、16pxのremを前提に書かれたサードパーティのコンポーネントは、意図した大きさの62.5%で表示されてしまいます。計算を簡単にしたいなら、Sassの関数やCSSのカスタムプロパティで、ルートを変えずに変換するほうがよいでしょう。
pxからremへの変換表
既定のルートのフォントサイズでは、rem = px / 16です。
| px | rem |
|---|---|
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
入力欄は16px（1rem）以上に保ってください。テキストが小さい入力欄では、iOSのSafariが拡大表示するからです。
メディアクエリでのem、rem、px
メディアクエリの条件にはemかremを使ってください。そうすると、ブレークポイントがユーザーの既定の文字サイズに追従します。メディアクエリでは、両方の単位は同じ意味です。Media Queries Level 4の仕様は、そこでの相対単位は、ユーザーエージェントやユーザーの設定によって定まる初期のフォントサイズを基準にすると定めています。スタイルシートのhtmlのルールは基準になりません。
/* 48em = 既定の16pxで768px、20pxで960px */
@media (min-width: 48em) {
.layout { display: grid; grid-template-columns: 1fr 2fr; }
}縦向きのタブレットで、ビューポートの幅が820pxの場合を考えます（820x1180は、StatCounterの2026年9月のデータで、世界のタブレット解像度の5.06%でした）。既定の設定では、2カラムのレイアウトは768pxで有効になるので、タブレットは2カラムになります。既定値が20pxのユーザーは、960pxまで1カラムになります。これは、大きな文字でもまだ収まるレイアウトです。min-width: 768pxというクエリでは、そのユーザーにも2カラムを強制し、文字を押しつぶしてしまいます。
ブレークポイントの値の決め方はレスポンシブのブレークポイントの選び方で、クエリの構文そのものはCSSメディアクエリのガイドで扱っています。
スマートフォン幅で単位を確認する
単位がユーザーの文字サイズに反応するかを確認するには、デスクトップの既定のフォントサイズを大きくし、小さいスマートフォン幅でページを見てください。
- デスクトップ版Chromeで、「設定 > 外観 > フォントサイズ」を開き、大きいサイズを選ぶか、「フォントをカスタマイズ」で正確なサイズを設定します。
- 幅360pxのスマートフォンのビューポートでページを開きます。Mobile View Extensionは、タブをモバイルのユーザーエージェントと画面サイズのスマートフォンとして読み込み直します。プリセットを選ぶか、カスタムの解像度として360 × 800を入力してください。DevToolsのデバイスモードも使えます。
- 本文のテキストが大きくなったかを確認します。大きくなっていなければ、何かがフォントサイズかルートのサイズを
pxで固定しています。 - ボタンからはみ出すテキスト、固定の高さの箱で切れるラベル、2行に折り返すナビゲーションを探します。
- 設定を既定値に戻し、2つの状態を並べて比較します。
これはデスクトップのフォントサイズの設定だけをテストします。プレビューはマウスを使うデスクトップ版Chromeで動くので、スマートフォンのシステムの文字サイズ、Safariの描画、Androidのtext-scaleタグは再現されません。それらは実機かエミュレーターで、システムのフォントサイズを上げて確認してください。
これらの単位で流動的なレイアウトを作る方法については、レスポンシブウェブデザインとはを参照してください。
よくある質問
フォントサイズにはremとpxのどちらを使うべきですか？
フォントサイズにはremを使ってください。pxのフォントサイズは、ユーザーがブラウザーで選んだ既定の文字サイズを無視します。一方、remはそれに追従します。また、スマートフォンでChromeのtext-scaleタグが拡大縮小するのも、remのフォントサイズです。
emとremはどんなときに使い分けますか？
サイズが要素自身のテキストに追従すべきときにemを使います。ボタンやバッジの余白、テキスト内のアイコン、字間、メディアクエリの条件などです。入れ子のfont-sizeの値には、累積するのでemを避けてください。
1remは常に16pxですか？
いいえ。1remはルート要素のフォントサイズと同じで、それが16pxになるのは一般的なブラウザーの既定値のときだけです。ユーザーの設定、htmlへのパーセンテージ、text-scaleタグによって変わることがあります。
emとremはメディアクエリで違う動きをしますか？
いいえ。メディアクエリでは、どちらもブラウザーとユーザーの設定から得た初期のフォントサイズが基準なので、48emと48remは同じブレークポイントになります。スタイルシートのhtmlに設定したフォントサイズは、それらに影響しません。