Clamp()関数と、フォントサイズの設定方法

Advertisements

CSSで使われるclamp()関数は、
最小値(min)・推奨値(preferred)・最大値(max)の３つを設定できる関数です。
clamp()を使うことで、メディアクエリを使わず、コードを１行で表すことも可能になります。

ブラウザも、主要ブラウザ(IE以外)では問題なく使うことができ、
フォントなど、レスポンシブ対応するのに便利なclamp()関数について深めていきたいと思います。


font-size: clamp(min, preferred, max);


/*書き方例*/
font-size: clamp(1rem, 1rem + 2vw, 3rem); 
width: clamp(300px, 50%, 600px);

clamp()と、min()やmax()との違い

clamp()は、min()やmax()と以下のような違いがあります。

	min()	max()	clamp()
意味	()内の最小値を採用	()内の最大値を採用	推奨値が範囲外なら、最小値 or 最大値を採用(つまり限度を設定）
例	width: min(100%, 500px);	width: max(50%, 300px);	font-size: clamp(1rem, 1rem + 2vw, 3rem):
	100%が500pxより小さい場合、100%を適応	50%が300pxより大きい場合は50%を適応	理想は1rem + 2vwを取りつつ、1rem～3remの値になる

Fluid Typographyとclamp()

Fluid Typography(フルイド・タイポグラフィ)とは、
画面幅やビューポートの幅に応じて、
いきなり大きく切り替わるのではなく
滑らかにフォントサイズを変化させていく方法です。
レスポンシブデザインの一環として使うことができ、見た目の一貫性を保ちやすくなります。

そんなFluidTypographyを、clamp()を使って設定していきます。

Advertisements

Fluid Typographyを設定する

たとえばclamp()の書き方として、


font-size: clamp(1rem, 2vw, 2rem);　
font-size: clamp(1rem, 2vw + 1rem, 2rem);

上記のような推奨値の書き方があったとすると、

前者の2vw=ビューポート幅2%は、画面幅のみに依存するので、スマホだと極小になる可能性がある
後者の 2vw + 1rem の場合、画面幅によって変化はしつつ、最低でも1rem以上(絶対的な基準値)となるので、安定して可読性は担保される

といえます。

このように、「2vw + 1rem」のような推奨値の計算式を出すことで、
最小値〜最大値の間を滑らかに変化する
FluidTypographyの作成が可能になります。

Fluid Typographyのお役立ちサイト

clamp()の推奨値の計算式は、自分で計算する以外にも、Webサイトでも計算することも可能です。
(こちらの方が簡単！)

Utopiaのサイトでは、下記を入力することで推奨値を出してくれます。

SP、PCの画面幅設定
上記幅の際のベースフォントサイズ
タイプスケール比(ベースフォントから見出し等他サイズを、決めるための比率)

Fluid Type Scale Calculatorも、似たサイトになっています。

タイプスケール比がいらない場合は、
Min-Max-Value Interpolationのサイトでも推奨値を出すことができます。

Advertisements

Fluid Typographyを自分で計算する方法

幅に連動してフォントサイズを大きくしてゆく推奨値は、
以下の式で出すことができます。


preferred = min-size + ((max-size - min-size) / (max-width - min-width)) * (current-width - min-width) /* current-width:現在のビューポート幅*/

min-size	最小幅の際のフォントサイズ
max-size	最大幅の際のフォントサイズ
((max-size – min-size) / (max-width – min-width))	フォントサイズが、幅に応じてどれだけ変化するか?の比率
(current-width – min-width)	最小幅〜現在の幅までの差

実際に数字を当てはめてみます。例えば、下記の数値で計算してみます。

最小フォントサイズ（min-size）	16px
最大フォントサイズ（max-size）	24px
最小幅（min-width）	375px
最大幅（max-width)	1280px

さきほどの式を使うと、現在のビューポート幅（current-width） = 800px　のときに、
16 + ((24 – 16)/ (1280 – 375) * (800 – 375)) ≒ 16+ 3.74 ≒ 19.74pxとなります。

相対的な単位（rem や vw）に変換する

次に、さきほどご紹介したサイトのように、
remやvwといった、相対的な単位を用いてシンプルにしたいと思います。

1: vwを使う

1vw = ビューポート全体幅の１%
100vw = ビューポート全体幅（= pxに変換される）

となるため、先ほどの式はvwと使うと、
font-size = 16px + 8px * ((100vw – 375px) / 905px) になります。

計算すると、
font-size =
16px + (8px * 100vw / 905px) – (8px * 375px / 905px)
= 16px + 0.883978vw – 3.31381px = 12.68619px + 0.883978vw となります。

2: remを使う

1rem = 16px

で、12.68619px をremに換算すると、近似値から
font-size の推奨値は0.793rem + 0.884vwになります。

すべてをclamp()要素にまとめると、

font-size : clamp( 1rem, 0.793rem + 0.884vw, 1.5rem )

で表すことができます。