これは簡単で便利！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズの定義ができるツール -Type Scale Generator

フォントのサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィのテクニックです。CSSのclamp()関数を使用するとビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的に設定することができます。

たとえば、小さいスクリーンでは最小値の16pxに、大きいスクリーンでは最大値の24pxに設定し、その間はスクリーンサイズに応じてフォントサイズが変化する、という感じに実装できます。また、メディアクエリが一切不要というのもいいですね。

CSSのclamp()関数を使用したレスポンシブ対応のフォントサイズを簡単に定義できるオンラインツールを紹介します。

Type Scale Generator

これまでにも同様のツールを紹介してきましたが、今回紹介するのはType Scale Generatorです。利用にあたっては登録など面倒なことは一切不要で、簡単に利用できます。

Type Scale Generator

使い方は簡単です。
サイドバーにベースとなるフォントのサイズを設定し、変化のスケール、ビューポートの最小値と最大値を設定します。最初はデフォルトのままで試してみてください。

設定はサイドバーで

上部の「Preview」で表示するテキストを変更できます。今回は宮沢賢治のテキストに変更してみました。

レスポンシブ対応のフォントサイズをプレビュー

テキストは、見出しのh1-h6に加え、bodyやcaptionなどのテキストも同時に設定できます。

レスポンシブ対応のフォントサイズをプレビュー

ブラウザのサイズを変更して、フォントのサイズがどのように変化するか見てましょう。最小値が36px、最大値が48pxで、その間でフォントサイズが変化しています。

フォントのサイズがどのように変化するかを確認

生成したCSSは上部から、コードが生成されます。

• CSS
• SCSS
• Tailwind CSS
• WordPress

CSSの書き出しは普通にありますが、SCSSやTailwind CSS、さらにはWordPress用まで生成されるのはかなり珍しいですね。

CSSの書き出し

生成したCSSは、下記の通りです。