レスポンシブタイポグラフィとは?CSSのclamp()で文字を画面幅に合わせる方法

スマートフォンではちょうどよかった見出しが、PCの広い画面では物足りなく見える、という経験はありませんか。

画面幅に合わせて文字サイズ・行間・行の長さを調整する考え方を「レスポンシブタイポグラフィ」と呼び、CSSのメディアクエリやclamp()関数を使って実現します。

この記事では、レスポンシブタイポグラフィとは何か、そしてCSSのclamp()で文字サイズを画面幅に合わせる方法の初歩を、初心者向けに解説します。

レスポンシブタイポグラフィの基本

まずはレスポンシブタイポグラフィとは何か、画面幅に合わせて何を変えるのかを押さえましょう。

CSSの書き方の前に考え方を理解しておくと、数値を決めるときに迷いにくくなります。

レスポンシブタイポグラフィとは

レスポンシブタイポグラフィとは、画面の幅に応じて文字サイズ・行間・行の長さを調整し、どの端末でも読みやすい状態を保つ考え方です。

もとになっているのは「レスポンシブデザイン」で、これは1つのWebページを、スマートフォンからPCまで画面の大きさに合わせてレイアウトが変わるように作る手法のことです。

レイアウトだけを画面に合わせても、文字の大きさが固定のままだと、スマートフォンでは見出しが何行にも折り返し、PCでは見出しが小さく間延びして見えてしまいます。

そこで、文字の側も画面幅に合わせて調整しよう、というのがレスポンシブタイポグラフィの考え方です。

変えるのは「サイズ・行間・行の長さ」の3つ

レスポンシブタイポグラフィで画面幅に合わせて調整するのは、主に文字サイズ・行間・行の長さの3つです。

どれも読みやすさに直結し、画面幅が変わると最適な値も変わるからです。

調整するもの	狭い画面(スマホ)	広い画面(PC)
見出しの文字サイズ	小さめにして折り返しを減らす	大きくして存在感を出す
本文の文字サイズ	16px前後	16px前後のまま、または少しだけ大きく
行間	やや詰め気味でも読める	少し広げて行を追いやすくする
行の長さ(1行の文字数)	画面幅で自然に短くなる	上限を決めて長くなりすぎないようにする

読みやすさの工夫

画面の幅に合わせて文字の大きさや行の長さを整えると、どの端末でも読みやすいページになります。

狭い画面:見出し22px・本文16px・行間1.7

読みやすさの工夫

画面の幅に合わせて文字の大きさや行の長さを整えると、どの端末でも読みやすいページになります。

広い画面:見出し30px・本文17px・行間1.8、行の長さに上限

左の見本は狭い画面を想定し、見出しを小さめにして本文を読み始めやすくしています。

右の見本は広い画面を想定し、見出しを大きく、行間を少し広げ、さらに1行が長くなりすぎないよう幅に上限を設けています。

行間と行の長さの具体的な目安は、行間と行長の黄金ルールで、PC・スマホ別の見出し・本文のサイズの目安はPC・スマホの文字サイズとはで解説しています。

段階的に変えるか、なめらかに変えるか

文字サイズを画面幅に合わせて変える方法には、「段階的に切り替える」方法と「なめらかに変化させる」方法の2種類があります。

段階的な方法は、画面幅が決まった値を超えたところでサイズを切り替えるもので、この切り替えの境目を「ブレイクポイント」と呼びます。

なめらかな方法は、画面幅に比例して文字サイズが少しずつ変わるもので、ブレイクポイントの前後でサイズが急に変わることがありません。

CSSでは、前者をメディアクエリ、後者をclamp()関数で実現するのが一般的です。

CSSで文字を画面幅に合わせる方法

ここからは、レスポンシブタイポグラフィをCSSで実現する方法を紹介します。

まずは見出しの文字サイズから試してみるのがおすすめです。

メディアクエリで段階的に切り替える

