Navigation

フォントサイズの単位まとめ


TAKAHIRO YAMADA
@rural_web
フォントサイズの単位まとめ

フォントサイズの単位「px、em、rem、%」の違いについてのまとめ。

px(ピクセル)について

押さえたいポイント
モニタ画面の最小単位1ドットと同等で考えておけばいい。
環境によって左右されない絶対単位
CSSでfont-sizeを一度も指定していない場合は「16px」となる。

em(エム)について

押さえたいポイント
CSSでfont-sizeを一度も指定していない場合は「16px=1em」となる。
じゃあ〇〇pxは何emなの?現象になりやすい。
だから親要素となるbodyに対して「font-size:62.5%」を指定することが主流。そうすると、

  • 10px:1.0em
  • 12px:1.2em
  • 15px:1.5em

のように、pxの表記に近い感じでほぼ同じサイズとして扱える。

でも複利計算されるため、階層が深くなる作り方をすると不便。つまり、要素にそれぞれem設定するような人には不向き。

rem(ルートエム)について

押さえたいポイント
基本はem(エム)と同じ。font-sizeを一度も指定していない場合は「16px=1rem」となる。
CSS3仕様でremが誕生。
remとは「root em」という意味で、ルート(親要素)のみ継承する単位になるので、emのように複利計算されない。
CSS3仕様なので、古いブラウザ(IE8など)には対応していない。対応ブラウザ参考サイト

%(パーセント)について

押さえたいポイント
理屈はem(エム)と同じ。font-sizeを一度も指定していない場合は「16px=100%」となる。
emの100倍。1em=100%。
複利計算される

相関図

px em %
10px 0.625em 62.5%
11px 0.688em 68.8%
12px 0.750em 75.0%
13px 0.813em 81.3%
14px 0.875em 87.5%
15px 0.938em 93.8%
16px 1em 100%
17px 1.063em 106.3%
18px 1.125em 112.5%
19px 1.188em 118.8%
20px 1.250em 125%

※font-size指定なしの場合を基準とする。(16px:1em:100%)

疑問と答え

どうしてフォントサイズの単位が派生したのか

pxだけで充分に対応できるようになったのは最近のこと。現在はブラウザがサイト拡大(CTRLキーと+ボタン)を担うことが出来るようになったため、pxだろうがユーザが自由に大きさを調整できる。古いブラウザ(IE8など)ではこの「pxに対しての文字調整」が困難であったため、%やemによる相対値でフォローしていた。

まとめ

フォントサイズに関しては、大人しくpxを使えばよろし。

コメントを表示 (0)

Comments

CAPTCHA


関連記事

ホームページ制作

CSSでつくるボタン各種サンプル集

HTMLとCSSでつくる「ボタン」サンプル集。最近は画像ボタンよりもCSSでつくる機会が増えたので、ちょこちょこまとめてみる。基本的にレスポンシブ。困ったときにコピペでさくっと簡単に使える用。思いつい […]

by TAKAHIRO YAMADA
ホームページ制作

Font Awesomeのアイコンフォント使い方と文字コードまとめ

Font Awesomeのアイコンと文字コードを簡単にコピペして使えるように一覧にまとめ。シンプルな一覧表と、spanタグによる直書きとCSSによる呼び出し方法の説明。 前準備 下記より最新のCDNを […]

by TAKAHIRO YAMADA