CSS | フォントサイズ px,em,% 対応表【インターネット研究会Z】

引用元（勉強の為に引用しました。）：
http://www.interz.jp/html/em.html

 

■ 様々な文字の大きさ □px 文字サイズのピクセル指定です。dpi・画素数、液晶モニターの粒の大きさでの指定ですね。簡単に指定できデザインもし易いので初心者向から幅広く使用できます。ただ環境（解像度）によって大きさが変わりデザインが崩れるのが欠点です。 □em デザインのプロの人が好んで使っています。emは倍率での指定となります。1.5emの場合は基本値から1.5倍というサイズになります。これは初期設定で10px=1emになるように設定で調整しなければなりません。IEでは拡大縮小できませんがそれ以外のブラウザなら出来ます。 余談ですがemは元々文字間隔を空けるタグです。1emで1文字の間隔が開きます。 □% emはIEでバグがあるので嫌いという方が%指定で使っています。 emはデジカメのズームのように「×1.2倍」と表記しますが 、％は「120%」と表記します。その違いです。しかし下の表を見てのように1%程の誤差があったりブラウザにより差が出ますので絶対的な物でもありません。 □pxとemと%は置き換えられる emは倍率で1.0em=10pxとします。1.2em=1.2倍、10px*1.2em=12px font-size: 62.5% = font-size: 12em = font-size: font-size: 10px よって10px使いたい場合は62.5%でも平気です。 CSS3での設定例  html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ coliss http://coliss.com/ ■ px em % 対応表 □環境によって誤差が出る 液晶の解像度やブラウザの種類などで誤差が出るために絶対的ではありません。いくつかの表を見ましたが若干値が違いますが、下の海外サイトが一番正確なようです。 E-riverstyle Desig Web デザイナー＆クリエイターのためのWebデザイン用フリー素材 http://www.e-riverstyle.com/  Pixels EMs Percent 8px 0.50em 50% 9px 0.56em 56% 10px 0.63em 62% 11px 0.69em 68% 12px 0.75em 75% 13px 0.81em 81% 14px 0.88em 87% 15px 0.94em 93% 16px 1.00em 100% 17px 1.06em 106% 18px 1.13em 112% 19px 1.19em 118% 20px 1.25em 125% 21px 1.31em 131% 22px 1.38em 137% 23px 1.44em 143% 24px 1.50em 150% 25px 1.56em 156% 26px 1.63em 162% 27px 1.69em 168% 28px 1.75em 175% 29px 1.81em 181% 30px 1.88em 187% 31px 1.94em 193% 32px 2.00em 200% PXtoEM.com PX to EMconversion made simple. http://pxtoem.com/ Pixels EMs Percent Points 6px 0.37em 37.5% 5pt 7px 0.438em 43.8% 5pt 8px 0.5em 50% 6pt 9px 0.563em 56.3% 7pt 10px 0.625em 62.5% 8pt 11px 0.688em 68.8% 8pt 12px 0.75em 75% 9pt 13px 0.813em 81.3% 10pt 14px 0.875em 87.5% 11pt 15px 0.938em 93.8% 11pt 16px 1em 100% 12pt 17px 1.063em 106.3% 13pt 18px 1.125em 112.5% 14pt 19px 1.188em 118.8% 14pt 20px 1.25em 125% 15pt 21px 1.313em 131.3% 16pt 22px 1.375em 137.5% 17pt 23px 1.438em 143.8% 17pt 24px 1.5em 150% 18pt （2011年11月13日記載）