WebサイトのCSSでフォントサイズを指定する方法はいくつかありますが、その中でもよく使われるのが rem と %（パーセント） です。
どちらも「相対単位」ですが、基準が違うため仕組みを理解しておかないと意図しないサイズになることがあります。
この記事では remと%の関係 を整理して解説します。
まず結論：基準が違う
remと%の一番大きな違いは、どこを基準にサイズを計算するかです。
rem
HTML要素（html）のフォントサイズを基準に計算される。
%
親要素のフォントサイズを基準に計算される。
つまり、
rem = ページ全体の基準サイズ
% = 親要素からの相対サイズ
という考え方になります。
remの仕組み
remは「root em」の略で、root（html）のフォントサイズを基準に計算されます。
例えば、ブラウザの標準設定では
htmlのフォントサイズ
16px
になっていることが多いです。
この場合
1rem = 16px
2rem = 32px
0.5rem = 8px
という計算になります。
remは 親要素の影響を受けない ため、サイト全体でサイズ管理しやすいのが特徴です。
%の仕組み
%は 親要素のフォントサイズを基準に計算 されます。
例えば
親要素
font-size: 20px
子要素
font-size: 50%
この場合
50% × 20px = 10px
になります。
さらに入れ子構造になると、計算がどんどん重なります。
親
20px
子
50% → 10px
孫
200% → 20px
このように 階層ごとにサイズが変わる のが%の特徴です。
remと%の関係
実は多くのサイトでは、次のような使い方をします。
htmlで%指定
各要素でrem指定
例えば
html
font-size: 62.5%
これは
16px × 62.5% = 10px
になります。
すると
1rem = 10px
になるので
1.6rem = 16px
2.4rem = 24px
3rem = 30px
のように 計算しやすくなる というメリットがあります。
なぜpxではなくremを使うのか
最近のWeb制作では、pxよりもremがよく使われます。
理由は主に3つあります。
1 ブラウザ設定に対応できる
ユーザーがブラウザの文字サイズを変更した場合でも、remなら全体が比例して拡大します。
2 レスポンシブ設計に向いている
rootのフォントサイズを変更するだけで、サイト全体のサイズをコントロールできます。
3 デザインの管理がしやすい
remは基準が1つなので、サイズの管理がシンプルになります。
まとめ
remと%はどちらも相対単位ですが、基準が異なります。
rem
HTML（root）のフォントサイズを基準
%
親要素のフォントサイズを基準
実務では
htmlに%
各要素にrem
という組み合わせがよく使われます。
この仕組みを理解しておくと、レスポンシブ対応やフォント設計がかなりやりやすくなります。
