WEB系の技術を詳しく解説

CSSでWebサイトのフォントサイズを賢く設定する

HTML/CSSでWebページを作成する際に、文字サイズの設定というのは非常に重要な項目になります。文字の大きさがデザインに大きく影響するからです。

今回はその文字サイズをCSSで賢く設定する方法を書き留めておこうと思います。

スポンサードリンク

文字サイズはpx指定で設定するのはNG

CSSを勉強し始めた初学者がやりがちな方法です。指定したセレクタに対してpx指定で指定する人をたまに見かけます。これは基本的にはあまりやらない方が良いでしょう。というのもpx指定だと絶対指定になるので、サイトの文字サイズに変更があった場合に他のセレクタに対しても文字サイズを改めて設定しなおさないといけないからです。これは非常に効率が悪いと言えます。

また、IE9以前のブラウザではpx指定した文字は拡大できないといった事が起こります。

こういった理由から基本的にはpx指定は避けた方が無難です。

ブラウザ別のデフォルトフォントサイズを知る

Webページを閲覧するためには必ずブラウザを介します。ブラウザはFirefox, Chrome, Safari等様々な種類があり、各ブラウザによって多少挙動が異なります。HTML/CSSでWebページを作成するにあたってブラウザの特性を知る事は非常に大切です。

今回はフォントサイズの話なので、それぞれのブラウザのデフォルトフォントサイズを確認しておきましょう。

Safari※ 16px (等倍フォントは13px)
Chrome※ 16px
Firefox※ 16px
Opera※ 16px

※バージョンによって挙動が異なる可能性があります。

フォントにはプロポーショナルフォントと、等倍フォントという2種類が存在するのですが基本的には各ブラウザ「16px」で統一されています。

つまり、基本的には16pxで文字が表示されるのだ、ということを把握しておくと良いでしょう。これに合わせてスタイルシートを作成していきます。

CSSのフォントサイズテンプレート

では、上の基本を押さえた上で実際に骨組みを作っていきましょう。

先ず、文字コードの設定をした後に、html要素をセレクタとして

font-size: 62.5%;

を指定します。これは基準となるフォントサイズを10pxに合わせるために記述します。各ブラウザのデフォルトフォントサイズを16pxとすると、「16px × 62.5% = 10px」となるので、ページ全体のラッパーとなるhtml要素にこれをかけます。px指定でなく、%指定にすることによってユーザが文字サイズを変更した時にもある程度その設定を反映することが出来ます。10pxに設定している理由は、下記で説明するrem指定を行う部分で直感的に文字サイズを計算できるからです。

その後、body要素に対して

font-size: 1.2rem;

を付ける事によってルート要素(html)に対して1.2倍、すなわち12pxの設定をしている訳です。ここは特に1.2remでなくとも、好きな値を入れて設定して下さい。

remでルートに対して相対指定をすることでデザインの保守性がグッと上がります。フォントサイズを指定する方法で迷ったら、是非この方法をオススメします。

まとめ

各ブラウザのデフォルトフォントサイズは基本的に16px

フォントサイズはルートで62.5%をかけて10pxに

その後、body要素に対してrem指定する

以上のフォントサイズの指定の仕方が比較的賢い設定方法かと思います。是非参考にしてみて下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です