フォント62.5％指定でemフォントをpx単位で計算できるようにする

CSSによるフォント指定がない場合、ブラウザはfont-sizeを16pxで表示します。これを利用してbody要素にfont-size: 62.5％を予め指定しておくと、「0.625 * 16px = 10px」つまり「10px = 1em」という様に、emフォントをpx単位で計算できるようにする方法。ただ、これにはメリット・デメリットが存在するんです。

メリット

→ px単位で計算できるのでレイアウトする際に便利。

デメリット

→ 「62.5％指定は1emが10pxになる」という公式はPCの環境によって左右される可能性があるため、フォントサイズを基に組んでるレイアウトは予期せぬ崩れ方をするかもしれない。

指定方法は以下のとおり。試してみてください。

 
body { font-size: 62.5%;}
p.em { font-size: 1.2em;}
p.px { font-size: 12px;}
 

 
<p class="em">フォント62.5％でemフォントをpx単位にする</p>
<p class="px">フォント62.5％でemフォントをpx単位にする</p>