X-height: waarom 18 pixels niet altijd 18 pixels oogt
Je bouwer zet je lettertype op 18 pixels en het leest prima. Je wisselt van lettertype, houdt dezelfde 18 pixels aan, en opeens is je tekst nauwelijks te volgen. Er is niets veranderd aan het getal, en toch klopt er iets niet.
Dat komt door een eigenschap die zelden wordt genoemd. Lettertypes verdelen die hoogte namelijk anders.
Het deel dat je echt leest, is bij het ene lettertype veel groter dan bij het andere.
Wie dat weet, kiest anders. En dat scheelt meer aan leesbaarheid dan een paar pixels erbij.
De hoogte van de kleine letter x, en waarom die je leesbaarheid bepaalt.
Wat is x-height?
De x-hoogte is de hoogte van de kleine letter zonder stok of staart. Denk aan de x, de a of de o.
De letter b heeft een stok naar boven en de p een staart naar beneden. Die tellen niet mee.
Waarom juist die letters
Omdat je die het meest ziet. Het merendeel van een gemiddelde tekst bestaat uit dat middendeel.
Daar leest je oog op. De uitschieters naar boven en beneden zijn bijzaak.
Het verschil met lettergrootte
Lettergrootte is het getal dat je instelt. De x-hoogte is hoeveel daarvan naar het leesbare deel gaat.
Twee lettertypes op dezelfde grootte kunnen daardoor totaal anders ogen. Bij het lettergrootte kiezen kijk je dus niet alleen naar het cijfer.
Wat dat in de praktijk betekent
Een lettertype met een grote x-hoogte oogt fors op 17 pixels. Een met een kleine x-hoogte heeft er 20 nodig.
Je stelt het getal dus af op je letter en niet andersom, zie typografie.
Wat prettig leest
Waar ik op let
Een ruime x-hoogte voor lopende tekst op een scherm.
Voldoende ruimte tussen de letters onderling.
Duidelijk verschil tussen letters die op elkaar lijken.
Een regelafstand die meegroeit met die hoogte.
Die derde wordt vergeten en levert echte fouten op. Denk aan de hoofdletter I, de kleine l en het cijfer 1.
Waar dat misgaat
Bij een postcode, een ordernummer of een wachtwoord in je bevestigingsmail. Daar moet elk teken los te herkennen zijn.
Kies daar dus geen sierlijk lettertype, hoe mooi het ook staat.
Twee lettertypes vergelijken
Zet ze naast elkaar op dezelfde grootte met dezelfde zin. Bij het lettertypes vergelijken zie je het verschil direct.
Doe dat met een echte alinea en niet met de naam van het lettertype. Een naam van tien tekens zegt niets.
En op een echt scherm
Wat op een groot scherm prettig leest, kan op een telefoon te krap zijn. Bij het schermlezen telt elke millimeter.
Test dus op je eigen toestel, met een tekst van tien regels. Meer daarover lees je bij UI.
De toegankelijkheidskant
Voor wie slecht ziet, is dit geen detail. Een grote x-hoogte maakt tekst leesbaar zonder dat je alles hoeft te vergroten.
Dat helpt ook mensen met dyslexie. Meer daarover lees je bij accessibility.
Waar je hem vastlegt
Niet als losse waarde, want je stelt hem niet in. Je kiest hem met je lettertype.
Een letter met een grote romp heeft meer lucht tussen de regels nodig. Houd je dezelfde regelafstand aan, dan gaat je tekst er dicht uitzien.
Dat wordt bij een lettertypewissel vrijwel altijd vergeten. Loop je regelafstand dus na zodra je letter verandert.
Waarom een naam niets zegt
Vergelijk twee lettertypes met een echte alinea en niet met hun naam. Tien tekens vertellen je niets over hoe een tekst leest.
Zet ze naast elkaar op dezelfde grootte met dezelfde zin. Het verschil zie je dan direct.
Test op je eigen telefoon
Wat op een groot scherm prettig leest, kan op een klein scherm te krap zijn. Daar telt elke millimeter.
Neem een tekst van tien regels en lees hem echt. Een losse kop zegt niets over leescomfort.
Meer vragen over X-height
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is x-height?
Waarom oogt hetzelfde lettertype soms groter?
Welke x-hoogte leest het prettigst?
Hoe vergelijk je twee lettertypes?
Waarom is dit belangrijk voor toegankelijkheid?
Wat is het verschil met lettergrootte?
Wat is x-height?
Omdat lettertypes de opgegeven hoogte anders verdelen. Lettergrootte is het getal dat je instelt, de x-hoogte is hoeveel daarvan naar het leesbare deel gaat.
Twee lettertypes op dezelfde grootte kunnen daardoor totaal anders ogen.
Een lettertype met een grote x-hoogte oogt fors op 17 pixels. Een met een kleine x-hoogte heeft er 20 nodig voor hetzelfde effect.
Je stelt het getal dus af op je letter en niet andersom.
Dat verklaart waarom een lettertypewissel je tekst opeens onleesbaar kan maken, terwijl er niets aan je instellingen is veranderd.
Kijk bij het kiezen van een lettertype dus verder dan het aantal pixels.
Een letter met een grote romp oogt fors op 17 pixels. Een met een kleine romp heeft er 20 nodig voor hetzelfde effect. Lettergrootte is het getal dat je instelt. De x-hoogte bepaalt hoeveel daarvan naar het leesbare deel gaat. Je stelt het getal dus af op je letter en niet andersom. Dat is de omgekeerde volgorde van hoe de meeste mensen kiezen.
Waarom oogt hetzelfde lettertype soms groter?
De x-hoogte is de hoogte van een kleine letter zonder stok of staart. Denk aan de x, de a of de o.
De letter b heeft een stok naar boven en de p een staart naar beneden. Die tellen niet mee.
Juist die middelste letters bepalen je leesbaarheid, want het merendeel van een gemiddelde tekst bestaat daaruit.
Daar leest je oog op. De uitschieters naar boven en beneden zijn bijzaak.
Het is dus geen instelling die je zelf kiest. Het is een eigenschap van het lettertype, en die bepaalt hoe groot je tekst oogt bij hetzelfde aantal pixels.
Je stelt deze eigenschap niet zelf in. Je kiest hem met je lettertype.
Het verklaart wel waarom je tekst na een lettertypewissel opeens anders leest, terwijl je aan je instellingen niets hebt veranderd. De x-hoogte is de hoogte van een kleine letter zonder stok of staart, zoals de x, de a of de o.
Hoe vergelijk je twee lettertypes?
Zet ze naast elkaar op dezelfde grootte met dezelfde zin. Dan zie je het verschil direct.
Doe dat met een echte alinea en niet met de naam van het lettertype. Een naam van tien tekens zegt niets over hoe een tekst leest.
Test bovendien op een echt scherm. Wat op een groot scherm prettig leest, kan op een telefoon te krap zijn.
Gebruik dus je eigen toestel met een tekst van tien regels.
Let daarbij ook op letters die op elkaar lijken: de hoofdletter I, de kleine l en het cijfer 1. Dat is bij een postcode of een ordernummer geen detail.
Zet twee lettertypes naast elkaar met dezelfde zin op dezelfde grootte.
Let daarbij op letters die op elkaar lijken: de hoofdletter I, de kleine l en het cijfer 1. Bij een postcode of ordernummer is dat geen detail. Doe dat met een echte alinea van tien regels en niet met de naam van het lettertype. Tien tekens zeggen niets over leescomfort.
Welke x-hoogte leest het prettigst?
Een ruime, zeker voor lopende tekst op een scherm. Dat leest rustiger dan een sierlijk lettertype met een kleine romp.
Ik let daarnaast op drie dingen. Voldoende ruimte tussen de letters onderling.
Duidelijk verschil tussen letters die op elkaar lijken. En een regelafstand die meegroeit met die hoogte.
Die laatste wordt vaak vergeten bij een lettertypewissel.
Een letter met een grote romp heeft meer lucht tussen de regels nodig. Houd je dezelfde regelafstand aan, dan gaat je tekst er dicht en zwaar uitzien.
Kies een ruime x-hoogte voor lopende tekst op een scherm. Dat leest rustiger dan een sierlijke letter.
Loop daarbij je regelafstand na, want die moet meegroeien. Anders gaat je tekst er dicht en zwaar uitzien. Let daarnaast op voldoende ruimte tussen de letters onderling. Een krappe letterafstand maakt een grote romp alsnog onleesbaar. Een letter met een grote romp heeft meer lucht tussen de regels nodig dan een met een kleine romp. Dat vergeet vrijwel iedereen.
Waarom is dit belangrijk voor toegankelijkheid?
Voor wie slecht ziet, is dit geen detail. Een grote x-hoogte maakt tekst leesbaar zonder dat iemand alles hoeft te vergroten.
Dat scheelt een handeling bij elk bezoek.
Het helpt ook mensen met dyslexie. Letters die duidelijk van elkaar verschillen, zijn makkelijker te onderscheiden.
Je legt die eigenschap niet apart vast, want je stelt hem niet in.
Je kiest hem met je lettertype. Leg dus je lettertype en je lettergrootte samen vast als afspraak, want los van elkaar zeggen die twee weinig.
Kies je lettertype dus mede op leesbaarheid en niet alleen op uitstraling.
Een ruime romp maakt tekst leesbaar zonder dat iemand hoeft in te zoomen. Dat scheelt een handeling bij elk bezoek. Het helpt ook mensen met dyslexie, want letters die duidelijk verschillen zijn makkelijker te onderscheiden. Een ruime romp maakt tekst leesbaar zonder dat iemand hoeft in te zoomen. Dat scheelt een handeling bij elk bezoek aan je site.
Leest je site niet prettig terwijl je lettergrootte op papier klopt? Stuur me de link via het formulier hieronder. Ik kijk naar je lettertype, je grootte en je regelafstand, en wat die drie samen doen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: X-hoogte, letterhoogte, romphoogte
