タイポグラフィ
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
extralight
200
light
300
normal
400
medium
500
semibold
600
bold
700
extrabold
800
black
900
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
事業承継をオープンに
Noto Sans JP
font — style
normal
italic
タイポグラフィー
Math.ceil((size × 1.3) / 8) × 8
8 の倍数の行間で 8×8 ベースグリッドに揃える。weight は body サイズが medium、display サイズが bold（font-bold / font-medium で上書き可）。
.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
bold
日本語 にほんご 0123 1行目
日本語 にほんご 0123 2行目
.typo-3xlarge
bold
日本語 にほんご 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 を基準サイズとして使い、補助/見出しはそこからの相対で選ぶ。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓基準は typo-medium (16px)。本文・各コンポーネントのテキストは medium をベースに。
- ✓補助/キャプションは small/xsmall、見出しは large 以上を 16px ベースから相対で選ぶ。
- ✓medium 以下のサイズは weight を font-bold 等で上書きできる。
NG
- ✕typo-large 以上で weight を bold 未満に下げない (font-semibold / font-medium 等) → デフォルトの bold のまま使う。
- ✕text-sm / font-size を直書きしない → .typo-* を使う。