タイポグラフィ
foundation文字の大きさ・太さ・行間の決まりごと一覧です。役割ごとに決まったスタイルを使うことで、どの画面でも文字の見た目が揃います。
font — size
タイポグラフィの基本ユニット（size / weight / leading / tracking / family / style）。組み合わせて semantic 層の型を作る。
xs
12px
sm
14px
base
16px
lg
20px
xl
24px
2xl
32px
3xl
40px
font — weight
thin
100（400 で表示）
extralight
200（400 で表示）
light
300（400 で表示）
normal
400
medium
500
semibold
600
bold
700
extrabold
800
black
900（800 で表示）
font — leading
Text
Text
4
16px
Text
Text
6
24px
Text
Text
8
32px
Text
Text
10
40px
Text
Text
12
48px
font — tracking
tighter
-0.05em
tight
-0.025em
normal
0em
wide
0.025em
wider
0.05em
widest
0.1em
font — family
事業承継をオープンに
Gen Interface JP
font — style
normal
italic
タイポグラフィー
Math.ceil((size × 1.3) / 8) × 8
8 の倍数の行間で 8×8 ベースグリッドに揃える。weight は body サイズが medium、display サイズが bold（font-bold / font-medium で上書き可）。
見出し（large 以上）はクラス自体がレスポンシブ。size・line-height の a→b はモバイル→md（768px）以上。本文（medium 以下・article）は 16px 基準を守り縮めない。※ この表は画面幅で size 側が切り替わります。
.typo-xsmall
medium
日本語 にほんご ニホンゴ 0123 1行目
日本語 にほんご ニホンゴ 0123 2行目
.typo-small
medium
日本語 にほんご ニホンゴ 0123 1行目
日本語 にほんご ニホンゴ 0123 2行目
.typo-medium (base)
medium
日本語 にほんご ニホンゴ 0123 1行目
日本語 にほんご ニホンゴ 0123 2行目
.typo-large
bold
日本語 にほんご ニホンゴ 0123 1行目
日本語 にほんご ニホンゴ 0123 2行目
.typo-xlarge
bold
日本語 にほんご ニホンゴ 0123 1行目
日本語 にほんご ニホンゴ 0123 2行目
.typo-2xlarge
extrabold
日本語 にほんご 0123 1行目
日本語 にほんご 0123 2行目
.typo-3xlarge
extrabold
日本語 にほんご 0123 1行目
日本語 にほんご 0123 2行目
記事・読み物用 .typo-article
16 / 32 / regular
案件詳細記事など長文を読ませる本文用。サイズスケール（.typo-medium = 16/24）とは別枠で、行間を広め（32）に取り regular weight で可読性を優先する。
事業承継は、経営者だけの課題ではありません。従業員、取引先、地域経済まで巻き込む大きな転換点です。relay は、その複雑なプロセスをオープンにし、関わるすべての人が安心して次の一歩を踏み出せるよう支援します。
この段落は .typo-article（16px / 行間 32px）で表示しています。本文 .typo-medium（16px / 行間 24px）より行間が広く、長文でも視線が迷いにくいことを確認できます。
機能
このコンポーネントの用途
Figma の命名サイズに 1:1 対応する意味づけテキストスタイル層（.typo-*）。
ベースは typo-medium (16px)。本文も各コンポーネント内のテキストも
medium を基準サイズとして使い、補助/見出しはそこからの相対で選ぶ。
見出し／Display (large 以上) はクラス自体がレスポンシブで、モバイルで自動的に
1 段小さくなり md (768px) 以上で規定サイズに戻る（本文は縮めない）。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓基準は typo-medium (16px)。本文・各コンポーネントのテキストは medium をベースに。
- ✓補助/キャプションは small/xsmall、見出しは large 以上を 16px ベースから相対で選ぶ。
- ✓medium 以下のサイズは weight を font-bold 等で上書きできる。
- ✓見出しのレスポンシブは .typo-xlarge/2xlarge/3xlarge が自前で持つ。md:text-* で手動調整しない。
NG
- ✕typo-large 以上で weight を bold 未満に下げない (font-semibold / font-medium 等) → デフォルトの weight のまま使う。
- ✕typo-2xlarge / 3xlarge を font-bold 等で extrabold から下げない → デフォルトの extrabold のまま使う。
- ✕text-sm / font-size を直書きしない → .typo-* を使う。
- ✕本文 (medium 以下・article) をモバイルで縮める指定を足さない → 16px 基準を守る。