Fonts
Five font roles, each mapped to a Tailwind class and a CSS stack.
Five font roles. Each role has one job — pick the role from what the text does, not how it looks.
Role → family
The most-consulted answer. Pick by role; let the system pick the family.
| Role | Family | Tailwind class | Built-in alias |
|---|---|---|---|
logo | Helvetica | — | — |
ui | Geist Sans | font-ui | --font-sans |
docs | Literata | font-prose | — |
code | Geist Mono | font-code | --font-mono |
actionable | Monda | font-action | — |
All fonts except the logo (Helvetica) are open-source and auto-loaded by @nuxt/fonts from @theme declarations — no <link> tags or @font-face rules required.
Font Families
Helvetica
Helvetica, Arial, sans-serifThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Geist Sans
'Geist Sans', ui-sans-serif, system-ui, sans-serifThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Literata
'Literata', ui-serif, Georgia, serifThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Geist Mono
'Geist Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospaceThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Monda
'Monda', ui-sans-serif, system-ui, sans-serifThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Type Scale
No type scale found for "web"
When to apply each role
uiis the site default via--font-sans. Body text, navigation, forms, labels — no class needed.docs(font-prose) wraps long-form content. Apply on the container, not on each paragraph.code(font-codeorfont-mono) applies automatically to<code>and<pre>. Use the class for inline contexts (/path/to/file).actionable(font-action) signals interactivity. Apply on buttons, CTAs, and hero links.logo(Helvetica) is wordmark-only. Never substitute — the glyphs are part of the brand identity.
Integration warning
@ontopix/nuxt-layer-ui layer already imports both via ontopix.css. Re-importing them overrides the @theme font settings and every font falls back to a browser default./* ✗ app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
/* ✓ leave imports to the layer; only add app-specific styles */
Related
- Role mapping — decision tree for picking a role from the text's job.
- Scale — size scales for web and print.
- Theme → Elements — which Nuxt UI components consume which font role.
- Channels — per-channel role usage (
hero,body,chrome,code,cta).