Typeschaal: groottes die verwant lijken, met verhoudingen

Een typeschaal is een set lettergroottes opgebouwd uit één basisgrootte en één verhouding. Je begint met je tekstgrootte, zeg 16 px, en vermenigvuldigt die met de verhouding voor de volgende grootte, en dan opnieuw voor de volgende. Met een verhouding van 1,25 krijg je 16, 20, 25, 31, 39 en 49 px. Omdat elke stap met dezelfde proportie groeit, lijken de groottes verwant en is een kopgrootte kiezen geen gok meer.

Waarom een typeschaal groottes verwant laat lijken

Het oog leest grootte als proportie, niet als pixels. De sprong van 16 naar 20 voelt hetzelfde als die van 39 naar 49, omdat beide een kwart groter zijn. Groottes op gevoel gekozen klonteren op sommige plekken samen en laten op andere gaten, zodat twee koppen bijna even groot worden en als een fout ogen. Een schaal geeft elk niveau een duidelijke, consistente stap, de ruggengraat van visuele hiërarchie.

Gangbare verhoudingen van typeschalen vergeleken

Veel populaire verhoudingen lenen hun naam van muzikale intervallen, en een schaal die zo is gebouwd heet vaak een modulaire schaal. De naam doet er minder toe dan de grootte van de stap: hoe groter de verhouding, hoe meer drama tussen niveaus en hoe minder niveaus op een pagina passen.

Waarden van een typeschaal in pixels

Hier dezelfde basis van 16 px door vier verhoudingen gehaald. Merk op hoe snel de grote verhoudingen stijgen: bij stap 4 zit een schaal van 1,5 al op 81 px, terwijl een schaal van 1,2 op 33 px zit.

Afronden is prima. Niemand ziet het verschil tussen 31,25 en 31 px, en hele getallen zijn makkelijker te onthouden en op een raster uit te lijnen.

Je eigen typeschaal bouwen

1. 1

   Kies de basisgrootte

   Dit is je lopende tekst. 16 tot 18 px past bij de meeste websites; op een sociaal canvas van 1080 px begin je op 40 px.

2. 2

   Kies een verhouding op basis van de inhoud

   Veel tekst en veel kopniveaus vragen om een kleine verhouding. Weinig woorden en één grote kop vragen om een grote.

3. 3

   Genereer vijf of zes stappen

   Vermenigvuldig omhoog voor koppen en deel één keer voor kleine tekst. De meeste ontwerpen gebruiken nooit meer dan zes groottes.

4. 4

   Rond af en geef ze namen

   Rond af op hele pixels en noem de stappen naar rol, zoals bijschrift, tekst, titel en display, niet naar nummer.

5. 5

   Stel de regelafstand per stap in

   Grotere groottes hebben krappere regelafstand nodig. Tekst rond 1,5, titels rond 1,2, displayletters bij 1,0.

6. 6

   Test met echte woorden

   Zet een echte kop, subkop en alinea. Lijken twee stappen te veel op elkaar, sla er dan een over of verhoog de verhouding.

Een typeschaal voor sociale posts

Sociale posts hebben een grotere verhouding nodig dan webpagina’s, omdat een canvas van 1080 px op een telefoon tot een derde van zijn breedte krimpt en er maar twee of drie tekstniveaus zijn. Een basis van 40 px met een verhouding van 1,5 geeft 40, 60, 90 en 135 px, wat netjes aansluit bij de groottes in lettergrootte voor Instagram-posts.

Eén schaal over elke slide van een carrousel gebruiken maakt dat een set ontworpen oogt in plaats van in elkaar gezet. Dezelfde groottes in dezelfde rollen, slide na slide. Tekstopmaak voor sociale-mediaposts laat zien hoe je ze schikt.

Een typeschaal in CSS schrijven

Bewaar de schaal als aangepaste eigenschappen zodat elk onderdeel eruit put. Je kunt vermenigvuldigingen koppelen met calc(), of de afgeronde waarden uitschrijven. Voor een schaal die met het scherm meegroeit geef je elke stap een clamp()-bereik: een minimum voor telefoons, een maximum voor brede schermen en een vloeiende waarde ertussen.

/* 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); }

Een schaal is één deel van een grotere set beslissingen over lettertypes, spatiëring en rollen. Typografiesysteem brengt ze samen, en tracking vs kerning behandelt de spatiëringswaarden die bij elke stap passen. Ontwerp je sociale content, dan bevat de merkkit van Gradiently je kop- en tekstlettertypes en past de Designer ze toe op elk nieuw formaat, waardoor een schaal die je één keer vastlegt makkelijk te behouden is.