画面サイズに応じてfont-sizeを「ちょっとずつ」拡縮させる

こんにちは。CSS大好きコーダーです。

閲覧デバイスが多様化する現代において、WEBサイトの主役とも言える「文字」のサイズはとても重要です。

とはいえ、メディアクエリで最適な文字サイズをそれぞれ逐一指定していくのはかなり大変です。

そこで今回は、画面幅に応じたfont-sizeを柔軟かつたった1行でスマートに指定する方法をご紹介します。
なんとメディアクエリすら必要ありません。

最もメジャーな記載方法は、このようにスマホ・タブレット・パソコンと3段階のブレークポイントを定めて、それぞれ記述していく手法です。

CSS

@media screen and (min-width: 480px) {
	/* スマホ */
	h3{
		font-size: 2rem; 
	}
	p {
		font-size: 1.4rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* タブレット */
	h3{
		font-size: 2.5rem;
	}
	p {
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 1024px) {
	/* PC */
	h3{
		font-size: 3rem;
	}
	p {
		font-size: 1.6rem;
	}
}

親の顔よりよく見る構成ですね。

「スマホではコレ！PCはコレ！」とそれぞれきっちり定めているため非常に解りやすく、確実性が高いというメリットがあります。

しかし一口に「480px未満」といってもデバイスによって意外と振れ幅が大きく、一概に「480px未満では◯rem」と指定しても、綺麗におさまらないケースも出てきます。

かといって「min-width: 375px・min-width: 414px・min-width: 480px…」と細かくブレークポイントを定めていくのは、あまりスマートではありません。

そんな時に便利な単位が vw です。

vwとは、ざっくり言えば画面の横幅サイズです。草を生やしているわけではありません。
100vwで横幅画面いっぱい、10vwで画面の1/10くらいのサイズと考えていただければOKです。

これは%やem等と異なり、親要素の影響は一切受けません。

で、そんなvwでフォントを指定した場合、このようになります。

下記は見出しをfont-size: 5vw;、本文を font-size: 2vw;とした場合です。

流石に拡縮しすぎなのよ。そこまでやれとは言ってない。

画面サイズに完全依存なので、意地でも途中改行をさせたくない場合などには便利ですが、
こんなフ◯ージョンに失敗したゴ◯ンクス並みの極端な体型変化をされてしまうと、ちょっと汎用性には欠けます。

というわけで、もう少し拡大 / 縮小率をマイルドにしていきます。

CSS

h3 {
	/* SP:2rem | TB:2.5rem | PC:3rem */
	font-size: calc(1.25vw + 1.5rem);
}
p {
	 /* SP:1.4rem | TB:1.5rem | PC:1.6rem */
	font-size: calc(0.25vw + 1.3rem);
}

ちょっと雑な計算になりますが、スマホを400px、タブレットを800px、PCを1200pxとした場合、

1.25vw→ スマホ5px・タブレット10px・パソコン15px（5pxずつ上昇）
0.25vw→ スマホ1px・タブレット2px・パソコン3px（1pxずつ上昇）

このようになります。

calcで「固定数値 + サイズごとに変わる数値」といった形式で指定をすることで、画面サイズに合わせてちょっとずつ変化するようになります。

ただ、これでも少しずつとはいえ際限なく拡縮してしまいます。
Chromeではデフォルトで文字が10px以下にはならないようになっているものの、大きな画面でフルスクリーン表示した場合、想定を超えた文字サイズになってしまうかもしれません。

そこでclampの関数を使って一定数以上に大きく / 小さくならないように設定します。

CSS

h3 {
	/* 最小1.8rem | SP:2rem | TB:2.5rem | PC:3rem | 最大3.2rem */
	font-size: clamp(1.8rem, calc(1.25vw + 1.5rem), 3.2rem);
}
p {
	/* 最小1.2rem | SP:1.4rem | TB:1.5rem | PC:1.6rem | 最大1.8rem */
	font-size: clamp(1.2rem, calc(0.25vw + 1.3rem), 1.8rem);
}

これで想定を超えた文字サイズになる事はなく、スマートな形で文字の拡縮を設定する事ができました。
メディアクエリすらも必要無く、スッキリ一行で済むところも嬉しいですね。

下記は画面サイズに応じたvwのpx換算の早見表です。
拡大 / 縮小率の目安としてお役立てください。

それでは、良きfont-sizeライフを。