メディアクエリは、「画面幅が○px以上のときだけ、このスタイルを使う」という条件付きの指定ができるCSSの仕組みです(MDN:メディアクエリーの使用)。

次のコードは、スマートフォン向けの指定を基本にして、画面が広くなるにつれて見出しを大きくしていく例です。

/* 基本(スマートフォン) */
h1 { font-size: 1.5rem; }      /* 24px相当 */

/* 画面幅が768px以上 */
@media (min-width: 768px) {
  h1 { font-size: 2rem; }      /* 32px相当 */
}

/* 画面幅が1200px以上 */
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }    /* 40px相当 */
}

このように、狭い画面を基本にして広い画面向けの指定を足していく書き方を「モバイルファースト」と呼びます。

ブレイクポイントの値に決まりはないため、768pxや1200pxはあくまで例です。

実際の画面幅を変えながら、デザインが崩れ始める位置をブレイクポイントにしましょう。

clamp()でなめらかに変化させる

clamp()(クランプ)は、「最小値・推奨値・最大値」の3つを指定し、推奨値が最小値と最大値の範囲からはみ出さないように制限するCSSの関数です(MDN:clamp())。

推奨値に画面幅に応じて変わる単位を使うと、文字サイズが画面幅に合わせてなめらかに変化し、しかも小さすぎ・大きすぎにはならない、という指定ができます。

画面幅に応じて変わる単位にはvwを使い、1vwは画面の横幅の1%を表します(vwについてはCSSのビューポート単位で詳しく解説しています)。

たとえば画面幅が400pxのスマートフォンなら1vw=4px、画面幅が1000pxのPCなら1vw=10pxです。画面が広くなるほど、1vwの実際の大きさも大きくなります。

clamp()のカッコの中には、カンマで区切って左から順に次の3つを書きます。

最小値:これより小さくはしない、という下限
推奨値:ふだんはこの式で、画面幅に合わせて大きさを変える
最大値:これより大きくはしない、という上限

つまりclamp()は、「基本は②の式でサイズを変えるけれど、①より小さく、③より大きくならないようにブレーキをかける」関数です。

