Typography
ウェブ標準16pxをベースにしたタイプスケール。CJK最適化の13px（text-sm）も含まれています。
16
16px Base
ウェブ標準 (1rem)
13
13px CJK
CJK可読性最適化
Aa
Inter + Locale
EN / JA / KO
A
A
A
3 Weights
400, 600, 700
Font Family
ベースフォント（Inter）+ ロケール別CJKフォント構成
Inter
font-sansABCDEFG abcdefg 0123456789
デフォルト（トークン値そのまま）
Noto Sans JP
Japanese locale override
font-sansあいうえお 漢字 カタカナ
日本語ロケール（CSS override）
Noto Sans KR
Korean locale override
font-sans가나다라 한글 디자인
韓国語ロケール（CSS override）
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