フォントサイズ pxとemの違い

font-size pxとemの違いについて紹介します。

フォントサイズ pxとemの違い

筆者は仕事柄ホームページ制作をおこなっているわけですが、お客様から「pxとemの違いって何?」というご質問をいただいたので、きちんと説明する為にここに書いておこうと思います。

ここでは フォントサイズpxとemの違いについて説明 します。


pxとemは文字サイズの単位

px と em は、スタイルシート(CSS)で文字サイズを指定する際の単位のことです。font-size:○○px; や font-size:○○em; のように指定して利用します。

単位読み方説明
pxピクセル使用している環境によって大きさが変化しない絶対的なフォントサイズ。
emエム使用している環境によって大きさが変化する相対的なフォントサイズ。

font-size をスタイルシートで指定をしていない場合 1em=16px に相当します。font-size:100%; も 16pxに相当します。パーセント(%)で指定する場合、100%=16px, 75%=16x0.75 で 12px になります。

px でフォントサイズを指定すると、ブラウザ側の設定で文字の大きさが変わりません。

古いInternet Explorerの場合です。

em または%でフォントサイズを指定すると、ブラウザ側の設定で文字の大きさを変更することができます。

Internet Explorerの場合、ブラウザメニューから[表示]-[拡大]で表示できます。

ブラウザでの文字サイズ拡大方法

現在のフォントサイズ指定は px ではなくem で指定するのが主流です。小さい文字は読みにくいので「大きい文字で見たい」という人には親切な仕様ですね。

フォントサイズ対比

具体的にフォントサイズの対比をしてみましょう。

 PixelsEMsPercentPoints
フォントサイズ6px0.375em37.5%5pt
フォントサイズ7px0.438em43.8%5pt
フォントサイズ8px0.500em50.0%6pt
フォントサイズ9px0.563em56.3%7pt
フォントサイズ10px0.625em62.5%8pt
フォントサイズ11px0.688em68.8%8pt
フォントサイズ12px0.750em75.0%9pt
フォントサイズ13px0.813em81.3%10pt
フォントサイズ14px0.875em87.5%11pt
フォントサイズ15px0.938em93.8%11pt
フォントサイズ16px1.000em100.0%12pt
フォントサイズ17px1.063em106.3%13pt
フォントサイズ18px1.125em112.5%14pt
フォントサイズ19px1.188em118.8%14pt
フォントサイズ20px1.250em125.0%15pt
フォントサイズ21px1.313em131.3%16pt
フォントサイズ22px1.375em137.5%17pt
フォントサイズ23px1.438em143.8%17pt
フォントサイズ24px1.500em150.0%18pt

px、em、% 以外にも pt という単位もあります。

では、hタグは標準文字サイズだとどの程度の大きさなのでしょうか?実際にブラウザで表示してみましょう。

ソースはこんな感じです。

<html>
<head>
<title>フォントサイズ</title>
</head>
<body>
<h1>h1:フォントサイズ</h1>
<h2>h2:フォントサイズ</h2>
<h3>h3:フォントサイズ</h3>
<h4>h4:フォントサイズ</h4>
<h5>h5:フォントサイズ</h5>
<h6>h6:フォントサイズ</h6>
</body>
</html>

hタグの表示

 pxem
h1:フォントサイズ32px2em
h2:フォントサイズ24px1.5em
h3:フォントサイズ18px1.125em
h4:フォントサイズ16px1em
h5:フォントサイズ12px0.75em
h6:フォントサイズ10px0.625em

ブラウザの標準文字サイズが 1em=16px ですので、h4タグで記述した時と同じ大きさになります。

適切な文字サイズってあるの?

これは難しい問題ですねー。一概にコレとは決められないですから。各サイトにはイメージがあり、サイトデザインによって使う文字サイズも変わってきます。また、人によって読みやすい字の大きさも違いますので、正解はないと思います。あえて結論を出すというのであれば 16~18px 位が妥当であるというところですかね。大きすぎる文字はデザインを壊しますし、小さすぎると閲覧者に優しくないということになりますので、真ん中辺りでサイトを構築するのが妥当なんだと思います。

適切なフォントサイズについては、皆さんからのコメントをお待ちしております。

pxからemへ変換できるサイト

こちらのサイトは px から em へ変換できる便利なサイトです。

pxtoem.com PX to EM conversion made simple.

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。