h1 {
  /* 最小24px、画面幅に応じて変化、最大40px */
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

このコードでは、推奨値を「1rem(16px)+画面幅の2%」にしています。

画面幅によって実際の文字サイズがどうなるかを計算すると、次のようになります(ブラウザの標準設定で1rem=16pxの場合)。

画面幅	推奨値の計算	実際の文字サイズ
375px(スマホ)	16px + 7.5px = 23.5px	24px(最小値で止まる)
800px(タブレット)	16px + 16px = 32px	32px
1280px(PC)	16px + 25.6px = 41.6px	40px(最大値で止まる)

表の「7.5px」「16px」「25.6px」は、それぞれの画面幅の2%(2vw)を計算した値です。たとえば375pxの画面なら、375×0.02=7.5pxになります。

表のように、狭い画面では最小値の24px、広い画面では最大値の40pxで止まり、その間は画面幅に合わせて少しずつ大きくなります。

推奨値にvwだけでなくremを足しているのは、ユーザーがブラウザの設定で文字を大きくしたときにも、その設定が反映されるようにするためです。

vwは画面幅だけで決まる単位なので、たとえばfont-size: 3vw;のようにvwだけで指定すると、読みにくいと感じた人がブラウザの文字サイズ設定を「大」にしても、文字の大きさは変わりません。

一方のremは、ブラウザの文字サイズ設定に連動する単位です。設定を大きくして基準が16pxから20pxになれば、1remも20pxになります。
そこで推奨値を「1rem+2vw」のように足し算にしておくと、ユーザーの文字サイズ設定を反映しながら、画面幅に合わせた変化もつけられます(remの詳しい仕組みはremとemの違いで解説しています)。

行間と行の長さも合わせて整える

文字サイズを変えたら、行間と行の長さもあわせて整えましょう。

文字サイズだけが変わって行間や行の長さがそのままだと、広い画面で行が長くなりすぎて、次の行の頭を見失いやすくなるからです。

p {
  font-size: 1rem;     /* 本文は16px相当で固定 */
  line-height: 1.8;    /* 単位なしで「文字サイズの1.8倍」 */
}

article {
  max-width: 35em;     /* 1行が全角35文字前後で折り返す */
  margin-inline: auto; /* 広い画面では中央に配置 */
}

行間を指定するline-heightは、1.8のように単位を付けずに書くと「文字サイズの1.8倍」という意味になり、文字サイズが変わっても行間が自動で比例します。

MDNでも、単位なしの値で指定するのが好ましい方法とされています(MDN:line-height)。

行の長さは、max-widthで上限を決めるのが簡単です。

em(エム)は「その要素の文字1つ分の大きさ」を表す単位で、文字サイズが16pxなら1em=16pxです。ページ全体の基準に対する倍率であるremと違い、その場所の文字サイズに合わせて変わります。

日本語の全角文字はほぼ1文字が1emの幅になるため、35emと指定すると1行がおよそ全角35文字で折り返します(MDN:CSSの長さの単位)。
pxで幅を決めると文字サイズを変えたときに1行の文字数がずれてしまいますが、emなら文字サイズが変わっても「1行に何文字か」がほぼ保たれるので、行の長さを決めたいときに使いやすい単位です。

最後のmargin-inline: auto;は、要素の左右の余白(マージン)を自動で同じ幅にして、中央に寄せる指定です。横書きのページでは、よく見かけるmargin-left: auto; margin-right: auto;と同じ意味になります(margin: 0 auto;も左右は同じですが、こちらは上下の余白も0にします)。

実践のポイント

レスポンシブタイポグラフィを取り入れるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

文字サイズをfont-size: 3vw;のようにvwだけで指定してしまうことがあります。
この書き方だと、狭い画面で文字が極端に小さくなるうえ、ブラウザの拡大機能や文字サイズ設定で文字を大きくしにくくなります。
MDNでもこの点が注意されているので、clamp()で最小値と最大値を決め、推奨値にremを含めましょう(MDN:clamp())。
最小値と最大値の差を大きくしすぎると、画面幅によって見た目が別物になったり、拡大したときにレイアウトが崩れたりします。
Webアクセシビリティの国際的なガイドラインWCAGでは、テキストを200%まで拡大しても内容や機能が損なわれないことが求められているので、拡大表示でも確認しましょう(WCAG 2.2 達成基準 1.4.4(WAIC 日本語訳))。
ブレイクポイントを細かく増やしすぎて、どの画面幅でどのサイズになるのか分からなくなることがあります。
まずは2〜3段階程度から始め、必要な箇所だけ追加しましょう。
本文の文字サイズまで画面幅に合わせて大きく変化させてしまうことがあります。
本文は16px前後で安定させ、変化させるのは主に見出しにすると、読みやすさと統一感を保てます。

よくある質問

Q. clamp()はどのブラウザでも使える?
A. 現在の主要なブラウザ(Chrome・Edge・Safari・Firefox)で使えます。
古いブラウザへの対応が必要な案件では、MDNのページ下部にある「ブラウザーの互換性」の表で確認しましょう(MDN:clamp())。
Q. メディアクエリとclamp()はどちらを使えばいい?
A. 見出しの文字サイズのように少しずつ変わってほしいものはclamp()、レイアウトの切り替えに合わせてはっきり変えたいものはメディアクエリ、と使い分けると分かりやすいです。
両方を組み合わせて使うこともよくあります。
Q. 推奨値の「1rem + 2vw」はどうやって決めればいい?
A. まず「スマホでは何px、PCでは何px」と最小値・最大値を決め、その間を画面幅に合わせてつなぐように、vwの数値を調整します。
ブラウザの開発者ツールで画面幅を変えながら、実際の大きさを確かめるのが確実です。