Typography
Text styles as single font shorthands, with their tracking.
Each text style is one font shorthand token, plus a letter-spacing token where the style has one:
.price {
font: var(--nz-font-numeric-l);
letter-spacing: var(--nz-tracking-numeric-l);
font-variant-numeric: tabular-nums;
}The parts are tokens too (--nz-font-body-m-font-size, -font-weight, -line-height,
-font-family). Prefer the shorthand.
Text styles
| Style | Sample | Size / line | Weight | Tracking |
|---|---|---|---|---|
--nz-font-body-l | Stoneware mug | 1rem16px / 1.6 | 400 | 0em |
--nz-font-body-m | Stoneware mug | 0.875rem14px / 1.5 | 400 | 0em |
--nz-font-body-m-strong | Stoneware mug | 0.875rem14px / 1.5 | 500 | 0em |
--nz-font-body-s | Stoneware mug | 0.75rem12px / 1.5 | 400 | 0em |
--nz-font-display-l | Stoneware mug | 3.5rem56px / 1.04 | 600 | -0.03em |
--nz-font-display-m | Stoneware mug | 2.75rem44px / 1.08 | 600 | -0.025em |
--nz-font-heading-h1 | Stoneware mug | 2rem32px / 1.2 | 600 | -0.02em |
--nz-font-heading-h2 | Stoneware mug | 1.5rem24px / 1.3 | 600 | -0.015em |
--nz-font-heading-h3 | Stoneware mug | 1.25rem20px / 1.4 | 600 | -0.01em |
--nz-font-heading-h4 | Stoneware mug | 1rem16px / 1.5 | 600 | -0.005em |
--nz-font-label-l | Stoneware mug | 1rem16px / 1.4 | 500 | -0.002em |
--nz-font-label-m | Stoneware mug | 0.875rem14px / 1.4 | 500 | 0em |
--nz-font-label-m-strong | Stoneware mug | 0.875rem14px / 1.4 | 600 | 0em |
--nz-font-label-s | Stoneware mug | 0.75rem12px / 1.4 | 500 | 0em |
--nz-font-mono-m | Stoneware mug | 0.875rem14px / 1.4 | 400 | 0em |
--nz-font-mono-m-strong | Stoneware mug | 0.875rem14px / 1.4 | 500 | 0em |
--nz-font-numeric-display | 1,284.50 | 2.5rem40px / 1 | 600 | -0.03em |
--nz-font-numeric-kpi | 1,284.50 | 2rem32px / 1 | 600 | -0.025em |
--nz-font-numeric-l | 1,284.50 | 1.5rem24px / 1.1 | 600 | -0.015em |
--nz-font-numeric-m | 1,284.50 | 1rem16px / 1.2 | 500 | -0.005em |
Font families
The library ships no font files. The family tokens read --font-geist-sans and --font-geist-mono
when an app sets them (this site does, through next/font), and fall back to the system stack.
--nz-font-family-mono:var(--font-geist-mono, "Geist Mono"), ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace--nz-font-family-sans:var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, sans-serif