BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

皆さんはWEBサイトを作成する際にフォントサイズを決めると思いますが、フォントサイズの単位は何を使っていますか?
px,em,%,remなど色々あると思います。
でも、単位の違いって正直よくわかりませんよね。
僕も最初の頃はよくわかっていませんでしたが、意外と単純だったので、「フォントサイズの単位何使えばいいの?」って方のために、まとめてみました。

フォントの大きさを決めるCSSプロパティ

font-sizeは、表示するフォントのサイズを指定するプロパティです。
値は「数値+単位」で指定するのが一般的です。とくに、単位を「px」にすると、フォントサイズをピクセル数で指定できるため、表示結果の予測がしやすくなります。
フォントサイズを指定する方法としてはもっとも簡単でわかりやすい方法です。

単位は「px」の代わりに「em」「%」にすることも可能ですが、これらを使用するときには注意が必要です!

font-sizeプロパティに数値以外の値を指定する

フォントサイズは、基本的には数値で指定することが多いのですが、決められたキーワードを使うこともできます。
とくにフッターのコピーライトや、コンテンツの途中ぶ注釈を入れるときなど、メインのテキストよりも小さく表示したい部分には、キーワードを使うことが比較的多いです。

font-sizeプロパティに指定できるキーワードには、次のようなものがあります。

キーワード(font-size) 表示されるフォントサイズ
xx-small 9px
x-small 10px
small 13px
medium 16px
large 18px
x-large 24px
xx-large 32px

フォントサイズの値に単位「em」や「%」を使う場合

「em」は、1emが「1文字のサイズ」を示す単位です。

font-sizeプロパティの値をemで指定した場合、親要素のフォントサイズを「1文字分のサイズ=1em」として、ブラウザが最終的に表示するフォントサイズを計算します。

たとえば、.demoに適用されるfont-sizeプロパティを、単位emで指定することを考えてみます。
.demoの親要素はbodyになります。このbodyにはフォントサイズがデフォルトで16pxがはじめから指定されています。

このとき.demoのフォントサイズを14ピクセルの大きさに、単位emで指定するのであれば次のように計算します。

14px(目的のフォントサイズ)÷16px(親要素のフォントサイズ)=0.875em

単位「em」を使うとフォントサイズを相対的に決めることができ、管理がしやすいことから、一時期よく使われていました。

「em」「%」を使う上での注意点

現在はもっといい代替手段があることから、「em」「%」はあまり使わない方がいいかもしれません。

注意点は「フォントサイズは子要素に継承する」ということです。

「em」を使った例

1階層目のdivのフォントサイズは、親要素は「0.875em=14px」
2階層目のdivのフォントサイズは、子要素は「14px × 0.875em=約12px」
になります。

この継承を忘れて、進めてしまうとフォントサイズが思わぬ大きさで表示されてしまいます。
こうした思わぬトラブルを未然に防ぐためには「em」単位を使わない方がいいかもしれません。
「%」の場合も「em」と同じように継承の問題が生じるので注意が必要です。

おすすめのフォントサイズ単位は「rem」

ページ全体のフォントサイズを相対的に指定したいときや、管理を統一したいときに使用するときに「rem」を使用しましょう。

「rem」とはルート・エムといいます。ルート要素に設定されているフォントサイズを基準として、相対的にフォントサイズを設定するときに使うCSSの単位です。
単位を「rem」にすれば、「em」や「%」を使った継承の問題を起こさずに全体のフォントサイズを相対的に決めることができます。

htmlのフォントサイズ=16pxの場合

1rem = 16px
0.875rem = 14px
0.75rem = 12px

フォントサイズを相対的に決めるとどんなことがあるの?

フォントサイズを相対的に決めておくとhtmlに設定したフォントサイズを変更するだけで、ページ全体のフォントを大きくしたり小さくしたりすることができます。
たとえば先ほどのhtmlのフォントサイズ=16pxを14pxにすると、大きさの比率を保ったまま全体を小さくすることができます。
このテクニックを使うと、たとえばスマートフォンで表示するときは全体のフォントサイズを大きくすることが簡単にできます。

まとめ

いかがでしょうか?
フォントサイズの単位について難しいイメージがあると思いますが、苦手意識を吹き飛ばすためにも一度フォントサイズの単位について学んでみるといいかもしれません!
現在はPCではなく、スマートフォンが主流になっているのでフォントサイズの管理がしやすい「rem」をオススメします!