Typography
raft-ui has one global type scale. Text sizes, line heights, weights and letter spacing come from --r-* tokens, so components and your own UI line up with each other. Font families are covered in Fonts. The Typography components (Heading, Text, Paragraph and the rest) set text in this scale for you.
Type scale
Nine steps, each a font size paired with a fixed line height. The scale is tuned for dense interfaces: steps 1 to 4 (10 to 14px) carry most of the text.
| Step | Sample | Size / line height |
|---|---|---|
| 1 | The quick brown fox jumps over the lazy dog | 10 / 14--r-font-size-1 |
| 2 | The quick brown fox jumps over the lazy dog | 11 / 16--r-font-size-2 |
| 3 | The quick brown fox jumps over the lazy dog | 12 / 16--r-font-size-3 |
| 4 | The quick brown fox jumps over the lazy dog | 14 / 20--r-font-size-4 |
| 5 | The quick brown fox jumps over the lazy dog | 16 / 24--r-font-size-5 |
| 6 | The quick brown fox jumps over the lazy dog | 18 / 26--r-font-size-6 |
| 7 | The quick brown fox jumps over the lazy dog | 20 / 28--r-font-size-7 |
| 8 | The quick brown fox jumps over the lazy dog | 24 / 32--r-font-size-8 |
| 9 | The quick brown fox jumps over the lazy dog | 30 / 38--r-font-size-9 |
| Step | --r-font-size-N | --r-line-height-N | Typical use |
|---|---|---|---|
| 1 | 10px | 14px | Micro monospace labels, badges |
| 2 | 11px | 16px | Monospace metadata |
| 3 | 12px | 16px | Secondary info, captions, timestamps |
| 4 | 14px | 20px | Body text and messages (default) |
| 5 | 16px | 24px | Large body, h4 |
| 6 | 18px | 26px | h3, panel titles |
| 7 | 20px | 28px | h2 |
| 8 | 24px | 32px | h1, page titles |
| 9 | 30px | 38px | Display |
Always use a step’s size and line height together:
.my-caption {
font-size: var(--r-font-size-3);
line-height: var(--r-line-height-3);
}Line heights are fixed pixels so rows in dense lists stay aligned. For long-form reading, such as documents, use --r-line-height-prose (1.6) instead.
Weights
| Token | Brutal | Elegant |
|---|---|---|
--r-font-weight-regular | 400 | 400 |
--r-font-weight-medium | 500 | 500 |
--r-font-weight-strong | 700 | 600 |
--r-font-weight-heavy | 800 | 800 |
strong is each theme’s emphasis weight. Space Grotesk, Brutal’s font, stops at 700, so heavy renders as 700 in Brutal unless you load a heavier font under r-sans. See Check the font weights.
Letter spacing
| Token | Value | Typical use |
|---|---|---|
--r-letter-spacing-tight | -0.01em | Large headings |
--r-letter-spacing-normal | 0 | Everything else |
--r-letter-spacing-wide | 0.02em | Small text that needs air |
--r-letter-spacing-widest | 0.08em | Uppercase eyebrows and labels |
Controls
Control sizes keep their own tokens, --r-common-font-size-tiny / -small / -medium / -large. The first three point at steps 3, 4 and 4 (12, 14 and 14px). large stays at 15px, which sits between steps 4 and 5.
Text color
Every theme root (:root and any element with data-r-theme, such as a ConfigProvider that sets theme) sets color to --rw-alias-label-primary. Text inside it never falls back to the browser’s black, which would be unreadable in Elegant dark. Font family and size are not set on the root: they stay inherited from your page.