全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
レスポンシブに最適なフォントサイズの単位と指定方法
2020.10.23
※この記事は2020年10月23日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
レスポンシブコーディングをする際、フォントサイズの指定に迷いが生じることが、ありませんか？
PCファーストなのか、モバイルファーストなのか。
デバイスの違いや、見え方重視か、デザイン重視か。
現状、様々な単位があることから、更に迷いますね。
今回は、フォントサイズの指定に迷った際に役立つ知識を紹介します。
フォントサイズとして指定できる単位の種類
Webサイトで一般的に使用するフォントサイズの単位は以下の通りです。
【px（ピクセル）】
pxのサイズで指定する
【%（パーセント）】
親要素のサイズに対しての割合を百分率で指定
【em（エム）】
親要素のサイズに対しての割合を指定し、親要素の文字サイズを1emとして計算する
【rem（レム）】
ルートのサイズ（htmlタグに指定したサイズ）に対しての割合を指定
【vw（Viewport Width）】
画面の表示幅に対しての割合で指定
【vh（Viewport Height）】
画面表示の高さに対しての割合で指定
フォントサイズの単位の使い方やその特徴
基本的に自分が使いやすい単位を指定すれば良いのですが、
レイアウトのバランスやユーザーの見やすさなどを考慮した場合、フォントサイズの単位の特徴を活かして指定する必要性があります。
各単位の使い方や特徴を理解しておきましょう。
【px（ピクセル）】
・「px」は絶対的な指定
・親要素やルートの要素のフォントサイズに影響を受けない
16pxと指定すれば、指定したテキストは16pxとなります。
イメージ通りの表示ができるので、指定しやすいのが特徴です。
また、誰がコードを見ても理解しやすいため、メンテナンスしやすいといった利点もあります。
注意が必要なのは、レスポンシブサイトでの指定の場合です。
他の画面サイズ用に、それぞれフォントサイズを設定し直さないといけません。
【%（パーセント）】
・「%」は相対指定
・親要素に対しての割合を百分率で指定する
親要素が16pxだった場合、100%指定だと16px、200%指定だと32pxとなる。
%指定は、ややこしい点があります。
例えば…
① <body> → 16px指定
② <body>以下の<div> → 90%指定
③ ②以下の<p> → 更に90%指定したとすると、
16pxの90%=14.4px
↓
14.4pxの90%=12.964px
↓
よって、表示されるフォントサイズは、12.964pxという算出結果になります。
【em（エム）】
・「em」は相対指定
・フォントサイズ100%＝1emという考え方で良いと思います。
1emは「一文字分の大きさ」という理解をしていると思いますが、1文字分ではなく『親要素の100%（1em）サイズ』という計算なので、入れ子構造の場合は、親の親からの影響を受けるので注意が必要です。
【rem（レム）】
・「ルート(html）」の文字サイズを基準とした相対指定
・CSS3から登場したサイズ
・%やemなど入れ子構造の計算のややこしさを一掃できる単位
「ルート(html）」の文字サイズを基準とした相対的な指定となるので、ルートの文字サイズだけを確認すれば、remの指定サイズがわかります。
例えば…
① <html> → 16px指定
② <html>ルート内の<div> → 2.5rem指定
↓
16px×2.5＝40px
↓
表示されるフォントサイズは、22.4pxという算出結果になります。
【vw（Viewport Width）】
・vwとはViewport widthの略
・ビューポートの幅（＝ブラウザの幅）に対しての相対指定
ブラウザの幅を「100vw」として計算し、1000pxのブラウザ幅の場合、10vwは1/10の100pxとなる。
例えば…
<div> → 1vw指定
↓
ブラウザ幅を可変する
↓
<div>に指定したフォントサイズがブラウザの幅に応じて可変する表示となる
文字サイズと画面幅のデザインバランスを変えたくない場合に「vw」が活かせます。
【vh（Viewport Height）】
・vwとはViewport heightの略
・ビューポートの高さ（＝ブラウザの高さ）に対しての相対指定
「vw」に対して、「vh」はブラウザの高さを「100vh」として計算し、ブラウザの高さが1000pxの場合、10vhは1/10の100pxとなる。
【vmax / vmin】
・スマートフォンの縦横を回転させた時に役立つ単位
「vmax」は、viewportの縦と横で大きい方の値を100として文字サイズをし、「vmin」はviewportの縦と横で小さい方の値を100として文字サイズを計算する指定となる。
スマートフォンやタブレットの回転に対応するので、モバイルの回転に軸をおきたい場合に役立ちます。
レスポンシブサイトでの最適なフォントサイズ指定は？
実は、レスポンシブサイトにおいてのフォントサイズの指定に明確な設定は無いのが現状なのですが、一般的に多用されているフォント指定は以下の通りです。
【おすすめの指定】
※ デフォルトのフォントを16pxにする場合
① ルート(html)のフォントサイズを10pxで設定
html {
font-size: 62.5%;
}
デフォルトのフォントサイズが16pxなので、62.5％に縮小する事で、htmlのフォントサイズは10pxに設定される。
htmlを10pxに指定する事で、remの指定で1.2remと指定すれば12px。3remと指定すれば30px。といった具合に、remの指定と実際の表示サイズをpxで認識できるので、レイアウトの構成時や作業時に、わかりやすい指定となります。
② bodyのフォントサイズを1.6em（16px）で設定
body {
font-size: 1.6em;
}
bodyを1.6emと指定する事で、body内の指定は、何も指定しなければ、16pxとするための指定となります。
まとめ
近年、レスポンシブサイトのコーディングは標準となりつつあります。
デバイスや、ユーザービリティに応じて必要とされるWebサイトの見せ方は様々です。
フォントサイズにおいては、サイズ単位を理解し、状況に応じてベストな表示を再現できるようにしておきましょう。
フォントサイズの指定に迷ったときは、ぜひ、今回の記事を参考にしてみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
