Typography

Field Gothic 為核心字體家族，Instrument Serif 為配角，Vivo Sans TC 處理中文。所有字級使用 clamp() 實現響應式。

Font Specimens

品牌字體一覽。每款字體的特徵和風格展示。

Field Gothic No.73 — Heading

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

The quick brown fox jumps over the lazy dog

Field Gothic No.71 — Body

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

The quick brown fox jumps over the lazy dog. FPA is a creative production agency specializing in brand strategy, visual identity, and digital experiences.

Instrument Serif — Caption / Accent

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

The quick brown fox jumps over the lazy dog

Vivo Sans TC VF — Chinese

精準清晰 品味驅動 工具不設限 深度優於效率

FPA 是一間以品牌策略為核心的創意製作公司，專注於視覺識別系統、數位體驗和品牌動態設計。

Type Scale

所有字級層級並列比較。基準：1rem = 16px，使用 clamp() 實現響應式。

Display--text-display48–72px

Design with precision

H1--text-h132–48px

Design with precision

H2--text-h224–36px

Design with precision

H3--text-h320–24px

Design with precision

H4--text-h420px

Design with precision

Body Large--text-body-lg18px

Design with precision

Body--text-body16px

Design with precision

Body Small--text-body-sm14px

Design with precision

Caption--text-caption12px

Design with precision

Font Pairing Rules

中英配對規則。從 Brand Guideline Page 29 萃取。

UseEnglishChinese
Heading 標題Field Gothic No.73Vivo Sans TC 600
Body 內文Field Gothic No.71Vivo Sans TC 300
Caption 標註Instrument Serif Regular/ItalicNoto Serif TC
Brand 品牌特殊FPA Text 或 FPA DisplayVivo Sans TC 600

Restriction: FPA Text and FPA Display cannot coexist on the same page.

Letter Spacing

Field Gothic 字距極緊，小字需加寬。Guideline tracking 值以 1/1000 em 為單位。

TokenValue
--tracking-display0em (≥60pt)
--tracking-h10em (48pt)
--tracking-h20.005em (36pt)
--tracking-h30.01em (24pt)
--tracking-h40.025em (21pt)
--tracking-body0.025em (18pt)
--tracking-body-sm0.05em (14pt)
--tracking-caption0.05em (12pt)

Line Height

TokenValue
--leading-display1.0 — Display titles, extremely tight
--leading-heading1.1 — Headings
--leading-body1.5 — Body text
--leading-relaxed1.7 — Long paragraphs, CJK mixed text

Font Loading

使用 @font-face + WOFF2 格式，font-display: swap。

css
/* @font-face example */
@font-face {
  font-family: 'Field Gothic No.73';
  src: url('/fonts/field-gothic-73.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Usage in CSS */
h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-h1);
  line-height: var(--leading-heading);
}