デザインツール

タイポグラフィスケールジェネレーター

調和のとれたタイポグラフィスケールを生成

基本サイズ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

1.563rem

The quick brown fox jumps over the lazy dog

1.25rem

The quick brown fox jumps over the lazy dog

base

1rem

The quick brown fox jumps over the lazy dog

0.8rem

The quick brown fox jumps over the lazy dog

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;
}