こんにちは、メンタのまさやです。

今回はレスポンシブフォントについてお話しします。

6月に行われるIEの廃止によりclampが使いやすくなりました。
それにより実装しやすくなったのがフォントサイズをvwで指定するレスポンシブフォントです。

今まではpx(rem)にてフォントサイズを指定してきました。しかしこれでは画像のように全ての画面幅で同じ比率の大きさにはなりません。

そのため画面幅によって予期しないところで改行が起きたりしていました。
それを解決するのがこのレスポンシブフォントです。

レスポンシブフォントの指定の仕方について詳しくわからない方は以下の動画をご覧ください。
https://youtu.be/oXHmEK_z-lo?t=348

真ん中のvwの決め方

ここでは真ん中のvwの計算方法について話します。
vwのままだと極端な話、画面幅が3000pxの時にフォントがすごく大きくなってしまいます。
そのためどの画面幅以上で固定のフォントにするかを決めなければなりません。

その画面幅が1200pxなのか1800pxなのかはデザイン次第かと思います。

動画では

clamp(16px , 3vw, 32px)

と指定しています。これは3vwが32pxになる画面幅、つまり1066px(32➗0.03)くらいを超えるとフォントは32pxになって533px(16➗0.03)くらいを下回るとフォントサイズが16pxになります。

こうすることで画面幅533pxから1066pxの間はフォントが画像のように拡大、縮小します。

1200px以上で32pxにしたい場合は

clamp(16px , 2.6vw, 32px)

となり、615px以下で16pxになります。