フォントサイズ指定の違いと変換(px,rem,em)

フォントサイズpx,rem,emの使い分け、基本的かつ大事なことなのでまとめ。

 

絶対指定のpx　ピクセル

絶対値。どのブラウザでみても、14pxなら14px,30pxなら30pxで表示される。ブラウザが小さくても、大きくてもだ。ユーザーは画面全体を縮小・拡大することでしかフォントの調整はできない。InternetExplorerのブラウザの設定で〔文字を小さく〕〔文字を大きく〕には対応ができないのがpx。

相対指定のem　エム

pxのフォント絶対値指定のデメリットに対応するために使われてきたのがem。フォントの相対指定。

InternetExplorerやFireFoxなど各ブラウザはデフォルトのフォントサイズがあり、大概16px。そのため1em=16pxとなる。

フォントサイズ　em / px 変換表　

px　em変換表

http://pxtoem.com　より引用

16pxが1emだと計算面倒だね、ということで、ひとつのテクニックとしてサイト内ではベースフォントを10pxに指定して10px=1emにする方法がある。

ブラウザのデフォルトフォントサイズは16pxだから、サイト内のベースフォントを10pxにするには62.5%縮小指定をする必要がある。ここで%の登場。

CSSのhtml要素の中に%指定をする。

body { font-size:62.5%; }　/* 1em=10px */

こうすることで、サイト内のフォント基準は10pxとなり、20pxの場合は2em、16pxの場合は1.6emと指定すれば良い。>計算する必要がなくなるので、作業も効率的に進む。

 

emの注意点

しかし、emには注意点があり親要素の影響を受け、子要素は複利計算であること。つまり、すぐ上の階層に対し相対数値のフォントサイズになる。

html { font-size:62.5%; }　/* 1em=10px */
body { font-size: 2.0em; } /* =20px */
階層１ { font-size: 1.0em; } /* =20px */
階層２ { font-size: 1.2em; } /* =24px */

rem　（root+em）ルートエム

CSS3で登場した新しい単位。emはすぐ上の階層に対しての相対数値であるのに対して、remはroot要素（html要素）のフォントサイズを元に計算する。

emのように1つ上の階層ではなく、元の階層・1番上の階層のフォントサイズを基準としている。

emは階層が深まるに連れてフォント指定が煩雑になるが、remであれば常にroot要素（html要素）に対して相対数値を指定すれば良いのでシンプルでわかりやすい。

最新の『rem』は、1番使いやすそうだが残念ながら現在Firefox3.6+、Chrome、Safari5、IE9+でしかサポートされていない。そのため、px,remの順で記述することで、サポートされていないブラウザにはpxが適用されるように使うのが良い。

html { font-size: 62.5%; } /*ベースフォント10pxに指定(16pxブラウザ基準だと62.5%で10px)*/
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

 

フォントサイズ rem / px　変換表

 ベースフォントが14pxの場合
（ブラウザのデフォルトフォントサイズが16pxの場合はhtml要素に87.5%のフォント指定を行うと14pxになる）

font-sizepixcel換算rem換算
150%24px1.71428571rem
125%20px1.42857143rem
112.5%18px1.28571429rem
100%16px1.14285714rem
87.5%14px ★ベースフォント1rem
75%12px0.85714286rem
62.5%10px0.71428571rem
50.0%8px0.571428571rem

ベースフォントが16pxの場合

font-sizepixcel換算rem換算
150%24px1.5rem
125%20px1.25rem
112.5%18px1.125rem
100%16px　★ベースフォント1rem
87.5%14px0.875rem
75%12px0.750rem
62.5%10px0.625rem
50.0%8px0.5rem

単純計算で算出可能だが、毎回計算するのもとても面倒なので、一覧表があると何かと便利。

 

例えばWordpressのテンプレートtwenty twelveでフォントサイズを確認

twenty twelveのスタイルシート内のフォント指定。

0６行目に87.5%と表記されているので、ブラウザフォント(大体16px)の87.5%の14pxがtwenty twelveのベースフォントということだ。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* =Basic structure
-------------------------------------------------------------- */
/* Body, links, basics */
html {
     font-size: 87.5%;
}
body {
     font-size: 14px;
     font-size: 1rem;
     font-family: Helvetica, Arial, sans-serif;
     text-rendering: optimizeLegibility;
     color: #444;
}

 

twenty twelveでは、すごく親切にスタイルシートにrem変換のせてある。ありがたい！

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
$rembase:     14;
$line-height: 24;
---------- Examples
* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
     padding: 5px 0;
     padding: 0.357142857rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size
     font-size: 16px
     font-size: 1.142857143rem; (16 / $rembase)
     line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
.my-new-div {
     margin: 24px 0;
     margin: 1.714285714rem 0; ( 24 / $rembase )
}

 

WordPressのRidizainではベースフォントは16px

もう一つのテンプレートRidizainを紹介する。
button,
input,
select,
textarea {
color: #2b2b2b;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}

 

16pxをベースフォントとしている。カスタマイズする際は、テンプレートで指定しているフォントサイズを確認してから、rem変換を行う必要がある。

-CSSカスタマイズ