ブランディングをお手伝いする福岡のデザイン事務所|ANIK

BLOG

Webデザイナー必見!レスポンシブデザインのフォントサイズ指定方法のまとめ

ところで、レスポンシブサイトのフォントサイズってどうやって指定していますか?

 

px?

%?

 

僕がオススメするレスポンシブデザインのフォントサイズの指定方法はrem。

 

ちなみにフォントサイズ指定でよく使われるemと少し指定方法が異なります。

 

remには一つ弱点があって、IE8以下のブラウザに対応していません。

 

なので今日は、IE8以下のブラウザ対策も踏まえ、remを使ったレスポンシブデザインのフォントサイズ指定方法をご紹介したいと思います。

 

レスポンシブデザインとは?

レスポンシブデザインとは、Webページにアクセスした人のデバイス(パソコン、タブレット、スマホ)によって自動的に見易い表示に切り替わるデザイン。

 

メリットはPC用、スマホ用といった別ファイルを用意する必要がないんです。

 

制作者にとっては、メンテナンスは楽ちん。

 

但し、サイトの設計が非常に複雑で、普通のサイトより制作時間が余計にかかってしまうなんてこともあります。

 

メンテナンスが簡単だからという安易な理由だけで導入を決めるのではなく、レスポンシブデザインが本当に必要かどうかサイト制作初期の段階でじっくり検討すべきです。

 

レスポンシブデザインを導入するメリットがなければ、無理にレスポンシブにする必要はないかなぁと思います。

 

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

htmlのフォントサイズの初期値は16px

 

CSSでフォントサイズを指定しなければ、16pxでページ上に表示されます。

 

まず、CSSの『em』は親要素のフォントサイズに対する相対指定。

 

たとえばemでフォントサイズを指定したい要素が、外側のdiv又はp要素に含まれている場合。

 

そのdivやp要素がemで指定するフォントサイズの基準になります。

 

『rem』はルートのフォントサイズに対する相対指定

 

remの場合は、どの要素に含まれているかは考えなくても大丈夫。

 

htmlの相対サイズになります。

 

こちらをご覧下さい。

 

 

 

divのwrapperのフォントサイズを64px、contentsのサイズを32pxに指定したい場合、CSSの指定はそれぞれこのようになります。

 

▽em指定の場合

 

▽rem指定の場合

 

このように、emとremではフォントサイズの指定方法が異なります。

 

emは親Boxのフォントサイズに対する相対指定。

 

remはhtml(ルート)のフォントサイズに対する相対指定。

 

emは親Boxのフォントサイズを把握しておく必要がありますが、remはhtml(ルート)に対する相対指定なので、その必要はありません。

 

フォントサイズの管理が簡単なのは断然remで指定する方法です。

 

ルート(html)のフォントサイズを10pxに

remはhtml(ルート)の相対指定です。

 

ただ、ルートの初期値16pxは少し計算しずらいですよね。

 

22pxでフォントサイズを指定したい場合、計算が面倒です。

 

なので、計算しやすいようにルートのフォントサイズを10pxにしておきましょう。

 

htmlのfont-sizeを62.5%で指定すれば、16pxの62.5%で10pxに変更できます。

 

▽htmlのフォントサイズを10pxに指定する場合

 

これでremでフォントサイズを指定する際に計算しやすくなります。

 

例えば22pxで指定したい場合、

 

font-size: 2.2rem(10×2.2=22px)

 

でOKです。

 

フォントサイズremでIE8以下をフォロー

初めに少し触れましたが、フォントサイズのremはブラウザのIE8以下でサポートされていません。

 

IE8以下で正常に表示させる為には、pxとremの併用をオススメします。

 

▽html

 

 

▽CSS

 

px指定で先にCSSを読ませて、その後にremに対応するブラウザは上書きされます。

 

フォントサイズ指定の順番は必ず

  1. px
  2. rem

 

で記述しましょう。

 

デバイス別の推奨フォントサイズ

CSSのメディアクエリ(デバイスの幅に応じてCSSを切り分けられるコード)を使ってhtml(ルート)のフォントサイズをデバイス別に指定しておきます。

 

一般的なデバイス毎の推奨フォントサイズを纏めていますので参考にしてください。

▽スマートフォン
12px〜14px
▽タブレット端末
14px以上
▽デスクトップ
16px以上

 

まとめ

レスポンシブデザインのフォントサイズは、emよりもremで指定する方が設計も簡単だしメンテナンスも簡単。

 

いい事だらけです。

 

今日ご紹介した様に、メディアクエリ毎(デバイス毎)にフォントサイズをremで指定する。

 

これが一番簡単な方法かなと思います。

 

でわ。

ANIK
1983年生まれ。 独学でデザインを学び、福岡の広告代理店で10年間デザイン業務に携わる。 ホームページ、広告バナー、名刺、商品パッケージ、看板、各種販促ツールのデザインを担当。 2017年よりANIKという屋号でブランディングの総合的なサポートをメインに個人活動を開始。 性格は真面目、温厚で自然が大好きです。