見出しレベル1
見出しレベル2
見出しレベル3
本文テキストがここに入ります。段落の文章は読みやすさを重視し、 適切な行間と文字サイズで表示されます。長めの文章でも目が疲れにくい設計を心がけましょう。
キャプションや補足テキスト、注釈などの小さめの文字はここに表示されます。
Loading...
ベースサイズとスケール比率から、調和のとれたタイポグラフィスケールを生成します。
ベースサイズとスケール比率から、調和のとれたタイポグラフィスケールを生成します。
The quick brown fox jumps over ...
The quick brown fox jumps over the lazy ...
The quick brown fox jumps over the lazy dog. 素早い...
The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠惰...
The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠惰な犬を飛び
The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠惰な犬を飛び越える。
The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠惰な犬を飛び越える。
The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠惰な犬を飛び越える。
本文テキストがここに入ります。段落の文章は読みやすさを重視し、 適切な行間と文字サイズで表示されます。長めの文章でも目が疲れにくい設計を心がけましょう。
キャプションや補足テキスト、注釈などの小さめの文字はここに表示されます。
CSS カスタムプロパティとして :root に定義。var() で参照できます。
:root {
--font-size-xs: 0.64rem;
--line-height-xs: 1.5;
--font-size-sm: 0.8rem;
--line-height-sm: 1.5;
--font-size-base: 1rem;
--line-height-base: 1.5;
--font-size-lg: 1.25rem;
--line-height-lg: 1.2;
--font-size-xl: 1.5625rem;
--line-height-xl: 1.2;
--font-size-2xl: 1.9531rem;
--line-height-2xl: 1.2;
--font-size-3xl: 2.4413rem;
--line-height-3xl: 1.2;
--font-size-4xl: 3.0519rem;
--line-height-4xl: 1.2;
}font-size: var(--font-size-lg) のように参照#{var(...)} でエスケープsize = baseSize × ration
n = ステップ位置（baseが0、上に行くほど+1、下に行くほど-1）
CSS カスタムプロパティとして :root に定義。var() で参照できます。
:root {
--font-size-xs: 0.64rem;
--line-height-xs: 1.5;
--font-size-sm: 0.8rem;
--line-height-sm: 1.5;
--font-size-base: 1rem;
--line-height-base: 1.5;
--font-size-lg: 1.25rem;
--line-height-lg: 1.2;
--font-size-xl: 1.5625rem;
--line-height-xl: 1.2;
--font-size-2xl: 1.9531rem;
--line-height-2xl: 1.2;
--font-size-3xl: 2.4413rem;
--line-height-3xl: 1.2;
--font-size-4xl: 3.0519rem;
--line-height-4xl: 1.2;
}font-size: var(--font-size-lg) のように参照#{var(...)} でエスケープsize = baseSize × ration
n = ステップ位置（baseが0、上に行くほど+1、下に行くほど-1）
タイポグラフィスケール（Typographic Scale）は、 見出しから本文、キャプションまでのフォントサイズを数学的な比率に基づいて決定する手法です。 音楽の音階のように、調和のとれたサイズ階層を作ることで、 デザインに一貫性とリズムを生み出します。
代表的なスケール比率には、黄金比（1.618）、完全五度（1.5）、完全四度（1.333）などがあります。 ベースとなるフォントサイズ（通常16px）にこの比率を掛け合わせることで、 上位・下位のサイズを自動的に算出できます。
このツールでは、CSS カスタムプロパティ、SCSS変数、Tailwind CSS設定、 JSONデザイントークンの4形式で出力できるため、 様々なプロジェクトやデザインシステムに即座に導入できます。
行間（line-height）も見出し用・本文用で別々に設定できるため、 可読性を保ちながら見出しの締まった印象を両立させることができます。