# Typeschaal: groottes die verwant lijken, met verhoudingen

[Canonical HTML page](https://gradiently.design/nl/guide/typographic-scale)

Kies lettergroottes op gevoel en ze drijven af: 18, 22, 23, 30, 31. Een typeschaal vervangt die gokken door één basisgrootte en één verhouding, zodat elke grootte bij dezelfde familie lijkt te horen.

## The short version

- Een typeschaal is een korte set lettergroottes gemaakt door een basisgrootte telkens met dezelfde verhouding te vermenigvuldigen.
- Kleine verhoudingen zoals 1,2 passen bij dichte interfaces, terwijl grote verhoudingen zoals 1,5 passen bij posters, sociale posts en landingspagina’s.
- Met een basis van 16 px en een verhouding van 1,25 loopt de schaal 16, 20, 25, 31, 39 en 49 px.
- De meeste ontwerpen hebben maar vijf of zes groottes nodig, en de resultaten afronden op hele pixels is prima.
- In CSS onderhoud je een typeschaal het makkelijkst als aangepaste eigenschappen, vloeiend gemaakt met clamp().

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](https://gradiently.design/nl/guide/visual-hierarchy).

## 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.

| Naam | Verhouding | Gevoel | Goed voor |
| --- | --- | --- | --- |
| Kleine secunde | 1,067 | Nauwelijks verschil | Dichte datatabellen, kleine schermen |
| Grote secunde | 1,125 | Zacht | Apps en dashboards |
| Kleine terts | 1,2 | Rustig en helder | Interfaces, documentatie, lang lezen |
| Grote terts | 1,25 | Evenwichtig | Websites en blogs, een veilige standaard |
| Reine kwart | 1,333 | Zelfverzekerd | Marketingpagina’s, redactioneel |
| Overmatige kwart | 1,414 | Sterk | Landingspagina’s, presentaties |
| Reine kwint | 1,5 | Gedurfd | Posters, sociale posts, grote koppen |
| Gulden snede | 1,618 | Dramatisch | Displaylettertypes met weinig niveaus |

Gangbare verhoudingen van klein naar groot. Twijfel je, begin dan op 1,25 voor het web en 1,5 voor sociale posts.

## 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.

| Stap | 1,2 | 1,25 | 1,333 | 1,5 |
| --- | --- | --- | --- | --- |
| Klein (stap −1) | 13 | 13 | 12 | 11 |
| Tekst (basis) | 16 | 16 | 16 | 16 |
| Stap 1 | 19 | 20 | 21 | 24 |
| Stap 2 | 23 | 25 | 28 | 36 |
| Stap 3 | 28 | 31 | 38 | 54 |
| Stap 4 | 33 | 39 | 51 | 81 |
| Stap 5 | 40 | 49 | 67 | 122 |

Waarden afgerond op hele pixels. De stap onder de basis is de basis gedeeld door de verhouding, gebruikt voor bijschriften en labels.

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. **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. **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. **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. **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. **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. **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](https://gradiently.design/nl/guide/font-size-for-social-media).

Een staande sociale post met een grote statistiek, 3 keer sneller afrekenen, boven kleinere ondersteunende tekst

Een cijferpost heeft drie duidelijke niveaus nodig: het cijfer, de details en het label. Op een schaal van 1,5 zijn dat 135, 60 en 40 px.

Een staande carrouselslide met de titel Voor je post en een korte checklist eronder

Een lijstslide gebruikt de lagere stappen van dezelfde schaal, en past dus prettig naast de cijferslide in één carrousel.

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](https://gradiently.design/nl/guide/text-hierarchy-social) 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)-bereik: een minimum voor telefoons, een maximum voor brede schermen en een vloeiende waarde ertussen.

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

Verander `--ratio` één keer en elke stap werkt zich bij. Houd `rem` in het minimum van elke clamp zodat tekst de eigen lettergrootte-instelling van de lezer blijft respecteren.

### Vermijd

- Tien groottes terwijl er vijf volstaan
- Twee koppen 2 px uit elkaar
- Dezelfde verhouding voor een dashboard en een poster
- Vaste pixelgroottes die de lettertype-instellingen van de lezer negeren

### Doe

- Vijf of zes stappen, elk met een benoemde rol
- Sla een stap over als twee niveaus op elkaar lijken
- Kleine verhouding voor dichte schermen, grote voor weinig woorden
- Groottes op rem-basis, vloeiend met clamp()

Een schaal is één deel van een grotere set beslissingen over lettertypes, spatiëring en rollen. [Typografiesysteem](https://gradiently.design/nl/guide/brand-typography-system) brengt ze samen, en [tracking vs kerning](https://gradiently.design/nl/guide/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.

## FAQ

### Wat is een typeschaal?

Een set lettergroottes gemaakt door een basisgrootte herhaaldelijk met dezelfde verhouding te vermenigvuldigen, zodat elke grootte proportioneel verwant is aan de andere.

### Wat is de beste verhouding voor een typeschaal?

Er is geen enkele beste. 1,2 of 1,25 past bij websites en apps met veel tekst; 1,5 of meer past bij posters en sociale posts met weinig woorden.

### Hoeveel lettergroottes moet een ontwerp gebruiken?

Meestal vijf of zes: een kleine grootte, tekst, twee of drie kopniveaus en één displaygrootte.

### Moet ik waarden van een typeschaal afronden?

Ja. Afronden op hele pixels maakt geen zichtbaar verschil en maakt de schaal makkelijker te gebruiken en te onthouden.

### Hoe maak ik een typeschaal responsive in CSS?

Gebruik `clamp()` voor elke stap, met een minimum in rem, een vloeiende middenwaarde met viewport-eenheden en een maximum voor brede schermen.