S
SnapUtil
デザインツール

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

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

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

スケール表

名前サイズ行の高さ文字間隔太さ
xs0.64rem1.6normal400
sm0.8rem1.55normal400
base1rem1.5normal400
lg1.25rem1.45-0.01em400
xl1.563rem1.4-0.01em600
2xl1.953rem1.35-0.02em600
3xl2.441rem1.3-0.02em700
4xl3.052rem1.25-0.02em700
5xl3.815rem1.2-0.02em700
6xl4.768rem1.15-0.02em700
: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%無料 - 隠れた費用やプレミアム機能はありません
  • 登録不要 - アカウント作成なしですぐに使えます
  • プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
  • 超高速 - サーバー遅延なしで即座に結果を確認できます

使い方

  1. 上の入力エリアにテキストを入力または貼り付けてください
  2. ツールが自動的に入力を処理します
  3. 結果をコピーするかファイルとしてダウンロードしてください

機能

  • タイプスケール計算
  • 比率プリセット
  • カスタムベースサイズ
  • レスポンシブスケール
  • CSS変数出力

よくある質問

What is a typography scale?

A typography scale is a series of harmoniously related font sizes based on a mathematical ratio.

関連ツール