Hoe stel je letterafstand in op een website?
Op één plek: in je globale typografie. In Elementor is dat je Kit, in een thema zonder builder is dat je stylesheet.
Doe je het per widget of per element, dan heb je binnen een jaar twintig verschillende waardes op je site staan en weet niemand meer welke leidend is.
En werk in verhoudingen, niet in vaste pixels. Dan schaalt de afstand mee met je tekstgrootte in plaats van dat je hem overal opnieuw moet natrekken. Gaat het je juist om één specifiek letterpaar in plaats van de hele tekst, dan zoek je kerning.
In Elementor: één plek, niet twintig
Ga naar je Site Settings, dan naar je globale typografie, en zet de letterafstand daar per teksttype. Je bodytekst laat je op normaal staan, en je koppen krijgen eventueel een kleine correctie.
Alles wat je daarna in een losse widget aanpast, overschrijft je Kit. Dat is precies wat je niet wilt. Meer daarover lees je bij elementor.
Per schermformaat instellen
Elementor laat je per apparaat een andere waarde zetten, en die knop is hier zinvol. Een negatieve letterafstand die op een breed scherm mooi oogt, wordt op een telefoon al snel te krap.
Loop je koppen dus één keer na op mobiel formaat. Meer over dat denken lees je bij responsive design.
In CSS: werk met em, niet met pixels
De eigenschap heet letter-spacing. Geef je hem een waarde in em, dan is die waarde een fractie van de tekstgrootte en schaalt hij automatisch mee.
Geef je hem een waarde in pixels, dan staat diezelfde afstand straks tussen letters van veertig pixels en tussen letters van veertien. Op één van die twee formaten klopt het niet. Meer daarover lees je bij css.
Mijn vuistregels
- Bodytekst: normaal, en er verder vanaf blijven.
- Grote koppen: ongeveer min nul komma nul één em, meer niet.
- Hoofdletters en labels: ongeveer nul komma nul vijf em erbij, anders plakken ze.
- Alles globaal instellen, nooit per widget.
Met die vier waardes ben je klaar voor een hele site. Wie er meer nodig heeft, lost meestal een ander probleem op met het verkeerde gereedschap.
Wat je beter niet doet
Letterafstand gebruiken om tekst passend te maken. Rek je een kop op zodat hij precies één regel vult, dan zie je dat, en bij een andere schermbreedte klopt het alsnog niet.
Ook niet: de bodytekst luchtiger maken door de letters uit elkaar te trekken. Wil je lucht, verhoog dan je regelafstand of geef het tekstblok meer ruimte eromheen. Meer daarover lees je bij whitespace.
Testen of het klopt
Zoom je pagina naar tweehonderd procent en kijk of er nog tekst wegvalt of over elkaar heen loopt. De toegankelijkheidsrichtlijnen gaan er namelijk van uit dat een bezoeker de afstanden zelf mag oprekken.
Barsten je knoppen dan uit hun jasje, dan zijn je afmetingen te krap, niet je letterafstand. Meer daarover lees je bij wcag.