「font-sizeプロパティ」CSSで文字のサイズを指定する

読みやすいWebページを作るには、それぞれの要素に対して文字サイズを分けることが大切です。適切な大きさの文字サイズとすることで、視認性がアップして読みやすくなります。最近だと高齢者に配慮して、大きめの文字サイズにするサイトも増えてきました。

また、デザイン上でもメリハリができますから、キレイにまとまった印象を与えることが出来るわけです。また、ブラウザによっても表示される大きさが異なったりするので、そういったことも考慮しながら文字サイズを設定するようにしましょう。

ここでは、CSSを使って文字サイズを変える方法を紹介します。

 

文字のサイズを設定する(font-size)

CSSによる文字サイズの設定には、「font-sizeプロパティ」を使います。そして、値の指定方法には、「キーワード指定」「パーセント指定」「単位指定」の3つがあります。なので、それぞれの違いを理解しておきましょう。

 

キーワード指定 絶対サイズ 「xx-small」「x-small」「small」「medium」「large」「x-large」「xx-large」の7つで指定。「medium」が標準サイズ。
相対サイズ 「smaller」「larger」の2つで指定。親要素の文字サイズよりも、大きいか小さいか。
パーセント指定 親要素に対する割合で指定。200%なら親要素の2倍のサイズ。50%なら親要素の半分のサイズ。
数値+単位指定 px ブラウザに関係なく、文字サイズを指定できる。ただし、IE9以前のブラウザだと、文字の拡大が出来ないメリットがある。
em 親要素を基準として、○文字分という指定ができる。親要素が10pxの時に、2emと指定すると20pxで表示される。

 

文字サイズの指定は、どれを使うべきなのか?

一般的に、文字サイズの指定で使われるのは、「数値+単位指定」が多いです。「px」は絶対指定なので、自分の思う文字サイズに決めることが出来ます。そして、「em」は相対指定ですから、親要素とのバランスを保ったまま文字サイズの設定が可能です。

文字のサイズを決めるときには、実際に色々なブラウザで見ることをおススメします。ブラウザによって標準のサイズが異なりますから、見え方に大きな違いがあるからです。なので、色々と試してみて、自分の理想に合ったサイズを見つけましょう。

 

以上、font-sizeを使った文字サイズの調整を紹介しました。読みやすさに関わる大切な部分ですから、しっかりとマスターするようにしてください。

サブコンテンツ

このページの先頭へ