【最新2020年】レスポンシブサイトにおける文字サイズの指定方法

「レスポンシブサイトの文字サイズは、結局どうCSSを書けばいいの？」
このように思ったことはありませんか？

この問いには答えが、ありそうでありません。
メディアクエリのブレイクポイントも絡んでくるので、一概には言い切れないのでしょうね。

そのような状況ですが、この記事では、思い切って「答え」を出します。
もうこんなことで悩むのは終わりにしましょう。

ただし、あくまでこれから提示する「答え」は、2020年時点のものです。
今後もブレイクポイントが、変わることは普通にあると思いますので。

この記事の対象者は、レスポンシブサイトの文字サイズに悩む方がメインです。
具体的には、レスポンシブサイトの制作にあたるデザイナー、コーダー、プログラマーが主な対象となります。
WordPressを運営するブロガーも対象ですね。

そして、この記事を読むことにより、文字サイズで失敗しないCSSを書けるようになれます。
この記事内で記載するCSSをそのままコピペしてもらってもOKです。
あと、私が開発したツールも紹介します。

本記事の内容

2020年最新のオススメなブレイクポイント
remについての簡単な説明
calc()についての簡単な説明
CSS本体
calc計算式出力ツールの使い方

2020年最新のオススメなブレイクポイント

スマホは560px以下
PCは960p以上

この記事では上記をオススメします。
メディアクエリは次のようになります。

@media screen and (max-width: 560px) {/* 560px以下*/
    /* スマホ向けのものを記述 */
}

@media (min-width: 960px) {/* 960px以上*/
    /* PC向けのものを記述 */
}

remについての簡単な説明

レスポンシブサイトでは、font-sizeにpxは厳禁です。
今後は、cssにpx指定で書くのはやめましょう。

簡単にremを説明します。

「rem」 = 「root」＋「em」
root要素（html要素）に対して、相対的にサイズを指定できます。

相対的とか聞くとややこしいですよね。
だから、相対的とか無視してください。

慣れ親しんだpxと同じように使ってください。
ただし、そのためにはおまじないが必要です。

html {
    font-size: 62.5%; 
}

これをcssに記述してください。
指定することにより、「10px = 1rem」となります。

例えば、次のように記述するとh1のフォントサイズは15pxとなります。

h1 {
    font-size: 1.5rem; /* 15px */
}

楽勝ですね？
今後は、font-sizeにはpxではなく、remの指定でいきましょう。

calc()についての簡単な説明

CSS上で動くプログラムみたいなモノです。
計算を行うプログラムですね。

「プログラム？」と聞いて、「難しいのは嫌だなぁ」と思うかもしれません。
大丈夫、何も難しくありません。
使いこなせば便利ですが、使い方を詳しく覚える必要はありません。

その辺のややこしい部分は、専用ツールを用意しています。
そのツールが出力するものをコピペすればOKです。

calc()計算式出力ツール

今回用意するCSSでは、calc()を使用しています。
フォントの大きさを画面サイズに合わせて変更するために、calc()が必要となります。

calc()の詳細を知りたい方は、ググってください。
詳細を説明している記事が、たくさんヒットします。

CSS本体

「レスポンシブサイトの文字サイズは、結局どうCSSを書けばいいの？」に対する答えは、以下のCSSです。

html{
    font-size: 62.5%;
}
body{
    font-size: calc(1.4rem + (1vw - 0.56rem) * -1.0000);/* 14px~10pxで可変*/
    line-height: 1.8;
}
h1 {
    font-size: calc(2.4rem + (1vw - 0.56rem) * 3.0000);/* 24px~36pxで可変*/
    line-height: 1.3;
}
h2 {
    font-size: calc(2rem + (1vw - 0.56rem) * 1.0000);/* 20px~24pxで可変*/
    line-height: 1.3;
}

@media screen and (max-width: 560px) {/* 560px以下*/
    body{
        font-size:1.4rem;/* 14px*/
        line-height: 2;
    }
    h1{
        font-size: 2.4rem;/* 24px*/
    }
    h2 {
        font-size: 2.0rem;/* 20px*/
    }
}

