Type scale
Nine --wr-text-* steps, named like a t-shirt scale and rooted at --wr-text-base (1rem = 16px). Reference the token, never a raw px — sizes then stay consistent and respond to a root font-size change in one place.
Using the tokens
Pull sizes and faces straight from the custom properties. Pair --wr-text-* with a --wr-leading-* line-height and a --wr-font-weight-* weight for a complete type ramp.
.card-caption {
font-family: var(--wr-font-family-base);
font-size: var(--wr-text-sm); /* 14px */
font-weight: var(--wr-font-weight-medium);
line-height: var(--wr-leading-normal);
letter-spacing: var(--wr-tracking-normal);
}
.code-inline {
font-family: var(--wr-font-family-mono);
font-size: var(--wr-text-xs); /* 12px */
}Font families
The library ships only system-font fallback chains. Override these on :root to ship your own typeface — every component re-reads them, so one change reskins the whole catalog.
--wr-font-family-baseThe quick brown fox jumps over the lazy dog — 0123456789
--wr-font-family-monoconst x = 42; // the quick brown fox — 0123456789
| Name | Description | Type | Default |
|---|---|---|---|
--wr-font-family-base | Default UI typeface. Apps shipping a custom face override this on :root after loading the theme. | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif | — |
--wr-font-family-mono | Monospace face for code, numerics, and tabular data. | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | — |
/* Ship your own typeface — override the family tokens on :root
after loading the theme; every component re-reads them. */
:root {
--wr-font-family-base: 'Inter', system-ui, sans-serif;
--wr-font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
}Font weights
A --wr-font-weight-* ramp from thin (200) to extrabold (800). Body copy sits at regular (400); labels and headings step up from there.
| Name | Description | Type | Default |
|---|---|---|---|
--wr-font-weight-thin | Thin. | 200 | — |
--wr-font-weight-light | Light. | 300 | — |
--wr-font-weight-regular | Regular — body default. | 400 | — |
--wr-font-weight-medium | Medium — labels, emphasis. | 500 | — |
--wr-font-weight-semibold | Semibold — subheadings. | 600 | — |
--wr-font-weight-bold | Bold — headings. | 700 | — |
--wr-font-weight-extrabold | Extrabold — display. | 800 | — |
Line height
Unitless --wr-leading-* multipliers — they scale with the element's own font-size. normal (1.5) is the body default.
| Name | Description | Type | Default |
|---|---|---|---|
--wr-leading-none | No leading — tight display headings. | 1 | — |
--wr-leading-tight | Tight. | 1.25 | — |
--wr-leading-snug | Snug. | 1.375 | — |
--wr-leading-normal | Normal — body default. | 1.5 | — |
--wr-leading-relaxed | Relaxed. | 1.625 | — |
--wr-leading-loose | Loose. | 2 | — |
Letter spacing
--wr-tracking-* offsets in em, so tracking tracks the font-size. Tighten large display text, widen uppercase eyebrows and badges.
| Name | Description | Type | Default |
|---|---|---|---|
--wr-tracking-tighter | Tighter — large display text. | -0.05em | — |
--wr-tracking-tight | Tight — headings. | -0.025em | — |
--wr-tracking-normal | Normal — body default. | 0 | — |
--wr-tracking-wide | Wide. | 0.025em | — |
--wr-tracking-wider | Wider. | 0.05em | — |
--wr-tracking-widest | Widest — uppercase eyebrows, badges. | 0.1em | — |