【CSS】結局レスポンシブでのフォントサイズはどう書くべき？

以前にスマートフォンで読み易いfont-sizeを検証した結果、本文のフォントサイズはPC時でもスマホ時でも同じの場合が多いという事、PC時は文字のジャンプ率が高いが、スマホ時では低くなるという事などがわかりました。

その記事がこちらです。

今回はこの結果を踏まえて、実際にレスポンシブサイトを構築する際にfont-sizeはどうマークアップすれば良いかを考察していきたいと思います！

条件

文字サイズについては検証結果に基づき、下記のサイズで実装していきます。

PC時

本文・・・font-size：16px / 行間2em

大見出し＜h1＞・・・font-size：36px / 行間1.2em

中見出し＜h2＞・・・font-size：24px / 行間1.2em

スマホ時

本文・・・font-size：16px / 行間1.5em

大見出し＜h1＞・・・font-size：24px / 行間1.2em

中見出し＜h2＞・・・font-size：20px / 行間1.2em

また、下記の3点を考慮していきます！

• 1.レスポンシブであること
• 2.メンテナンスしやすいようにすること
• 3.どのデバイスで見てもきれいで読み易いサイズで表示されていること

サイズ指定の単位をおさらい

まずは基礎をおさらいとして、サイズの単位の指定形式をみてみましょう。

px

一般的な指定単位で、16pxと書けば16pxというように、絶対値での指定方法です。

さまざまな画面サイズに対応させるレスポンシブのコーディングにおいてpxは、ブレイクポイントの度に調整していかなければならないなど、簡単にメンテナンスができないというデメリットがあり、今回は慎重に考えていくべき単位になります。

em

親要素のfont-sizeに影響を受ける相対値の単位です。

親になる要素が16pxであれば、1em=16px。2em=32pxということになります。

rem

emは親要素のfont-sizeが基準ですが、remはhtmlのfont-sizeが基準となる相対値の単位です。

html要素に16pxと指定した場合、16px=1remとなります。

％

emと同じで、親要素に影響をうける相対値での指定方法です。

親になる要素が16pxであれば、16px=100%ということになります。

remを使う場合にはよくhtml要素のfont-sizeを62.5%にします。
これはブラウザのデフォルトである16pxに対して62.5%にあたる10pxをhtml要素に指定することで、他の要素のfont-sizeの計算を簡単にする手法です。たとえば、30pxにしたい時は3rem、16pxにしたい時は1.6remというように、pxを使わず設定することが可能です

ビューポート単位(vw、vh、vmin、vmax)

ビューポートのに基づいて継続的に変化する指定方法です。ビューポートの1/100なので、たとえばビューポートが600pxの場合は6pxに、1000pxの場合は10pxに、vwの場合だと100vwは横幅いっぱいという事になります。

小さい画面では小さく、大きい画面では大きく見せれるので便利ではあるのものの、実際に設定したいpx数とかけ離れた数値になったりし、思いの外読みにくくなる事が多いので、他の指定方法と組み合わせたりして使う必要があります。

実装

指定単位の基礎をおさらいしたところで早速実装していきます。

まずはデモです。

DEMO

見出しのfont-sizeは640px〜1200pxの間は可変するようにし、640px以下と1200px以上では固定の数値を設定しています。

cssは以下の通りです。

        html{
            font-size: 62.5%;
        }
        body{
            font-size:1.6rem;/* 16px*/
            line-height: 2;
        }
        h1 {
            font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
            font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
            line-height: 1.3;
        }
        h2 {
            font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
            font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
            line-height: 1.3;
        }
        @media (min-width: 1200px) {/* 1200px以上*/
            h1 {
                font-size: 3.6rem;/* 36px*/
            }
            h2 {
                font-size: 2.4rem;/* 24px*/
            }
        }
        @media screen and (max-width: 640px) {/* 640px以下*/
            body{
            line-height: 2;
            }
            h1{
                font-size: 2.4rem;/* 24px*/
            }
            h2 {
                font-size: 2rem;/* 20px*/
            }
        }

参考：[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック

メンテナンスしやすい

photoshopでデザインしている以上、やはりフォントサイズはpxという頭なので、マークアップもそれに近い方がやりやすいという結論に今回は至りました。
hrml要素にfont-size:62.5%を設定し、ベースのサイズを10pxとします。こうすることで1rem=10pxなり、例えば32pxで指定したい時は3.2remと書きます。マークアップはもちろんメンテナンスもスムーズに行えるかと思います。

メディアクエリで細かく記述しなくても済む!

calc()とvwの合わせ技で、ブレイクポイントごとに細かく記述する手間はなく、最低数値と最大数値だけ決めれば良いのでわかりやすいです。

vwを使用しても小さくなりすぎたり大きくなり過ぎる事がなく安心!

vwを使うと、思いの外小さすぎたり大きすぎたりといった事になってしまうところを、calc()で制御し、常に読み易いfont-sizeを表示できます。

対応ブラウザに注意

vw、rem、calc()は現段階でモダンブラウザ以外ではサポートがちょっと微妙です。vwとcalc()はIE8やAndroid4.4未満は完全に対応していないようなので、 近似値の指定でフォールバックする必要があります。

計算式がめんどくさい

calc()の計算が手間だと思ったのですが、超簡単超便利なジェネレーターがあるので、そちらを使うことをオススメします！

ビューポートの幅の中でテキストを拡大/縮小する為のフォントサイズ計算機

まとめ

いかがでしたか？結果、あまり画期的なマークアップ方法は見出せませんでしたが、calcを使う事で最小値から最大値の間を可変させる事が出来、様々なデバイス幅でも”いい感じ”のフォントサイズになるという点と、remに関しては計算の必要はなく視覚的にマークアップできるという2点において、このマークアップ方法が今のところは良いのかなと思っています。