ANVIL · Typography
Preview
Type scale preview · Display and Heading 2 use uppercase
DisplayANVIL Heading H1
Heading 2ANVIL Heading H2
Heading 3ANVIL Heading H3
Heading 4ANVIL Heading H4
BodyBody text for standard readable content.
SmallSmall text for secondary information.
CaptionCaption and helper text.
Primitive Values
Primitive token names and raw values
| Primitive token | Value | Meaning |
|---|---|---|
| Font Families | ||
| --p-ff-condensed | "Barlow Condensed", system-ui, sans-serif | Display family |
| --p-ff-sans | "Barlow", system-ui, sans-serif | Body family |
| --p-ff-mono | "DM Mono", ui-monospace, monospace | Mono family |
| Font Sizes | ||
| --p-fs-12 | 0.75rem / 12px | Caption |
| --p-fs-14 | 0.875rem / 14px | Small |
| --p-fs-16 | 1rem / 16px | Body |
| --p-fs-18 | 1.125rem / 18px | Lead |
| --p-fs-20 | 1.25rem / 20px | H4 |
| --p-fs-24 | 1.5rem / 24px | H3 |
| --p-fs-32 | 2rem / 32px | H2 |
| --p-fs-40 | 2.5rem / 40px | H1 |
| Line Height | ||
| --p-lh-tight | 1.2 | Tight |
| --p-lh-snug | 1.375 | Snug |
| --p-lh-normal | 1.5 | Normal / body |
| --p-lh-relaxed | 1.625 | Relaxed |
Semantic Mapping
Semantic typography tokens
| Semantic token | Mapped value | Resolved value |
|---|---|---|
| Families | ||
| --ff-display | --p-ff-condensed | "Barlow Condensed", system-ui, sans-serif |
| --ff-body | --p-ff-sans | "Barlow", system-ui, sans-serif |
| --ff-mono | --p-ff-mono | "DM Mono", ui-monospace, monospace |
| Type Scale | ||
| --fs-caption | --p-fs-12 | 0.75rem / 12px |
| --fs-small | --p-fs-14 | 0.875rem / 14px |
| --fs-body | --p-fs-16 | 1rem / 16px |
| --fs-lead | --p-fs-18 | 1.125rem / 18px |
| --fs-h4 | --p-fs-20 | 1.25rem / 20px |
| --fs-h3 | --p-fs-24 | 1.5rem / 24px |
| --fs-h2 | --p-fs-32 | 2rem / 32px |
| --fs-h1 | --p-fs-40 | 2.5rem / 40px |
| Line Height | ||
| --lh-tight | --p-lh-tight | 1.2 |
| --lh-snug | --p-lh-snug | 1.375 |
| --lh-body | --p-lh-normal | 1.5 |
| --lh-relaxed | --p-lh-relaxed | 1.625 |