【参考】フォントサイズを初期値（16px）で remを利用する場合の値

フォントサイズなど何を利用されていますか？私はここ数年「rem」を使用しています。「rem」を使う上で参考になりそうな値をまとめておきます。

スポンサーリンク

remとは

html要素のfont-sizeを「1」としてその割合を指定できます。「em」が近いと思いますが、「em」の場合は、自分の親を「1」としています。
言葉だけだと分かりにくいので例をあげます。

html {
  font-size: 10px;
}
p {
  font-size: 1rem;    /* 10px × 1    = 10px */
  font-size: 1.5rem; /* 10px × 1.5 = 15px */
  font-size: 2rem;    /* 10px × 2    = 20px */
}

ツール

htmlのfont-size:	px
設定したいfont-size:	px
結果：	rem　※ココをクリックすると計算されます

 

htmlのフォントサイズを初期値（16px）で利用するときの参考値

htmlのfont-sizeが 16px ということが前提です。

1pxあたり、1/16=0.0625ですので、1px増えるごとに「+0.0625」されています。

p {
  font-size: 0.5rem;       /* 16px × 0.5       = 8px */
  font-size: 0.5625rem; /* 16px × 0.5625 = 9px */
  font-size: 0.625rem;   /* 16px × 0.625   = 10px */
  font-size: 0.6875rem; /* 16px × 0.6875 = 11px */
  font-size: 0.75rem;     /* 16px × 0.75     = 12px */
  font-size: 0.8125rem; /* 16px × 0.8125 = 13px */
  font-size: 0.875rem;   /* 16px × 0.875   = 14px */
  font-size: 0.9375rem; /* 16px × 0.9375 = 15px */
  font-size: 1rem;          /* 16px × 1          = 16px */
  font-size: 1.0625rem; /* 16px × 1.0625 = 17px */
  font-size: 1.125rem;   /* 16px × 1.125   = 18px */
  font-size: 1.1875rem; /* 16px × 1.1875 = 19px */
  font-size: 1.25rem;     /* 16px × 1.25     = 20px */
  font-size: 1.3125rem; /* 16px × 1.3125 = 21px */
  font-size: 1.375rem;   /* 16px × 1.375   = 22px */
  font-size: 1.4375rem; /* 16px × 1.4375 = 23px */
  font-size: 1.5rem;       /* 16px × 1.5       = 24px */
  font-size: 1.5625rem; /* 16px × 1.5625 = 25px */
  font-size: 1.625rem;   /* 16px × 1.625   = 26px */
  font-size: 1.6875rem; /* 16px × 1.6875 = 27px */
  font-size: 1.75rem;     /* 16px × 1.75     = 28px */
  font-size: 1.8125rem; /* 16px × 1.8125 = 29px */
  font-size: 1.875rem;   /* 16px × 1.875   = 30px */
  font-size: 1.9375rem; /* 16px × 1.9375 = 31px */
  font-size: 2rem;          /* 16px × 2          = 32px */
  font-size: 2.0625rem; /* 16px × 2.0625 = 33px */
  font-size: 2.125rem;   /* 16px × 2.125   = 34px */
  font-size: 2.1875rem; /* 16px × 2.1875 = 35px */
  font-size: 2.25rem;     /* 16px × 2.25     = 36px */
  font-size: 2.3125rem; /* 16px × 2.3125 = 37px */
  font-size: 2.375rem;   /* 16px × 2.375   = 38px */
  font-size: 2.4375rem; /* 16px × 2.4375 = 39px */
  font-size: 2.5rem;       /* 16px × 2.5       = 40px */
  font-size: 2.5625rem; /* 16px × 2.5625 = 41px */
  font-size: 2.625rem;   /* 16px × 2.625   = 42px */
  font-size: 2.6875rem; /* 16px × 2.6875 = 43px */
  font-size: 2.75rem;     /* 16px × 2.75     = 44px */
  font-size: 2.8125rem; /* 16px × 2.8125 = 45px */
  font-size: 2.875rem;   /* 16px × 2.875   = 46px */
  font-size: 2.9375rem; /* 16px × 2.9375 = 47px */
  font-size: 3rem;          /* 16px × 3          = 48px */
}

htmlを「font-size: 10px」にすると簡単

cssにてhtmlのfont-sizeを10pxにしてすれば、1pxあたり、0.1なので、指定は簡単になります。

html {
  font-size: 10px;
}

下記のように簡単です。

p {
  font-size: 0.8rem; /* 10px × 0.8 = 8px */
  font-size: 1rem;    /* 10px × 1    = 10px */
  font-size: 1.2rem; /* 10px × 1.2 = 12px */
  font-size: 1.4rem; /* 10px × 1.4 = 14px */
  font-size: 1.6rem; /* 10px × 1.6 = 16px */
  font-size: 2.1rem; /* 10px × 2.1 = 21px */
}

ですが、今回はbootstrapやTailwind CSSを初期のまま利用しようかと思い、16pxの場合どのような感じか調べてみました。

スポンサーリンク