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

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

タイポグラフィスケール生成ツールは、1つの基準サイズとモジュラー比率を、本文と h1 から h6 までの見出しを網羅した、数学的に一貫した完全なタイプスケールに変換する無料のブラウザ内ツールです。モジュラースケールは各段階で基準サイズに固定の比率を掛け（縮小時は割り）ます。そのため大きな見出しは均等で比例的な刻みで大きくなり、恣意的ではなく意図的に感じられます。デザイナーやフロントエンド開発者は、デザインシステムのタイポグラフィトークンの構築、サイト全体での見出しサイズの統一、選んだ比率をそのまま貼り付けられる CSS への変換に利用します。ドロップダウンから比率を選び、基準サイズと単位（px または rem）を設定し、スケールを CSS カスタムプロパティ・Sass 変数・シンプルな rem リストとしてコピーします。

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

1. ドロップダウンからモジュラー比率を選びます。例えば短3度（1.2）、完全4度（1.333）、黄金比（1.618）などです。
2. 「基準サイズ」フィールドで基準サイズを設定します。これが本文サイズとなり、スケールの基点になります。
3. 単位のセグメントコントロールで、出力を px と rem の間で切り替えます（rem はルート 16px を前提とします）。
4. ライブプレビューで、本文と h1〜h6 が計算されたサイズで表示される様子を確認します。
5. 出力形式を CSS 変数・Sass・rem の間で切り替え、コピーボタンで生成コードをコピーします。

使用例

比率 1.333、基準 16px

本文 16px、h6 21.328px、h5 28.43px、h4 37.897px、h3 50.517px、h2 67.34px、h1 89.764px

比率 1.618、基準 16px、CSS 変数

:root {
  --font-size-body: 16px;
  --font-size-h1: 287.072px;
}

比率 1.2、基準 16px、rem

本文: 1rem; h1: 2.986rem

よくある質問

モジュラースケールとは何ですか？

モジュラースケールは基準サイズから始まり、より大きい段階ごとに固定の比率を掛けます（小さい段階では割ります）。ここでは本文が基準サイズを使い、h6 は基準×比率、h5 は基準×比率の2乗、というように h1 まで続き、各見出しが隣の段階と比例関係を保ちます。

どの比率が選べますか？

ドロップダウンには、短2度（1.067）、長2度（1.125）、短3度（1.2）、長3度（1.25）、完全4度（1.333）、増4度（1.414）、完全5度（1.5）、黄金比（1.618）など一般的なタイポグラフィ比率が用意されています。

px と rem 単位の違いは何ですか？

px は絶対的なピクセルサイズを出力し、rem は一般的な 16px の既定値を前提にルート要素に対する相対サイズを出力します。rem はユーザーのブラウザのフォントサイズ設定に応じて拡大縮小するため、アクセシビリティの観点でよく好まれます。

3つの出力形式では何が得られますか？

CSS 変数は --font-size-* カスタムプロパティを含む :root ブロックを、Sass は $font-size-* 変数を、rem は任意のスタイルシートに貼り付けたり手動で参照できるコンパクトなリストを生成します。

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

いいえ。スケール全体は単純な算術でブラウザ内のみで計算されます。フォントサイズ・比率・単位がアップロードされることは一切なく、オフラインでも動作し、設定のプライバシーが保たれます。