フォントのサイズってpx(ピクセル)以外にもいろんな単位があって何を使ったら良いかよく分からないという方もいると思います。ここではそれぞれの単位の違いについてお話させていただきます。
コンテンツ
px(ピクセル)
px
は、コーディングで最も目にする頻度が大きい単位です。ピクセルは色情報をもつ最小単位といわれています。定規のミリやセンチとおなじように固定された長さを持つ絶対値です。
%(パーセント)
%
日常でもよく使う単位なので説明しなくても分かると思います。font-size
では、親要素で指定されたfont-size
を100%とした場合にどのくらいの大きさになるのかという指定の仕方になります。このように親要素などの値に応じてサイズが相対的に変化する単位のことを相対値と呼びます。
em
em
も%
と同じような相対値です。親要素のフォントサイズを基準に「1文字=1em」としてサイズを指定します。仮に半分のサイズにする場合は、0.5em
もしくは.5em
という形で指定すればOKです。
親要素が10pxなら1em=10px
親要素が20pxなら1em=20px
というように親要素に指定されたfont-size
によって1em
の大きさが変化します。
rem
%
やem
が指定される要素の親によって左右されるという欠点をカバーするために作られた単位がrem
です。rem
の “r” はrootの頭文字。つまり、大元の親要素のフォントサイズを基準にした相対値です。em
と見た目が似ていますが、em
が直近の親要素を基準にするのに対して、rem
はルート(元)つまりhtml要素の文字サイズに基いてサイズ指定ができるという特徴があります。この単位を使用する場合は、html要素に対して基準となるフォントサイズをピクセル指定しておく必要があります。
ちなみに、htmlに対して何もfont-size
を指定しない場合、初期値として「1rem=16px」になります。
以上がフォントサイズで使われる単位のお話でした。個人的にはrem
使って指定するのがオススメですが、WordPressのテーマに合わせていろいろ使い分けられると良いと思います。