Typography
Font selection rationale, DM Serif Display as display typeface, type scale, four-weight strategy, and letter-spacing principles.
Typography accounts for roughly 95% of web design -- nearly everything a user interacts with in a SaaS product is text. Dashboard metrics, navigation labels, form inputs, button text, error messages, data tables, settings panels. The font choice is the second most visible design decision after color. For the CSS implementation and font loading details, see Theming.
Font Stack
| Role | Font | Weights | Purpose |
|---|---|---|---|
| Display | DM Serif Display | 400 only | Headings (h1-h3), card titles, marketing hero text |
| Body | DM Sans | 400-700 | Body text, UI labels, navigation, form inputs |
| Mono | JetBrains Mono | 400-700 | Code blocks, API keys, data tables with aligned numbers |
Why DM Serif Display for Headings
The most significant typographic decision is using a serif typeface for headings instead of relying on a single sans-serif throughout. This decision was driven by three factors:
Brand Personality
The Creator + Magician archetype calls for warmth, craft, and a sense of intentionality. Sans-serif-only products (Inter everywhere, Geist everywhere) feel efficient but emotionally neutral. A serif display font at heading sizes introduces warmth and character without sacrificing the clarity that a sans-serif body provides.
DM Serif Display specifically has rounded terminals and moderate contrast between thick and thin strokes -- it feels approachable rather than formal. It is neither the newspaper-authority of a high-contrast serif like Playfair Display nor the utilitarian evenness of a geometric sans. It sits in the space the archetype occupies: warm, considered, with a hint of craft.
Anti-Generic Differentiation
One of the strongest tells of AI-generated interfaces is "single sans-serif at predictable sizes" (see Anti-Patterns). Using DM Serif Display for headings is a structural departure from this pattern. Every page in Trovella signals typographic intent -- the heading/body contrast is visible within the first second of landing on any screen.
Most AI code generation models, when asked to build a SaaS dashboard, will produce Inter or Geist in a single weight with mathematically regular size steps. The serif/sans-serif pairing forces output away from this statistical average.
Practical Constraints
DM Serif Display has only weight 400. This is a constraint that shapes how heading hierarchy works:
- Heading hierarchy uses size and color, not weight. An h1 is larger than an h2, and may use a different color treatment, but both are weight 400.
- Faux bold is never applied. Browsers synthesize bold for fonts that lack a bold weight, and the result renders poorly. The design system explicitly avoids applying
font-boldto DM Serif Display elements. - DM Sans handles all weight-based emphasis. Within body text, labels, and navigation, the four-weight strategy (below) provides hierarchy through weight contrast.
DM Serif Display and DM Sans are designed by the same foundry (Colophon for Google Fonts) and share structural DNA -- x-height, letter proportions, and overall rhythm are compatible. This is why they work as a pair without looking mismatched.
Why DM Sans for Body
DM Sans is a geometric sans-serif with slightly warmer proportions than Inter or Geist. Selection factors:
- Personality -- more character than Inter (which is "the new Helvetica" in its ubiquity), friendlier letterforms, stylistic alternates available
- Variable font support -- single file covers all weights, 30% faster page load than static font files
- Weight range -- 400-700 covers the four-weight strategy below
- x-height -- high enough for excellent legibility at small sizes (14px table cells, 12px timestamps)
- Paired with DM Serif Display -- designed to work together; consistent metrics and rhythm
Inter was explicitly considered and rejected. It is the safest choice, but "safe" produces the statistical average. For a product using AI-assisted code generation, the font choice is one of the most visible differentiation levers available.
Why JetBrains Mono
JetBrains Mono has the highest x-height in its class (0.73), 138 code ligatures, and superior character differentiation for ambiguous pairs (0/O, 1/l/I). For a research product that displays API keys, code snippets, and tabular data, monospace legibility is a functional requirement, not a stylistic preference.
Type Scale: Minor Third (1.2)
The product UI uses a Minor Third ratio (1.2x) with a 16px base. This ratio produces subtle but clear hierarchy for data-dense SaaS dashboards -- each step feels like an intentional jump without wasting vertical space.
| Token | Size | Line height | Letter spacing | Typical use |
|---|---|---|---|---|
| text-xs | 12px | 1.5 | +0.02em | Timestamps, badges, helper text |
| text-sm | 14px | 1.5 | +0.01em | Table cells, form hints, metadata |
| text-base | 16px | 1.5 | 0 | Body text, form inputs, list items |
| text-lg | 20px | 1.4 | -0.01em | Card titles, subsection headings |
| text-xl | 24px | 1.3 | -0.015em | Section headings |
| text-2xl | 28px | 1.25 | -0.02em | Page titles |
| text-3xl | 36px | 1.2 | -0.025em | Hero headings (marketing) |
| text-4xl | 48px | 1.1 | -0.03em | Landing page hero (marketing only) |
Key Principles in the Scale
Line height decreases as size increases. Large text needs less spacing between lines. Tight heading line height (1.1-1.25) creates the visual density and confidence seen in products like Stripe, Linear, and Vercel. Body text at 1.5 provides comfortable reading rhythm.
Letter spacing tightens as size increases. Large text at default tracking looks loose and amateurish. Negative tracking at 24px+ creates a polished, intentional look. Small text below 14px benefits from slightly increased spacing for legibility.
Responsive behavior. Body text (text-xs through text-base) stays the same on mobile. Headings (text-lg through text-4xl) scale down below 768px using CSS clamp() for fluid sizing between breakpoints rather than hard jumps.
Four-Weight Strategy
Exactly four weights are used in product UI. More creates decision fatigue; fewer lacks hierarchy.
| Weight | Value | Role | Examples |
|---|---|---|---|
| Regular | 400 | Content (the default) | Body text, form values, table cells, descriptions |
| Medium | 500 | Subtle emphasis | Form labels, nav items, breadcrumbs, metadata labels |
| Semi Bold | 600 | Structural emphasis | Card titles (DM Sans only), dialog titles, section headings, button text, active nav, table headers |
| Bold | 700 | Maximum emphasis (use sparingly) | Page titles (h1, in DM Sans contexts), key dashboard metrics, alert headings |
Weights to Avoid
- Thin (100), Extra Light (200), Light (300) -- fail accessibility contrast at body sizes, render poorly on Windows ClearType, nearly invisible on low-resolution displays.
- Extra Bold (800), Black (900) -- acceptable for marketing hero headlines only, never in the product app.
Product UI vs. Marketing Typography
Same font families, different application:
| Property | Product UI | Marketing pages |
|---|---|---|
| Scale ratio | 1.2 (Minor Third) | 1.333 (Perfect Fourth) |
| Base font size | 16px | 18-20px |
| Maximum heading | 28px (text-2xl) | 48-64px (text-4xl+) |
| Weight range | 400-700 | 400-900 (Black for heroes) |
| Heading letter spacing | -0.01em | -0.03em |
This gives marketing pages visual punch while maintaining brand continuity with the product.
Technical Decisions
These are settled choices with clear correct answers in 2026:
- Variable fonts -- yes. 2 HTTP requests vs. 8 for static fonts, 30% faster page load, 97%+ browser support.
- Self-hosted WOFF2 -- yes. Google Fonts CDN violates GDPR (German court ruling, January 2022). Browser cache partitioning since 2020 eliminated the CDN caching advantage.
next/fonthandles self-hosting automatically. - System fonts on mobile -- yes (Phase 2). San Francisco on iOS, Roboto on Android. Native rendering, zero bundle size.
Related Pages
- Theming -- font loading, CSS custom properties for font families
- Design Tokens -- token reference including typography tokens
- Brand Identity -- archetype decisions that drove font selection
- Anti-Patterns -- how typography counters AI-generated defaults
Color System
The reasoning behind deep teal, gold accent, and warm neutrals -- psychology, competitive differentiation, and accessibility constraints.
Layout & Navigation
Responsive breakpoint strategy, five-zone sidebar, command palette, workspace switcher, and the structural decisions shaping how users move through Trovella.