Typography

Typography is the backbone of the Auva brand. We use a carefully selected trio of fonts that balance personality with readability.

Font Families

Font	CSS Variable	Usage
DM Sans	`--font-dm-sans`	Body text, UI labels, navigation
Fraunces	`--font-fraunces`	Headlines, brand name, section titles
Source Serif 4	`--font-source-serif`	Long-form editorial, legal pages

Loading

All fonts are loaded via next/font/google with display: "swap":

text

import { Fraunces, DM_Sans, Source_Serif_4 } from "next/font/google";

const fraunces = Fraunces({
  subsets: ["latin"],
  variable: "--font-fraunces",
  display: "swap",
});

const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-dm-sans",
  display: "swap",
});

const sourceSerif = Source_Serif_4({
  subsets: ["latin"],
  variable: "--font-source-serif",
  display: "swap",
});

Type Scale

Headings (Fraunces)

Element	Size	Weight	Tracking
`h1`	`clamp(1.75rem, 7vw, 3.75rem)`	600 (semibold)	`-0.02em`
`h2`	`clamp(1.75rem, 4vw, 2.5rem)`	600 (semibold)	`-0.02em`
`h3`	`1.5rem`	600 (semibold)	`-0.02em`
`h4`	`1.25rem`	600 (semibold)	`-0.02em`

Body Text (DM Sans)

Element	Size	Weight	Line Height
Body	`1rem` (16px)	400	`1.75`
Small	`0.875rem` (14px)	400	`1.5`
Caption	`0.75rem` (12px)	500	`1.4`
Nav link	`0.875rem` (14px)	500	`1`

Text Styling

Letter Spacing

text

body {
  letter-spacing: -0.015em;   /* Global tightening */
}

.font-display {
  letter-spacing: -0.02em;    /* Tighter for headlines */
}

Antialiasing

text

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Rules

Never use system fonts: always load DM Sans/Fraunces via CSS variables
Headlines must use Fraunces: use the .font-display utility class
Body text must use DM Sans: it's the default font-family on <body>
Legal/editorial content may use Source Serif 4: apply .legal-prose class
No bold body text: use font-medium (500) for emphasis, not font-bold (700)
Use tracking-tight on all headlines: this is non-negotiable for brand consistency

Use the CSS custom property var(--font-display) and var(--font-body) instead of referencing font names directly. This makes it easy to swap fonts across the entire ecosystem.