本文へスキップ
Aa

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

モジュラータイプスケールとCSSを生成。

4xl48.828px / 1.548.828px · n=5

あのイーハトーヴォのすきとおった風

3xl39.063px / 1.539.063px · n=4

あのイーハトーヴォのすきとおった風

2xl31.25px / 1.531.25px · n=3

あのイーハトーヴォのすきとおった風

xl25px / 1.525px · n=2

あのイーハトーヴォのすきとおった風

lg20px / 1.520px · n=1

あのイーハトーヴォのすきとおった風

base16px / 1.516px · n=0

あのイーハトーヴォのすきとおった風

sm12.8px / 1.512.8px · n=-1

あのイーハトーヴォのすきとおった風

xs10.24px / 1.510.24px · n=-2

あのイーハトーヴォのすきとおった風

:root {
  --text-4xl: 48.828px;
  --text-4xl-lh: 1.5;
  --text-3xl: 39.063px;
  --text-3xl-lh: 1.5;
  --text-2xl: 31.25px;
  --text-2xl-lh: 1.5;
  --text-xl: 25px;
  --text-xl-lh: 1.5;
  --text-lg: 20px;
  --text-lg-lh: 1.5;
  --text-base: 16px;
  --text-base-lh: 1.5;
  --text-sm: 12.8px;
  --text-sm-lh: 1.5;
  --text-xs: 10.24px;
  --text-xs-lh: 1.5;
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-lh, 1.5);
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh, 1.5);
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh, 1.5);
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh, 1.5);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh, 1.5);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--text-base-lh, 1.5);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh, 1.5);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh, 1.5);
}

タイポグラフィスケール生成について

タイポグラフィスケール生成は、ベースサイズに比率（モジュラースケール）を累乗して、見出し〜本文までのフォントサイズ段階を一気に設計するツールです。短2度〜黄金比までのクラシックな比率プリセットに加え、任意比率・上下ステップ数・px/rem・命名（Tシャツ / HTML / ステップ）・行間を調整できます。 toco.toolsでは各ステップを実寸プレビューしながら、CSSカスタムプロパティ、ユーティリティクラス、Tailwindの fontSize 断片、SCSSマップをコピーできます。 すべてブラウザ内で処理され、設定はサーバーに送られません。

使い方

  1. 比率プリセットか任意の比率を選ぶ
  2. ベース・ステップ・単位を調整
  3. プレビューを確認してCSSをコピー

よくある質問（FAQ）

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

ベースサイズに一定の比率を何度も掛けて、調和のとれたフォントサイズ段階を作る方法です。各ステップは base × ratio^n です。

どの比率を選べばよいですか？

本文中心なら 1.125〜1.25（長2度・長3度）、見出し差を大きくしたいなら 1.333〜1.618（完全4度〜黄金比）がよく使われます。

px と rem の違いは？

pxは絶対サイズ、remはルートフォントサイズ基準の相対サイズです。アクセシビリティとレスポンシブでは rem が推奨されることが多いです。単位切替時はベース値を自動換算します。

設定は外部に送られますか？

いいえ。すべてブラウザ内で処理されます。