CSSによるフォントサイズの指定 px,em,rem,vwなどの違いについて

よこのじ(@yokonoji_work)です。

CSSでフォントサイズ(font-size)を指定するのに様々な方法があるため、それぞれの違いを整理しておきたいと思います。

font-sizeでフォントサイズを変更する方法

font-sizeプロパティに値として設定できるものを確認します。

px

ピクセルでフォントサイズを指定する。モニタ解像度dpiにより表示される大きさが異なる。

pt

1pt(ポイント)=1/72インチで約0.35mmの大きさに相当する。モニタが72dpiなら1pt=1px。

ex

小文字の「x」の高さを1とする単位。2exならxの2倍の大きさのフォントサイズとなる。

%、em

%は親要素を基準にしてフォントサイズを指定する方法。100%であれば親要素と同じで、50%なら半分となる。

emは%と同様に親要素を基準に指定する。1emであれば親要素と同じで、0.5emなら50%の大きさとなる。emと%は、表記は異なるがサイズ指定の考え方は同じ。

rem

root emのことで、最上位要素=htmlのフォントサイズ(通常16px)を基準に指定する。1remでhtml要素と同サイズ、0.5remで50%の大きさとなる。

vw、vh

vw(viewport width)は画面の横幅を100として、その割合でフォントサイズを指定する。1vwは画面幅の1/100のサイズとなる。viewportとは表示領域のことでブラウザ幅などのことを示す。

vh(viewport height)は画面の縦幅を100として、その割合でフォントサイズを指定する。

xx-small、x-small、small、medium、large、x-large、xx-large

1段階で1.2倍の大きさに変化する。mediumは標準サイズ。

使い分けについて

入れ子の問題

body要素16pxとして、2em指定の<li>タグの中に、2em指定の<p>タグを入れた場合、2em×2em=4emと意図しないフォントサイズになる問題が発生します。これはhtml要素を基準としたrem指定であれば発生しない問題となります。

フォントサイズのレスポンシブ

レスポンシブ対応のWebサイトは当たり前となりましたが、フォントサイズ自体はemやrem、つまりブラウザ標準の16pxを基準にして固定値としていることが多いです。

スマホ向けサイトの場合は、端末サイズに合わせて少し小さめにフォントサイズを指定したりしていますが、昨今の大きなスマホでも文字が小さいままで見にくい・・・ということが発生します。

これに対しては、vw(またはvh)を使うことで端末のサイズに応じてフォントサイズを変化させて、視認性の良いサイズに指定することができます。