Fluid typografi og spacing i praksis

Hvorfor fluid typografi og spacing er nyttigt

Fluid værdier er ikke kun en måde at gøre overskrifter større på store skærme. De er en måde at få tekst og afstande til at skifte roligt mellem smalle og brede kontekster.

Det er især nyttigt i:

• prose-indhold med store overskrifter
• cards og sektioner, der bruges i flere bredder
• layouts, hvor du vil undgå mange hårde breakpoints

Fra generator til brugbare tokens

Værktøjer som Utopia er god til at foreslå værdier, men gevinsten opstår først, når du omsætter dem til få tokens, der er lette at bruge igen.

:root {
  --step--1: clamp(0.89rem, 0.86rem + 0.16vw, 1rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.56rem, 1.3rem + 1.2vw, 2rem);

  --space-s: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
  --space-m: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --space-l: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

Pointen er ikke mængden af tokens. Pointen er, at du har nok til at skabe hierarki uden at drukne koden i særværdier.

Brug skalaen bevidst

article {
  font-size: var(--step-0);
  padding: var(--space-l) var(--space-m);
}

h1 {
  font-size: var(--step-2);
}

.text-small {
  font-size: var(--step--1);
}

Det er bedre at bruge få tydelige trin konsekvent end at opfinde en ny clamp() hver gang.

Prose og UI bruger samme skala forskelligt

Den samme base-skala kan godt bruges begge steder, men intent er forskellig:

• prose: fokus på læsbarhed, rytme og hierarki i længere tekst
• UI: fokus på robusthed, tættere spacing og tydelig headline/body/meta-struktur

Det betyder ofte:

• lidt mere luft i prose
• lidt strammere hierarki i små komponenter
• færre niveauer i UI end i artikelindhold

Fluid spacing skal også være roligt

Hvis typografien er flydende, men spacing stadig hopper i store trin, kan layoutet stadig føles uforudsigeligt.

Derfor bør --space-* (Utopia) og --step-* tænkes som ét system.

Et godt tegn er, at layoutet føles roligt mellem bredder, uden at du hele tiden skal redde det med nye breakpoints.

Demo: Fluid typografi og spacing i samme komponent

Denne øvelse er god, fordi du ser typografi og spacing arbejde sammen i én konkret komponent.

Praktiske råd

1. Trim skalaen ned til de få trin, du faktisk bruger.
2. Brug samme tokens i både komponenter og prose, men ikke nødvendigvis på samme måde.
3. Hvis du får mange nye clamp()-værdier, er systemet for løst.
4. Brug line-height og spacing som en del af skalaen, ikke som en eftertanke.