Design Tools
タイポグラフィスケールジェネレーター
調和のとれたタイポグラフィスケールを生成
16px
プレビュー
6xl
4.768rem
The quick brown fox jumps over the lazy dog
5xl
3.815rem
The quick brown fox jumps over the lazy dog
4xl
3.052rem
The quick brown fox jumps over the lazy dog
3xl
2.441rem
The quick brown fox jumps over the lazy dog
2xl
1.953rem
The quick brown fox jumps over the lazy dog
xl
1.563rem
The quick brown fox jumps over the lazy dog
lg
1.25rem
The quick brown fox jumps over the lazy dog
base
1rem
The quick brown fox jumps over the lazy dog
sm
0.8rem
The quick brown fox jumps over the lazy dog
xs
0.64rem
The quick brown fox jumps over the lazy dog
スケール表
| 名前 | サイズ | 行の高さ | 文字間隔 | 太さ |
|---|---|---|---|---|
| xs | 0.64rem | 1.6 | normal | 400 |
| sm | 0.8rem | 1.55 | normal | 400 |
| base | 1rem | 1.5 | normal | 400 |
| lg | 1.25rem | 1.45 | -0.01em | 400 |
| xl | 1.563rem | 1.4 | -0.01em | 600 |
| 2xl | 1.953rem | 1.35 | -0.02em | 600 |
| 3xl | 2.441rem | 1.3 | -0.02em | 700 |
| 4xl | 3.052rem | 1.25 | -0.02em | 700 |
| 5xl | 3.815rem | 1.2 | -0.02em | 700 |
| 6xl | 4.768rem | 1.15 | -0.02em | 700 |
:root {
/* Base size: 16px, Scale ratio: 1.25 */
--font-size-xs: 0.64rem;
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.563rem;
--font-size-2xl: 1.953rem;
--font-size-3xl: 2.441rem;
--font-size-4xl: 3.052rem;
--font-size-5xl: 3.815rem;
--font-size-6xl: 4.768rem;
/* Font family */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Typography classes */
.text-xs {
font-size: var(--font-size-xs);
line-height: 1.6;
}
.text-sm {
font-size: var(--font-size-sm);
line-height: 1.55;
}
.text-base {
font-size: var(--font-size-base);
line-height: 1.5;
}
.text-lg {
font-size: var(--font-size-lg);
line-height: 1.45;
letter-spacing: -0.01em;
}
.text-xl {
font-size: var(--font-size-xl);
line-height: 1.4;
letter-spacing: -0.01em;
}
.text-2xl {
font-size: var(--font-size-2xl);
line-height: 1.35;
letter-spacing: -0.02em;
}
.text-3xl {
font-size: var(--font-size-3xl);
line-height: 1.3;
letter-spacing: -0.02em;
}
.text-4xl {
font-size: var(--font-size-4xl);
line-height: 1.25;
letter-spacing: -0.02em;
}
.text-5xl {
font-size: var(--font-size-5xl);
line-height: 1.2;
letter-spacing: -0.02em;
}
.text-6xl {
font-size: var(--font-size-6xl);
line-height: 1.15;
letter-spacing: -0.02em;
}
なぜタイポグラフィスケールジェネレーターを使うべきですか？
- ✓100%無料 - 隠れた費用やプレミアム機能はありません
- ✓登録不要 - アカウント作成なしですぐに使えます
- ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
- ✓超高速 - サーバー遅延なしで即座に結果を確認できます
使い方
- 上の入力エリアにテキストを入力または貼り付けてください
- ツールが自動的に入力を処理します
- 結果をコピーするかファイルとしてダウンロードしてください
機能
- ✓Multiple scale ratios (golden, minor third, etc.)
- ✓Base size customization
- ✓Preview all heading levels
- ✓CSS, SCSS, and Tailwind export
- ✓Responsive scaling options
- ✓Line height recommendations
よくある質問
What is a typography scale?
A typography scale is a series of harmoniously related font sizes based on a mathematical ratio.