Foundation
Typography
Nerio Core defaults to platform System UI so products stay native, neutral, and usable without a font request. The typography contract also defines how text survives resize, localization, narrow containers, and data-heavy interfaces.
Font contract
| Role | Default token | Use |
|---|---|---|
| Sans | --n-font-sans → --n-font-sans-system | Product UI and body copy |
| Mono | --n-font-mono → --n-font-mono-system | Code and technical identifiers |
Native consistency means a product uses each platform's familiar UI family; it does not mean pixels are identical across operating systems. Font family changes remain CSS token overrides, not a fourth runtime axis beside theme, mode, and density.
A consumer-provided family must cover the scripts and symbols required by the product. Keep the system stack as a fallback, then test real target locales rather than assuming a Latin-focused family has complete language coverage.
Typography presets
| Preset | Sans token | Mono token | Font loading |
|---|---|---|---|
| System | --n-font-sans-system | --n-font-mono-system | None |
| Geist | --n-font-sans-geist | --n-font-mono-geist | Consumer-owned |
| Inter | --n-font-sans-inter | --n-font-mono-system | Consumer-owned |
| IBM Plex | --n-font-sans-ibm-plex | --n-font-mono-ibm-plex | Consumer-owned |
| Manrope | --n-font-sans-manrope | --n-font-mono-system | Consumer-owned |
| Source Sans 3 | --n-font-sans-source-sans | --n-font-mono-system | Consumer-owned |
| Space Grotesk | --n-font-sans-space-grotesk | --n-font-mono-system | Consumer-owned |
| Custom | Override --n-font-sans at root or on a product surface. | Consumer-owned | |
The n-typography-* classes are scoped token recipes. They can style an app root, preview, or product area, but Nerio intentionally has no data-font axis. Presets change family selection while preserving the shared scale, line heights, control geometry, and semantic roles.
Font loading
System
@import "@nerio-ui/tokens/styles.css";Optional font families
Load non-system families in the consuming product. Nerio does not bundle font files or download fonts from a remote provider. A Next.js app may use next/font locally; the same consumer-ownership rule applies.
@font-face { font-family: "Geist"; src: url("/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;}/* The font file is supplied by your product. */<div className="n-typography-geist"> <App /></div>Load Inter, IBM Plex, Manrope, Source Sans 3, or Space Grotesk the same way, then apply the matching n-typography-* recipe. IBM Plex may also load IBM Plex Mono; every other preset intentionally keeps the system mono stack.
Type scale
Scale tokens are raw typographic values. Components should consume established semantic roles when one exists. Product composition may use a scale step directly for headings or metrics, but repeated cross-component meaning should become a reviewed semantic alias.
| Size | Token | Default | Use |
|---|---|---|---|
| 2xs | --n-font-size-2xs | 11px | Internal component-scale input; not for product UI text |
| xs | --n-font-size-xs | 12px | Metadata, badges, and dense captions |
| sm | --n-font-size-sm | 13px | Labels, helper text, and table cells |
| md | --n-font-size-md | 14px | Default UI body and controls |
| lg | --n-font-size-lg | 16px | Lead copy and compact section intros |
| xl | --n-font-size-xl | 18px | Small headings |
| 2xl | --n-font-size-2xl | 20px | Metric values and page sections |
| 3xl | --n-font-size-3xl | 22.5px | Subsection headings |
| 4xl | --n-font-size-4xl | 25.25px | Section headings |
| 5xl | --n-font-size-5xl | 28.5px | Page headings |
--n-font-size-2xs is listed for source completeness because existing component recipes may resolve through it. Do not consume it directly for product UI text; the public UI-text floor remains 12px. Text must remain available through browser zoom and user-controlled text resizing at every supported step.
Semantic roles
| Role | Alias | Default |
|---|---|---|
| Body size | --n-body-font-size | --n-font-size-md |
| Body line height | --n-body-line-height | --n-line-height-normal |
| Control size | --n-control-font-size | --n-font-size-md |
| Control weight | --n-control-font-weight | --n-font-weight-regular |
| Label size | --n-label-font-size | --n-font-size-md |
| Label weight | --n-label-font-weight | --n-font-weight-regular |
| Helper size | --n-helper-font-size | --n-font-size-xs |
| Helper line height | --n-helper-line-height | --n-line-height-normal |
Line height
| Role | Token | Default | Use |
|---|---|---|---|
| Tight | --n-line-height-tight | 1.2 | Large headings and short display text |
| Normal | --n-line-height-normal | 1.4 | Default product UI and controls |
| Relaxed | --n-line-height-relaxed | 1.55 | Longer descriptions and reading surfaces |
Use tight leading only for short display text. Labels, controls, helper text, and wrapped body copy need enough vertical room for diacritics, mixed scripts, and user spacing overrides. Avoid fixed block heights around content that may wrap.
Custom typography
:root { --n-font-sans: "IBM Plex Sans", var(--n-font-sans-system);}.my-product-surface { --n-font-sans: "IBM Plex Sans", var(--n-font-sans-system);}- Keep the existing type scale, line-height tokens, and control heights across presets.
- Components consume semantic font tokens, never hard-coded Geist, Inter, or system stacks.
- Use relative sizing and allow text containers to grow in the block direction.
- Wrap by default. Truncate only when the content hierarchy permits it and provide an accessible way to reach the complete value.
- Keep long-form prose within a readable measure instead of stretching it across the full width of a dashboard or settings surface.
- Do not scale type with viewport width inside compact product surfaces.
Numeric and data typography
Use tabular numerals for columns and metrics that users compare vertically. A mono family is appropriate for code, hashes, addresses, and identifiers; ordinary financial values do not require mono when the selected sans family supports tabular figures. Align numeric cells to the logical end and format values to consistent decimal places when decimal separators need to line up.
.numeric-column { text-align: end; font-variant-numeric: tabular-nums;}Resilience validation
| Check | Expected result |
|---|---|
| Text resize | Resize text to 200% without clipping, overlap, hidden controls, or loss of information. |
| Narrow reflow | Verify equivalent 320 CSS pixel content width; only content requiring two-dimensional layout for usage or meaning may require two-axis scrolling. |
| Text spacing | Override line height, paragraph, letter, and word spacing to WCAG 2.2 values without truncation or overlap. |
| Localization | Test long translated strings, target scripts, plural forms, and bidirectional content before approving fixed geometry. |
| Truncation | Confirm essential content remains available through wrapping, expansion, or an accessible full-value disclosure. |
| Numeric data | Check decimal alignment, signs, currencies, percentages, and tabular numerals in dense data surfaces. |
Automated snapshots can reveal regressions, but approval still requires browser-level review with real content. Typography is complete only when information and operation remain available after resize, reflow, spacing overrides, and localization.
The Accessibility foundation defines the shared zoom, reflow, text-spacing, assistive-technology, and manual evidence boundary. The Spacing & layout foundation covers content-driven growth, wrapping, narrow containers, and long localization in product composition.