Typografisk skala: skriftstørrelser, der hænger sammen

En typografisk skala er et sæt skriftstørrelser bygget af én grundstørrelse og ét forhold. Du starter med din brødtekststørrelse, fx 16 px, og ganger med forholdet for at få den næste størrelse op og ganger igen for den næste. Med et forhold på 1,25 får du 16, 20, 25, 31, 39 og 49 px. Fordi hvert trin vokser med samme proportion, ser størrelserne beslægtede ud, og valget af en overskriftsstørrelse holder op med at være et gæt.

Hvorfor en typografisk skala får størrelser til at hænge sammen

Øjet læser størrelse som proportion, ikke som pixels. Springet fra 16 til 20 føles som springet fra 39 til 49, fordi begge er en fjerdedel større. Størrelser valgt efter fornemmelse klumper sig ofte sammen nogle steder og efterlader huller andre steder, så to overskrifter ender med næsten samme størrelse og ligner en fejl. En skala giver hvert niveau et tydeligt, ensartet trin, hvilket er rygraden i visuelt hierarki.

Almindelige forhold i typografiske skalaer sammenlignet

Mange populære forhold låner deres navne fra musikalske intervaller, og en skala bygget på den måde kaldes ofte en modulær skala. Navnet betyder mindre end trinnets størrelse: jo større forholdet er, desto mere drama mellem niveauerne, og desto færre niveauer kan der være på en side.

Værdier i en typografisk skala i pixels

Her er samme grundstørrelse på 16 px kørt igennem fire forhold. Læg mærke til, hvor hurtigt de store forhold stiger: ved trin 4 er en 1,5 skala allerede på 81 px, mens en 1,2 skala er på 33 px.

Det er fint at runde. Ingen kan se forskel på 31,25 og 31 px, og hele tal er lettere at huske og at lægge på et gitter.

Sådan bygger du din egen typografiske skala

1. 1

   Vælg grundstørrelsen

   Det er din brødtekst. 16 til 18 px passer til de fleste websites; på et socialt lærred på 1080 px skal du starte ved 40 px.

2. 2

   Vælg et forhold ud fra indholdet

   Meget tekst og mange overskriftsniveauer kalder på et lille forhold. Få ord og én stor overskrift kalder på et stort.

3. 3

   Lav fem eller seks trin

   Gang op til overskrifter, og divider én gang til lille tekst. De fleste design bruger aldrig mere end seks størrelser.

4. 4

   Rund af og navngiv dem

   Rund til hele pixels, og navngiv trinnene efter rolle, fx billedtekst, brødtekst, titel og display, ikke efter nummer.

5. 5

   Sæt linjehøjde per trin

   Større størrelser kræver tættere skydning. Brødtekst omkring 1,5, titler omkring 1,2, displayskrift tæt på 1,0.

6. 6

   Test med rigtige ord

   Sæt en rigtig overskrift, underoverskrift og et afsnit. Ligner to trin hinanden for meget, så spring et over, eller hæv forholdet.

En typografisk skala til sociale opslag

Sociale opslag kræver et større forhold end websider, fordi et lærred på 1080 px skrumper til en tredjedel af sin bredde på en telefon, og der kun er to eller tre tekstniveauer. En grundstørrelse på 40 px med et forhold på 1,5 giver 40, 60, 90 og 135 px, hvilket passer pænt med størrelserne i skriftstørrelse til Instagram-opslag.

At bruge én skala på alle slides i en karrusel er det, der får et sæt til at se designet ud frem for samlet. De samme størrelser i de samme roller, slide efter slide. Tekstlayout til sociale opslag viser, hvordan du sætter dem op.

Sådan skriver du en typografisk skala i CSS

Gem skalaen som custom properties, så hver komponent henter fra den. Du kan kæde multiplikationer med calc() eller skrive de afrundede værdier ud. Til en skala, der vokser med skærmen, så giv hvert trin et clamp()-interval: et minimum til telefoner, et maksimum til brede skærme og en flydende værdi imellem.

/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }

En skala er én del af et større sæt beslutninger om skrifttyper, afstande og roller. Typografisystem samler dem, og spatiering og knibning dækker de afstandsværdier, der hører til hvert trin. Designer du indhold til sociale medier, rummer brandkittet i Gradiently dine overskrifts- og brødskrifter, og Designer anvender dem på hver ny størrelse, så en skala, du har lagt dig fast på én gang, er nem at holde.