タイプスケールジェネレーター
比率を選んでフォントを決めるだけ — 調和のとれたタイポグラフィシステムをCSSまたはTailwindとしてワンクリックでエクスポート。
4xl
4.209rem
The quick brown fox jumps over the lazy dog.
3xl
3.157rem
The quick brown fox jumps over the lazy dog.
2xl
2.369rem
The quick brown fox jumps over the lazy dog.
xl
1.777rem
The quick brown fox jumps over the lazy dog.
lg
1.333rem
The quick brown fox jumps over the lazy dog.
base
1.000rem
The quick brown fox jumps over the lazy dog.
sm
0.750rem
The quick brown fox jumps over the lazy dog.
xs
0.563rem
The quick brown fox jumps over the lazy dog.
:root {
--font-heading: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
/* Font properties */
--font-weight-heading: 700;
--font-weight-body: 400;
--leading-heading: 1.2;
--leading-body: 1.6;
--tracking-heading: -0.02em;
--tracking-body: 0em;
/* Type scale */
--text-xs: 0.563rem; /* 9.0px */
--text-sm: 0.750rem; /* 12.0px */
--text-base: 1.000rem; /* 16.0px */
--text-lg: 1.333rem; /* 21.3px */
--text-xl: 1.777rem; /* 28.4px */
--text-2xl: 2.369rem; /* 37.9px */
--text-3xl: 3.157rem; /* 50.5px */
--text-4xl: 4.209rem; /* 67.3px */
}よくある質問
- タイプスケールとは何ですか？
- タイプスケールは、1つの基準サイズと固定比率から導き出されたフォントサイズの集合です。各ステップは前のサイズに比率を掛けたもので、視覚的に調和のとれた階層を生み出します。音楽の音程と同じ原理で、「完全四度（1.333）」「短三度（1.2）」などの名前が付いています。
- どの比率を選べばいいですか？
- テキスト中心のUI（ダッシュボード、ドキュメント）には、長二度（1.125）や短三度（1.2）などの控えめな比率が適しています。サイズの差が大きくなりすぎません。エディトリアルやマーケティングページで強い階層が必要な場合は完全四度（1.333）以上が効果的。黄金比（1.618）はインパクトがありますが見出しが非常に大きくなるため、限定的な使用が推奨されます。
- CSSカスタムプロパティを使うメリットは？
- CSSカスタムプロパティ（CSS変数）を使うと、:rootで一度スケールを定義してスタイルシート全体で参照できます。--text-baseを変更するだけで、関連するすべてのサイズが自動的に更新されます。ビルドツール不要で、すべてのモダンブラウザでネイティブサポートされています。
- Tailwind CSSと組み合わせるには？
- Tailwindエクスポートをコピーして、tailwind.config.js（またはts）のtheme.extendセクションに貼り付けます。生成されたfontSizeエントリはTailwindのデフォルト値を上書きし、残りはそのまま維持されます。その後、テンプレートでtext-lg、text-2xlなどのクラスをそのまま使用できます。
- pxではなくremを使う理由は？
- remはブラウザのルートフォントサイズを基準にするため、ユーザーがブラウザ設定でフォントサイズを変更した場合に追従します。ユーザーが20pxに設定すると、rem単位のすべてのフォントサイズが比例して大きくなり、可読性が維持されます。pxは絶対値なのでこの設定を無視します。アクセシビリティガイドラインでは、フォントサイズにremの使用が標準的に推奨されています。
- このツールはGoogleからフォントを読み込みますか？
- はい。見出しまたは本文パネルでフォントを選択すると、ツールはGoogle FontsのCSSリンクをページに動的に挿入してライブプレビューを表示します。AppicLabはフォントデータを保存しません。生成されるCSSとTailwind設定にはfont-family名のみが含まれます。自分のプロジェクトには対応するGoogle Fontsのlinkタグ（またはセルフホストの代替）を追加する必要があります。