タイポグラフィスケール生成ツール

タイポグラフィスケール生成ツールとは？

タイポグラフィスケール生成ツールは、基準サイズとモジュラー比率を、必要なだけの大きい見出し段階と小さいキャプション段階を持つ、完全で数学的に一貫したタイプスケールに変換します。素のフォントサイズに加え、各段階に対応する行間と字間を導き、さらに別のモバイル比率を用いてモバイルとデスクトップのビューポート間を補間する任意の流動的 clamp() 式も生成できます。デザイナーやフロントエンド開発者は、デザインシステムのタイポトークン構築、サイズの統一、そのまま貼り付けられる CSS・Sass・Tailwind・JSON の取得に利用します。任意のカスタム比率を入力するか定番比率を選び、基準サイズと単位（px または rem）を設定し、自分の font-family でプレビューして、必要な形式をコピーします。

タイポグラフィスケール生成ツールの使い方

1. 比率フィールドに任意のカスタム比率を入力するか、設定内のプリセットドロップダウンから完全4度（1.333）などの定番比率を選びます。
2. 基準サイズを設定します。これが本文サイズであり、スケールの基点になります。
3. 設定で、大きい段階と小さい段階をいくつ生成するかを選びます。小さい段階は基準より下にあり、キャプションや注記に使います。
4. 基準行間・タイトな行間、大きい文字の字間を調整し、font-family を入力して自分の書体でスケールをプレビューします。
5. レスポンシブなタイプには、最小・最大のビューポート幅とモバイル比率を設定して流動的 clamp() スケールを作ります。
6. 出力形式を CSS 変数・流動的 clamp()・Sass・Tailwind 設定・JSON の間で切り替え、コードや任意の1段階のサイズをコピーします。

使用例

比率 1.333、基準 16px、上 5 / 下 1

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

基準 16px、比率 1.333、モバイル比率 1.2、320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

任意のスケール、Tailwind 書き出し

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

よくある質問

プリセットだけでなくカスタム比率も使えますか？

はい。比率フィールドに 1.2、1.5、1.618 や 1.45 のような非標準の値など、任意の数値を入力できます。設定のプリセットドロップダウンは同じフィールドを埋めるショートカットにすぎず、プリセットに一致しない値を選ぶと「カスタム」と表示されます。

小さい（マイナス方向の）段階はどう機能しますか？

スケールは基準サイズ（第0段階）を基点にします。大きい段階は基準に比率を掛け、小さい段階は割ることで、基準より下に sm や xs のようなキャプション・注記サイズを作ります。大きい段階と小さい段階の数は設定で決められます。

行間と字間はどう計算されますか？

行間は本文サイズでの基準値から、文字が大きくなるほどタイトな値へと変化し、字間は基準でのゼロから大きい文字用の値へと変化するため、大きな表示文字はやや詰まり、小さな文字はやや広がります。どちらの曲線も設定で調整できます。

流動的 clamp() スケールとは何ですか？

各段階について、最小と最大のビューポート幅の間で滑らかに大きくなる font-size: clamp() を作ります。最大幅では主比率、最小幅では別のモバイル比率を使います。書き出すには出力形式で CSS clamp() を選びます。

私のデータはサーバーに送信されますか？

いいえ。サイズ・行間・字間・流動的 clamp() 値を含むスケール全体が、単純な計算でブラウザ内のみで処理されます。何もアップロードされないため、オフラインでも動作し、設定のプライバシーが保たれます。