Typography.
A system with something to say.
Semantic roles give every word a purpose. Inter Variable keeps reading comfortable; Space Grotesk Variable gives display text its character.
A clear voice.
At every scale.
INTER / INTERFACEExpressive when it matters. Comfortable everywhere.
These docs use the same type contracts as the components: 16px body text, 14px compact text, and 12px supporting captions at a default 16px root.
Our recommendation
Use a semantic system with 18 roles across display, heading, title, body, label, caption and code. Inter Variable is the default interface face. Space Grotesk Variable brings character to short display statements. JetBrains Mono is a static code face; code does not need a variation axis to stay part of the same system.
Sizes and line heights use rem; tracking uses em. The root font size stays under the reader’s control. Display tokens are fixed contracts: layouts explicitly choose a smaller role at narrow widths. Density changes spacing, never text size.
| Reference | Useful principle | Our decision |
|---|---|---|
| Primer ↗ | Practical UI roles and paired size/leading. | Keep body, title, caption and code distinct. |
| Radix Themes ↗ | A compact numeric scale; semantic HTML stays independent. | Keep as separate from visual variant; use paired styles. |
| Apple HIG ↗ | Legibility, text styles and layouts that adapt to larger text. | Avoid light small text; test resizing. Native point values are platform specific. |
| Material 3 ↗ | Display, headline, title, body and label roles, with size variants. | Adopt role families, using heading as our web-oriented name for headline. |
| Atlassian ↗ | Meaning-based tokens that bundle coordinated font properties. | Use foundation.role.size names and rem values. |
Names describe purpose
Three layers keep raw values out of components. A primitive supplies a value; a semantic style pairs the values; a component chooses the appropriate style. This follows Atlassian’s meaning-based naming guidance, adapted to Dixy.
1rem400 · 16 / 24body.md.article-copy {
font: var(--dixy-font-body-md);
letter-spacing: var(--dixy-font-body-md-letter-spacing);
}
/* Individual properties remain available for composition. */
.article-copy strong {
font-weight: var(--dixy-font-weight-semibold);
}The CSS font shorthand includes family, size, leading and weight. Letter spacing is a separate token because CSS does not include it in font. Use complete styles by default; split properties only for a deliberate variation.
The type scale
Every specimen below reads its values from the published token package. Pixel references describe the default root, while the rendered values remain relative.
Clarity has character.
Short hero statements on generous layouts.
Clarity has character.
Page introductions and smaller hero statements.
Clarity has character.
Compact display statements; use for narrow layouts.
Clarity has character.
Major sections in a document.
Clarity has character.
Sections and prominent content headings.
Clarity has character.
Subsections and dialog headings.
Clarity has character.
Card headings and grouped content.
Clarity has character.
Compact content headings.
Clarity has character.
Small headings within a component.
Clarity has character.
Introductory and spacious reading text.
Clarity has character.
Default reading text and inputs.
Clarity has character.
Secondary text and compact navigation.
Clarity has character.
Large control labels.
Clarity has character.
Default labels, buttons and tabs.
Clarity has character.
Short supporting labels; never primary reading text.
Clarity has character.
Metadata and supporting captions.
const clarity = "considered";
Multiline code samples.
const clarity = "considered";
Compact token names and inline metadata.
Explore variable fonts
Inter supports weight 100–900 and optical size 14–32 in the bundled file. Space Grotesk supports weight 300–700. Optical sizing adapts Inter’s outlines to the rendered size; it does not change the selected token’s font size.
Good interfaces have a clear voice.
.specimen {
font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
font-size: var(--dixy-font-heading-lg-size);
line-height: var(--dixy-font-heading-lg-line-height);
font-weight: 550;
font-optical-sizing: auto;
}Use font-weight and font-optical-sizing before low-level font-variation-settings. Do not expose width, grade or slant controls for files that do not have those axes. The docs self-host normal and italic Inter faces with font-display: swap; the library itself downloads no fonts. Our current subsets cover Latin text, with system fallback for other scripts.
Meaning and visual hierarchy
Choose the heading level from the document outline, then choose its visual role. Title styles can still be semantic headings. A caption style does not make content a caption element, and a code style does not turn a paragraph into code.
<Heading as="h2" variant="title.lg">Project details</Heading>
<Text variant="body.md">A comfortable reading default.</Text>
<Text as="span" variant="caption">Updated just now</Text>Reading and accessibility
Keep long text around 60–70 characters per line. Use 400 or heavier for small text and reserve 12px styles for supporting content. Inputs stay at 16px across densities. Allow wrapping and avoid fixed text container heights. Test 200% zoom, text spacing overrides and narrow reflow; native Dynamic Type values are not a direct web pixel scale.