@media (min-width: 960px) {/* 960px以上*/
    body {
        font-size:1.0rem;
    }
    h1 {
        font-size: 3.6rem;/* 36px*/
    }
    h2 {
        font-size: 2.4rem;/* 24px*/
    }
}

これをコピペして使っても、問題はありません。
ただ、h1やh2のサイズを変更したいケースもあるでしょう。

その場合は、calc()の部分で注意が必要です。
h1であれば、「calc(2.4rem + (1vw – 0.56rem) * 3.0000))」の部分ですね。

「どうやって修正するのか？」ですよね。
calc()の説明部分で紹介したツールを使います。

例えば、h1をスマホ画面で21px、PCサイズで31pxに変更したい場合があるとします。

まずは、メディアクエリ部分を以下のように修正します。
スマホ向け、PC向けにおけるh1を修正します。

@media screen and (max-width: 560px) {/* 560px以下*/
    h1{
        font-size: 2.1rem;/* 21px*/
    }
}

@media (min-width: 960px) {/* 960px以上*/
    h1 {
        font-size: 3.1rem;/* 31px*/
    }
}

ここまでは、簡単にできると思います。
ただ、calc()に設定する値は、普通はわかりません。

そのため、専用ツールを使って求めます。
次では、専用ツールとその使い方を説明します。

calc計算式出力ツールの使い方

calc()計算式出力ツール

ビューポート

ビューポートのFROMとTOには、初めから値が設定済みです。
オススメのブレイクポイントにおける、ビューポートのサイズが設定されています。

@media screen and (max-width: 560px) {/* 560px以下*/
FROMには、上記の560が設定されています。

@media (min-width: 960px) {/* 960px以上*/
TOには、上記の960が設定されています。

ビューポートのサイズは変更することは、可能です。
入力する値は、px単位で入力してください。

FROM

簡単に言うと、スマホ向け画面のブレイクポイントです。
正確には、calc()でサイズを計算する開始点におけるビューポートのサイズです。

TO

簡単に言うと、PC向け画面のブレイクポイントです。
正確には、calc()でサイズを計算する終了点におけるビューポートのサイズです。

フォントサイズ

例えば、 h1を対象にする場合には、それぞれのビューポートにおける値を入力します。
注意点は、rem単位で値を入力することです。

なお、ビューポートと異なり、FROMの値がTOの値より大きいことはあり得ます。
body（全体）に設定するフォントは、スマホの方が基本的には大きいこともありますよね。

FROM

簡単に言うと、スマホ向け画面のフォントサイズです。
正確には、calc()でサイズを計算する開始点におけるフォントサイズです。

TO

簡単に言うと、PC向け画面のフォントサイズです。
正確には、calc()でサイズを計算する終了点におけるフォントサイズです。

使用例

h1を次のように設定した場合
スマホ向け画面では、2.1rem
PC向け画面では、3.1rem

すべてに数値が入っているのを確認して、「計算」ボタンをクリック。

エラーがなければ、結果が出力されます。

この結果をコピーします。
そして、CSSを次のように置き換えます。

h1 {
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429);/* 24px~36pxで可変*/
    line-height: 1.3;
}

↓↓↓

h1 {
    font-size: calc(2.1rem + (1vw - 0.56rem) * 2.5000);/* 21px~31pxで可変*/
    line-height: 1.3;
}

以上、CSSの修正が完了です。

まとめ

レスポンシブサイトの文字サイズに関して、私なりの「答え」を説明してきました。
その「答え」の理解のために、remやcalc()に関しても簡単に説明しました。

「答え」であるCSSをコピペで使ってもらっても全然OKです。
少なくとも失敗はしないはずです。

文字サイズを変更したい場合は、紹介した専用ツールでcalc()計算式の値を取得してください。

「答え」を偉そうに書きましたが、あくまで一つの考え方です。
これをベースに独自の「答え」を追求してみてください。

その際、calc()計算式出力ツールをフルに利用してください。
ツールに関して不具合や改善要望などがあれば、問い合わせフォームからお願いします。