Typography
ウェブ標準16pxをベースにしたタイプスケール。日本語に最適化された13px（text-sm）も含まれています。
Font Family
英語と日本語の両方をサポートするフォントの組み合わせ
Inter
+ Noto Sans JP
font-sansABCDEFGabcdefg あいうえお 漢字 カタカナ
UI全般（見出し、本文、ラベル）
Fira Code
font-monoconst x = 42; => {}
コード、技術的な値
Type Scale
クリックしてコピー。11pxから48pxまでの11段階タイプスケール
各サイズに最適な行高（line-height）が自動的に含まれています。別途設定は不要です。
Font Weight
3つの基本ウェイトのみを使用して一貫性を維持
Aa
400
Regular
font-normal本文、説明
Aa
600
Semibold
font-semiboldサブ見出し、ボタン
Aa
700
Bold
font-bold見出し、強調
Semantic Styles
用途別に定義されたテキストスタイル
一般的な規約です。 コンテキストに応じてType Scaleの任意のサイズを自由に使用できます。
H1
text-3xl font-boldSize
30px
行高
40px
Weight
700
H2
text-2xl font-boldSize
24px
行高
34px
Weight
700
H3
text-xl font-semiboldSize
20px
行高
30px
Weight
600
H4
text-lg font-semiboldSize
18px
行高
28px
Weight
600
H5
text-base font-semiboldSize
16px
行高
26px
Weight
600
H6
text-md font-semiboldSize
14px
行高
22px
Weight
600
| タグ | プレビュー | Sizes | 行高 | ウェイト | Tailwind |
|---|---|---|---|---|---|
| H1 | 見出し | 30px | 40px | 700 | text-3xl font-bold |
| H2 | 見出し | 24px | 34px | 700 | text-2xl font-bold |
| H3 | 見出し | 20px | 30px | 600 | text-xl font-semibold |
| H4 | 見出し | 18px | 28px | 600 | text-lg font-semibold |
| H5 | 見出し | 16px | 26px | 600 | text-base font-semibold |
| H6 | 見出し | 14px | 22px | 600 | text-md font-semibold |
Interactive Preview
デザインシステム
text-2xlfont-normal