Typography
Norio uses Inter from Google Fonts for body and headings. There are no product utility classes such as .ds-1 or .fs-1. Size comes from tokens, applied on semantic or BEM classes in section SCSS.
Families
- Sans: Inter, Inter Display, system-ui
- Mono: ui-monospace, SFMono-Regular, Menlo
The layout loads Inter in src/layouts/base.njk. To change the family, edit font.family in tokens/tokens.json and the font <link> in the layout, then run npm run tokens.
Weights
400 regular · 500 medium · 600 semibold · 700 bold — var(--font-weight-regular) and siblings.
Size scale
| Token | CSS variable | Value | Line height | Notes |
|---|---|---|---|---|
| 2xs | --font-size-2xs | 10px | 1 | |
| xs | --font-size-xs | 12px | 1 | |
| compact | --font-size-compact | 14px | 16px | |
| sm | --font-size-sm | 16px | 1.5 | Body default |
| md | --font-size-md | 20px | 1.4 | |
| lg | --font-size-lg | 24px | 1.3 | |
| xl | --font-size-xl | 40px | 1 | Fluid down to lg |
| 2xl | --font-size-2xl | 48px | 1 | Fluid down to lg |
| 3xl | --font-size-3xl | 72px | 1 | Fluid down to xl |
| 4xl | --font-size-4xl | 84px | 1 | Fluid down to 2xl |
Tracking tokens: --font-tracking-tight (−0.02em), --font-tracking-display (−0.05em), --font-tracking-normal, --font-tracking-wide (0.08em).
Usage
.hero-2__title {
font-family: var(--font-family-sans);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
letter-spacing: var(--font-tracking-display);
line-height: 1;
}