1.フォントのサイズを変えるプロパティ「font-size」について
フォントのサイズは「font-size」というプロパティで指定します。値にはいくつかの指定方法があります。
- 数値 + 単位で指定する
- %で指定する
- キーワードで指定する
例えば数値+単位では以下のように記述されます。
p {
font-size : 16px ;
}
もう少し詳しく解説していきましょう。
2.数値と単位で指定をする
フォントのサイズは数値で指定することができます。この際に使える単位はpx,em,remがあります。
pxの場合
font-size : 16px ;
のように記述します。他の単位で指定するのと違って、絶対値で指定できる単位です。
emの場合
emは親要素のフォントサイズの相対的なサイズが指定できます。例えば指定したいセレクタの親要素の文字サイズが16pxだった場合、1emは16pxです。そして2emは2倍の32pxで表示されます。
font-size : 1em ;
この単位は親要素の大きさに出力されるフォントサイズが左右されるため、最近は次に説明するremを使って指定することが多くなってきています。
remの場合
remも相対的なサイズが指定できますが、親要素ではなくルート（一番上の階層）となるhtmlで指定したフォントサイズが反映されます。例えばhtmlに対してフォントサイズが16pxと指定されていた場合は、2remで32pxになります。
font-size : 1rem;
最近では以下のように使われるのが通例になってきています。
html{
font-size : 62.5%; // ルートのフォントサイズを10pxに指定する
}
p{
font-size : 1.6rem ; // これでフォントサイズは16pxになる
}
span{
font-size : 1.4rem ; // これでフォントサイズは14pxになる
}
3.%で指定をする
%は親要素の相対値で指定ができる単位です。
例えば以下のようなとき、p要素は何pxで表示されるでしょうか？
html{
font-size : 16px ;
}
div{
font-size : 20px ;
}
div > p{
font-size : 50% ;
}
答えは10pxです。pの1つ上の親要素であるdivの相対的なサイズが反映されます。
4.フォントキーワードで指定をする
colorなどと同様で、font-sizeにもフォントキーワードで指定する方法があります。
xx-small、x-small、small、medium、large、x-large、xx-largeの7段階で、mediumが標準のサイズになります。
試しにlarge・medium・smallを並べてみました。
5.ユーザーが読みやすいフォントサイズと、おすすめの指定方法は？
このようにフォントサイズには様々な指定方法があります。この指定方法を間違えると、思うようにサイズの調節が効かず、何度も何度もサイズ指定を繰り返し記述してしまうことがあります。
またフォントサイズは小さくしすぎてしまうとテキストが読みづらくなってしまうので、なるべくブラウザの標準サイズを利用することでそういったことをなくしましょう。
おすすめのフォントサイズは？
ブラウザの標準文字サイズは、大体が16pxに指定されています。またiOSのガイドラインを読むと最低サイズは11pt（14.6px）であることが記されています。これらのことから本文の文字サイズは14〜16pxがよく使われているサイズです。
これを基準にh1〜h6の見出しサイズなどを検討していきましょう。
おすすめの指定方法は？
h1〜h3、pのおすすめのフォントサイズ指定を記述してみます。
サンプルCSS：
html { font-size : 62.5% ; }
h1 { font-style: 4rem ; }
h2 { font-style: 3.2rem ; }
h3 { font-style: 2.8rem ; }
p { font-style: 1.6rem ; }
プレビュー：
