タイポグラフィ

PreviousNext

タイポグラフィの定義は、一貫性のあるユーザー体験を作り上げる上で極めて重要な役割を果たし、ウェブサイトの全体的な視覚的アイデンティティ、読みやすさ、ユーザー体験等に大きな影響を与えます。

H1

Heading 1

H2

Heading 2

H3

Heading 3

H4

Heading 4

Body LG

Large body text for product experiences

Body

Readable body text with consistent rhythm

Caption

Caption text for supporting details

Code

const value = 'code text'

タイプスケール

レベルクラスサイズウェイト用途
H1text-4xl font-bold36px700ページタイトル
H2text-3xl font-semibold30px600セクション見出し
H3text-2xl font-semibold24px600サブセクション
H4text-xl font-medium20px500グループ見出し
Body LGtext-base16px400リード文・説明
Bodytext-sm14px400本文・UI ラベル
Captiontext-xs12px400補足・メタ情報
Codetext-sm font-mono14px500コード・トークン表示

フォント変数

フォントは CSS 変数で管理されています。

変数役割
--font-sans本文・UI テキスト
--font-heading見出し（H1〜H4）
--font-monoコード・トークン
@theme inline {
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
}

ルール

  • 行長 — 本文カラムは最大 65ch に抑えて読みやすさを確保します。
  • 行間 — 本文は leading-relaxed（1.625）、見出しは leading-tight（1.25）を基準にします。
  • 日本語フォント — [data-lang="ja"] にスコープされた日本語フォント変数（--font-ja）が適用されます。

Ketyap 仕様

フォントは Noto Sans JP（400 / 500 / 700）。font-feature-settings: 'palt' を body に必ず指定する。

RoleSizeWeightLetter SpacingLine Height
Heading 136px500-0.02em1.2
Heading 228px500-0.015em1.3
Heading 320px500-0.01em1.4
Body15px40001.7
Caption13px40001.5
Label11px5000.08em1.4

Label は text-transform: uppercase を必ず併用する。