calcでフォントサイズを自動計算する方法（レスポンシブデザイン必須）

font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。

必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。

calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。

レスポンシブルデザインの見やすさを決める「フォント」

レスポンシブデザインは、WEBの世界において必須のレイアウトになっていますよね。

その中でユーザー目線の優れたサイト作りをするための要因の一つが、「文字の見やすさ」を保つ事でしょう。

常に見やすいページを作るためには、表示デバイスごとに最適な大きさの文字を表示する必要があります。

ユーザーのデバイスはコントロールできない

ただ、ユーザーがどんなデバイスで閲覧するかを制限する事はできませんよね。

となれば理想とするのは臨機応変に対応できる仕組み作りです。

どのような画面幅の端末であっても、最適な文字サイズを表現する必要があります。

本記事では最適なフォントサイズの「自動計算」を、CSSで実現していきます。

各デバイスごとにサイズ固定する方法

制作管理者によってはメディアクエリで範囲を指定し、各メディアごとにフォントにpx数を入れている人もいます。

しかし今はこの方法はお勧めできません。

何より管理が大変になりますし、修正が起きた際にその範囲が全てのフォントサイズ指定に及ぶ場合があるからです。

管理や修正が大変になる

よく利用されがちなCSSの記述例をご紹介しましょう。

CSS

@media (max-width: 1440px) { font-size: ○○px; } @media (max-width: 990px) { font-size: ○○rem; } @media (max-width: 767px) { font-size: ○○em; }

上記はそれぞれの画面幅で、サイズ数値を指定したケースです。

ただしこの後ベースのfont-sizeに変更があると、上記の箇所全てに修正が必要になる場合があります。

さらに対象クエリの範囲中はサイズが変わらないため、エッジ付近のサイズによっては問題が生じる場合もあります。

font-sizeを任意に設定した時の弊害

では実際にどのような問題が起きるのか、メディアクエリでフォントを算出してみましょう。

サイズ設定例

まず以下で紹介する事例は、下記の条件を実現していきます。

単位はpxではなく、remで算出しています。

CSS（1remの指定）

html { } body { font-size: 1rem; }

bodyのfont-sizeは「1rem」にしています。remは、htmlの数値をベース参照する単位です。

1remですから単に×1するだけです。つまりそのまま数値は変わりません。

CSSには記載がありませんが、本来htmlの持つベースのfont-sizeは16pxです。

つまりこの16px数値に対して×1となり、そのままbodyで16pxを使う事になりますね。

2つのメディアクエリ

ではメディアクエリを設定してみます。

フォントの最大値を24px、最小値を16pxとする場合、以下の様になります。

CSS（メディアクエリを使った場合）

/* ----------------------------- */ @media (min-width: 1440px) { font-size: 1.5rem; } or @media (max-width: 1440px) { font-size: 1.5rem; } /* ----------------------------- */ @media (max-width: 320px) { font-size: 1rem; }

これで一応フォントの最大値と最小値は設定できますが、上記ではあえてminとmaxの2つを記述しています。

ここをminとするかmaxとするかで中身が変わってくるためです。

minとmaxによる対象の変化例

minの場合は320から1440までの間の指定がありません。

指定が無い訳ですから、このガラ空き区間はベースサイズの16pxになりますね。

maxの場合も非常に大雑把な設定となり、320から1440までの間はずっと24pxです。

3つのメディアクエリ

そこで間に一つメディアクエリを追加してみます。

CSS（サイズ間を指定する場合）

@media (max-width: 1440px) { font-size: 1.5rem; } @media (max-width: 990px) { font-size: 1.25rem; } @media (max-width: 320px) { font-size: 1rem; }

上記の場合320pxから990pxまでのfont-sizeは20pxとなり、これが中間サイズ帯として追加されています。

メディアクエリはサイズ間の指定ができる訳ですが、その区切りは無限に作れます。

細かく指定ができる分、コード量も長くなる訳です。

そして指定されていないサイズ帯は常に、既存の設定値に依存する訳です。

やはりどこかで、画面幅とfont-sizeが合わないサイズ帯が出てくる事でしょう。

一定範囲の中でフォントサイズを自動計算

理想なのは、一定の範囲内でfont-sizeが自由に変動する形です。

画面幅ごとに任意に指定するのではなく、画面の幅に応じて自在に可変させる事が可能です。

画面の幅に応じたサイズをCSSが自動で算出してくれます。

calc関数とvwを使った自動計算式

メディアクエリは便利ですが、それぞれのケースで任意にfont-sizeを設定するのはデメリットがある事がわかりましたね。

ではいよいよ、一定範囲内でfont-sizeを自動計算する方法をご紹介します。

サイズ設定例

以下で紹介する事例も先ほど同様、下記の条件を実現していきます。

CSS（calcとvwによる計算）

