Typography

Source: ant.design/docs/spec/font

Ant Design's typographic system is designed for information-dense enterprise interfaces. The priority is legibility at common reading distances, not expressive scale or brand personality.

Font family

System-native font stack — no custom typeface loading:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

Why this stack:

Noto Sans is explicitly included for comprehensive CJK (Chinese, Japanese, Korean) glyph coverage — this is distinctive versus Western-first systems
No custom typeface means no font loading latency, which matters in enterprise intranet environments
System fonts are optimized by each OS for their native rendering environment

Tabular numerics: Apply font-variant-numeric: tabular-nums to any numeric display where vertical alignment matters (data tables, financial figures, metrics).

Base font size

14px — increased from an earlier 12px default to optimize readability at standard enterprise monitor distances (approximately 50cm) and typical viewing angles.

Font size scale

10-step scale inspired by pentatonic scales and natural logarithmic progression. The Ant Design documentation doesn't publish the full table of exact step values (they are generated from the token system), but establishes:

Base: 14px / 22px line height (1.57 ratio)
Heading tokens: fontSizeHeading1 through fontSizeHeading5
Extended: fontSizeLG, fontSizeSM

Guidance on scale use: "Limit font scale choices to 3 to 5 types within a single system, except for display contexts." — Ant Design typography spec. This reflects the enterprise context where visual noise from too many type sizes impedes information scanning.

Font weights

Weight	Value	Usage
Regular	400	Primary text, body, labels
Medium	500	Emphasis, secondary hierarchy
Semibold	600	Bold English text only — not Chinese

Why semibold is English-only: CJK characters are structurally complex at small sizes. Increasing weight reduces legibility for Chinese characters at body text sizes. Ant Design explicitly scopes 600 weight to Latin/English contexts.

Text color tokens

Text color is specified as alpha values to adapt correctly to light and dark surfaces:

Role	Light mode	Dark mode	Token
Primary text (headings, body)	`#000000E0`	`#FFFFFFD9`	`colorText`
Secondary text	`#000000A6`	`#FFFFFFA6`	`colorTextSecondary`
Tertiary / placeholder	—	—	`colorTextTertiary`
Disabled	`#00000040`	`#FFFFFF40`	`colorTextDisabled`

These values meet WCAG AAA (7:1 ratio) for heading and body text. Using alpha rather than fixed hex ensures correct appearance on non-white backgrounds.

Design token access

import { theme } from 'antd';

const { token } = theme.useToken();

// Font sizes
token.fontSize          // 14 — base
token.fontSizeLG        // 16
token.fontSizeSM        // 12
token.fontSizeHeading1  // ~38
token.fontSizeHeading2  // ~30
token.fontSizeHeading3  // ~24
token.fontSizeHeading4  // ~20
token.fontSizeHeading5  // ~16

// Line heights
token.lineHeight        // 1.5714... (22/14)

Design principles

Three governing rules for Ant Design typography implementation:

Systematic thinking: Establish and maintain a clear hierarchy for all text roles (heading, body, caption, label) rather than making one-off size choices per component.
Minimalism: Resist adding new type styles. Proliferating font sizes and weights creates visual noise without adding information.
Subtle rhythm: "Create subtle rhythm through thoughtful scale selection" — use scale steps that produce visually harmonious size relationships, not arbitrary px values.