親要素の幅ぴったりになるようフォントサイズを調整してくれるJavaScriptライブラリ「Fitty」

Fittyは、親要素の幅に合わせてフォントサイズを自動調整してくれるJavaScriptライブラリです。日本語にも対応しています。

下記のように、親要素の幅全体に表示されるようにテキストが伸縮します。フォントサイズが変わる時に一瞬ラグがありますが、レスポンシブにも対応しています。

Fittyの使い方

まずはGitHubからスクリプトをダウンロードします。

distフォルダ内にfitty.min.jsが入っているので、<head>内もしくは</body>直前で読み込みます。

<script src="dist/fitty.min.js"></script>

HTMLは下記のようにします。今回はpタグにしていますが、divやh2など何でもOKです。

任意のクラスを付けるようにしてください。

<p class="fit">Hello World</p>
<p class="fit">日本語もOK</p>

最後にスクリプトを実行します。fitty.min.jsの読み込みよりも後に記述するようにしてください。

クラス名(.fit)は、指定した任意のクラス名に置き換えてください。

<script>
  fitty('.fit');
</script>

最小のフォントサイズや最大フォントサイズ等のパラメータも用意されています。

<script>
  fitty('.fit', {
    minSize: 16, //最小サイズ
    maxSize: 512, //最大サイズ
    multiLine: true //最小サイズの時にテキストを折り返す
  });
</script>

WordPressでは、WordPress6.9から”伸縮する見出し”というブロックが実装されましたが、挙動としては似ています。

親要素全体にドンとテキストが表示されるとインパクトがありますね。

clamp()とコンテナクエリーを使えばCSSだけでも実現できそうな気はしますが、親要素に対して完全にフィットさせるにはFittyを使う方がよさそうです。