html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc([最小値] + ([最大値] - [最小値]) * ((100vw - [最小画面幅]) / ([最大画面幅] - [最小画面幅]))); } } @media screen and (min-width: 1440px) { html { font-size: 1.5rem; } }

計算の仕方

どのような計算をしているのかよくわかりませんので、解説していきますね。

最小値の設定

まずhtmlのfont-sizeは、ベース値の16pxとしています。

元々16pxなので書く必要が無いのですが、この16pxがフォントの最小値として使われるのであえて表示させています。

最大値の設定

1つ目を飛ばして2つ目のメディアクエリは、1440px以上は全て1.5remで固定するという意味です。

1.5remはベースフォント16pxの1.5倍ですから、24pxが最大フォントサイズになります。

これでfont-sizeの最小は16px、最大は24pxと決定されましたね。

calcとvwによる計算式の解説

1つ目のメディアクエリが、320pxから1440pxまでの間を計算したものです。

上記は「公式の状態」で入れていますが、これを計算すると以下の様になります。

CSSの実際の計算

@media screen and (min-width: 320px) { html { font-size: calc(16px + 8 * ((100vw - 320px) / 1120)); } }

これにより320pxから1440pxの間は、vwに画面幅が入る事で最適な数値が算出されます。

各要素の数値によって変わる

これは最小値と最大値の比率によって変動するので、それぞれの値が変われば出力結果も変わります。

最小画面320pxと最大画面幅1440pxの上限下限が違っても同様です。

多少式の設計が複雑になっていますが、それには理由があります。

font-sizeが最小値よりも小さくなったり、或いは最大値よりも大きくなったりしない様にするためです。

実践で使うには

このCSS部分を使い回しできる様にしておきましょう。

そして以下の項目をそのケースによって変えるだけです。

前提となる数値の決定

この数値は前もって決定しておく必要があります。

4種の数値を代入するだけで、常に「最小画面幅以上、最大画面幅未満」のfont-sizeが自動で表示できる訳です。

手計算が必要な部分

公式の中には前もって計算した数値を入れる箇所が2つあります。

この2つについては、前もって計算して式に入れる様にしましょう。

vwは常に画面幅

vwは常に100vwです。これは画面幅一杯の長さを100vwと表示するためです。

幅が1200pxなら100vwのところに1200という数値が入る事になります。

自動計算式設定例

任意指定のメディアクエリに計算式を追加

本記事の序盤でフォントを任意に設定した場合の3つのメディアクエリ例を紹介しました。

CSS（サイズ間を指定する場合）

@media (max-width: 1440px) { font-size: 1.5rem; } @media (max-width: 990px) { font-size: 1.25rem; } @media (max-width: 320px) { font-size: 1rem; }

これを、さらに間のサイズ帯でフォントが自動可変するように改良してみましょう。

calc計算式を追加した例

html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 4 * ((100vw - 320px) / 670)); } } @media screen and (min-width: 990px) { html { font-size: 1.25rem; } } @media screen and (min-width: 991px) { html { font-size: calc(20px + 4 * ((100vw - 990px) / 450)); } } @media screen and (min-width: 1440px) { html { font-size: 1.5rem; } }

CSSの解説

本CSSのブレークポイントは3か所で、それが320pxと990pxと1440pxです。

さらにその間のサイズ帯が、自動可変する仕組みになっています。

320から990の間のcalc式

font-size: calc(16px + 4 * ((100vw - 320px) / 670));

320から990までの間、フォントの最小値は16pxで最大値が1.25remの20pxですので、差し引き「4」の数値が入っています。

100vwから差し引かれているのは、最小画面幅の320pxですね。

最後の670というのは、最大画面幅990から最小画面幅320を引いたものです。

991から1440の間のcalc式

font-size: calc(16px + 4 * ((100vw - 990px) / 450));

991から1440までの間、フォントの最小値は1.25remの20pxで最大値が1.5remの24pxですので、差し引き「4」の数値が入っています。

100vwから差し引かれているのは、最小画面幅の990pxですね。

最後の450というのは、最大画面幅1440から最小画面幅990を引いたものです。

まとめ

以上、calcの計算式を使ったfont-sizeの自動可変の仕組みをご紹介しました。

最後に紹介した様に中間地点をあえて決める必要はありませんが、やろうと思えば方法があるという事です。

上記の公式を流用する事でfont-sizeは可変していきますが、本来はサイズと同時に余白なども調整していかなければなりません。

余白が狭かったりすると、文字サイズは最適でも100％の見栄えにはならないからです。

今回はfont-sizeでのご紹介のみでしたが、padding等の余白もcalc計算が可能です。

paddingでも使える相対単位em、remも、やはりhtmlのベースサイズ16pxが軸になっている訳ですからね。

ぜひお試しいただきたいと思います。

一押し人気コーナー紹介