レスポンシブサイトで最適なフォントサイズを実装する

今回の記事は以下のような課題を持っている方におすすめです。
　　・フォントサイズの単位の違いを知りたい。
　　・どの画面サイズでも最適なフォントサイズにしたい。
　　・レスポンシブなサイトでフォントサイズを容易に管理したい。

フォントサイズはCSSで「font-size:16px;」のように指定することでサイズを変えることができます。一つのデバイスでの設定ならすぐできますが、レスポンシブサイトではそうした設定が複雑になってきます。そこで、今回の記事ではレスポンシブサイトに最適なフォントサイズを設定する方法を紹介します。

1. フォントサイズはSEOに影響する
2. フォントサイズの単位それぞれのメリットデメリット
3. レスポンシブサイトで最適なフォントサイズを設定する
- 3.1. vwを使用してレスポンシブにフォントサイズを可変させる
- 3.2. remを用いて、可読性のあるコードで設定する
4. まとめ

フォントサイズはSEOに影響する

まずフォントサイズはSEOには影響しないと思われがちですが、実は「文字が小さすぎる」といったように読みにくいフォントサイズだと、SEOに悪影響をおよぼします。以下のような記載があります。

https://cluster-seo.com/blog/mobile-seo.html

ページをインデックスに登録する際、Googleはテキストの大きさが適切かどうかをチェックしています。フォントサイズが小さくて読みづらい場合、そのページは「モバイルフレンドリーではない」と判定されます。

モバイルフレンドリーは検索ランキングの要因で、モバイルフレンドリーではないページはマイナス評価となります。

たとえPC画面で最適なフォントサイズに設定していたとしても、スマホ画面では文字が小さすぎたりするので注意が必要です。

逆に言えば、今回の記事を通してフォントサイズを最適化することで、自身のサイトのSEOをさらに良くすることができるかもしれません。

では、実際にレスポンシブサイトにおけるフォントサイズを最適化する方法を紹介します。

フォントサイズの単位それぞれのメリットデメリット

まずはレスポンシブサイトにおいて扱いやすい単位はどれか、それぞれのメリットデメリットを解説します。

px(ピクセル）

pxは絶対的な値を指定することができ、3px,6pxと数値が大きくなればなるほどフォントサイズも大きくなります。可読性はありますが、絶対的な値ゆえに一つ一つ値を修正していかなければならないという欠点があります。

％

親要素に対して相対的な値を指定することができます。例えば、10pxの親要素に対して５０％と指定した場合、5pxのフォントサイズとなります。

em

親要素に対して相対的な値を指定することができます。％と考え方は同じですが、100%=1emとなります。つまり、10pxの親要素に対して0.5emと指定した場合、5pxのフォントサイズとなります。

rem

常にhtmlに対して相対的な値を指定することができます。％とemと違い、htmlの値のみ考慮すればいいので、比較的楽に指定することができます。

vw(viewport width)

表示領域の幅に対する割合で、ビューポートの幅に合わせてフォントサイズの値を指定できます。例えば、フォントサイズを10vwと指定した場合、ビューポートの幅に対して10%のフォントサイズになります。レスポンシブサイトに適してはいますが、可読性があまりなく、扱いずらいのが難点です。

以上のようなフォントサイズの単位があります。
ここからは、実際にフォントサイズの指定方法を紹介していきます。

レスポンシブサイトで最適なフォントサイズを設定する

フォントサイズの単位を見てきましたが、レスポンシブサイトにおいて扱いやすそうなフォントはvwとremだと思います。そこで、この二つのフォントサイズの単位を用いた具体的な設定を解説します。

vwを使用してレスポンシブにフォントサイズを可変させる

まず、例１のページをPC画面、スマホ画面両方で開いてみてください。
例１　vwの基本的な使い方
以下、例１のコードです。
HTML

<div>
 <p>フォントサイズは5vwです。</p>
<div>フォントサイズは16pxです。
</div></div>

CSS

p{
      font-size:5vw;
}
div div{
     font-size:16px;
}

簡単なコードですが、「フォントサイズ5vw」の方は画面サイズに応じてフォントサイズが変化していることが分かると思います。このようにvwは画面サイズに応じてフォントサイズを変化させることができるのでレスポンシブサイト向きだと言えます。

remを用いて、可読性のあるコードで設定する

vwは画面に応じたフォントサイズを設定することができますが、可読性が低くvwの値がどんな大きさになるか判断が難しいという欠点がありました。しかし、remはhtmlを基準に大きさを設定することができるので判断が容易です。以下の例２を見てください。
例２　remを用いて可読性のあるコードでフォントサイズを設定する

以下例２のコードです。
HTML

<p>pc画面、スマホ画面両方で確認してみてください。</p>
        <div class="container">
          <div class="item">
            <h3>コンテンツ1</h3>
            <img src="/img/cloth1.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ2</h3>
            <img src="/img/cloth2.jpg">
            <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
          </div>
          <div class="item">
            <h3>コンテンツ3</h3>
            <img src="/img/cloth3.jpg">
            <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
          </div>
          <div class="item">
            <h3>コンテンツ4</h3>
            <img src="/img/cloth4.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ5</h3>
            <img src="/img/cloth5.jpg">
            <p>この文章はダミーです。以下省略。</p>
          </div>
        </div>

CSS

html {
font-size:62.5%;/*pxだと10px;*/

}
.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin: 0 0 10px;
}

.item{
  background: #FFEFD5;
  padding: 20px;
  flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 400px;
  margin: 10px;
}
h3 {
font-size:2rem;/*20px*/
}
p{
font-size:1.6rem;/*16px*/
}
@media screen and (max-width: 640px) {/* 640px以下でスマホ画面時*/
h3 {
font-size:1.6rem;/*16px*/
}
p{
font-size:1.2rem;/*12px*/
}
}

htmlはデフォルトが16pxのため、計算しやすいように16pxの62.5%、つまり10pxに変更しています。vwに比べコードは多くなりますが、計算しやすいのでメンテナンスが容易です。