Typography is what comes between the author and the reader. This is as true on the web as it is in any other medium. If a text has anything at all significant to say, it needs a typographer's care, which will in turn be repaid by the reader's attention. If you design websites or use CSS then you are a typographer whether you know it or not.
—Richard Rutter, Web Typography

CSS Typografie

Met ‘typografie’ bedoelen we ‘alles wat te maken heeft met lettertypes, uitlijning, interlinie, regellengte enz’. Ik geef toe dat ik een beetje een typografie-nerd ben. Ik kan me verliezen in lettertypes, zitten sleutelen aan de juiste interlinie, regellengte, lettergrootte. Maar ik geloof dat die aandacht voor detail ook echt belangrijk is. Veel sites (zeker deze!) bestaan voor een groot stuk uit tekst. Waarom zou je dan niet je uiterste best doen om deze tekst zo vlot mogelijk leesbaar mogelijk te maken. Ik beperk me hier tot enkele praktische dingen waarmee je op een eenvoudige manier aan de slag kan. Dit topic is sterk verwant met het topic CRAP.

Typografie en leesbaarheid

Hoe we lezen

Een tekst lezen is een ingewikkeld proces. Je denkt misschien dat je letters leest, maar dat is helemaal niet zo. Lees volgende zin eens. “De bnard in de NoeDmtar-e in Prjias, de boeedrme en euudeoewne kdaaehratl van de Fnsare hrtsoodad, heeft zwoat het hlee dak van het goebuw vrseoewt.” Kon je de tekst lezen? In deze zin staat de eerste en laatste letter van elk woord op zijn plaats en zijn de andere letters willekeurig gezet. Je merkt vermoedelijk dat je de tekst nog redelijk kan lezen.

Dat komt omdat we geen letters lezen, maar woordbeelden. Onze ogen springen in kleine sprongetjes van de ene naar de andere plaats, met af en toe een pauze. Het is de rol van typopgrafie om dat proces zo moeiteloos mogelijk te maken.

Eenheden

Uit wat volgt hieronder zal blijken dat het vaak zinvol is om dozen (alles in CSS is een doos) te meten in termen van hoeveel letters de doos kan bevatten. De em eenheid is (ongeveer) een maat voor de breedte van de hoofdletter ‘M’, de breedste letter in het alfabet. Als je deze pagina op een voldoende groot scherm leest is de maximale breedte van de tekst beperkt tot 45em. Dat komt overeen met iets in de buurt van 90 karakters. We zullen in het volgend puntje zien dat dit eerder aan de grote kant is, maar het is een compromis omdat te smalle blokken mij in de problemen brengen met de blokjes code.

Over het verschil tussen em en rem hadden we reeds in het topic boxmodel

Regellengte

Om zo vlot mogelijk leesbaar te zijn bevat een regel tekst best iets in de buurt van 70 letters (50–90), spaties inbegrepen. Dat is geen getal dat gebeiteld is in steen, maar het komt erop neer dat te lange regels echt niet OK zijn. Het is heel vermoeiend om tekst te lezen als er teveel letters op één regel staan. Ons oog moet dan een grote sprong maken op het eind van de regel naar het begin van de volgende regel. Dat is de reden waarom kranten werken met kolommen. Elke kolom bevat redelijk weinig letters op één regel, zodat je 's morgens in de trein zonder veel inspanning van onze ogen toch je krant kan lezen. De tekst die je nu leest is eigenlijk te breed (maar dat is een bewust compromis). Misschien maak ik hem toch nog smaller, wie weet …

Vuistregel: beperk het aantal letters op één regel. Een goed getal is ongeveer twaalf woorden op een regel, wat overeen komt met ongeveer 70 letters. De ch eenheid kan hier mogelijk nuttig zijn: 1ch is de breedte van een gemiddelde letter (het getal ‘0’) in het huidige lettertype. Of anders werk je met em om de breedte van containers te beperken. Het ligt trouwens voor de hand om eerder max-width dan width te gebruiken als je responsief wilt werken.

Lettergrootte

Voor de grootte van de letter gebruik je best de rem eenheid. Alles wordt dan relatief berekend t.o.v. de standaardgrootte van de browser. Zo geef je als ontwerper een zekere mate van controle terug aan de bezoeker, want die kan het standaardlettertype groter maken. In CSS gebruik je de eigenschap font-size

Interlinie

De interlinie is de afstand tussen twee basislijnen (de denkbeeldige lijn waarop de letters staan). Deze line-height definieer je best met een eenheidsloos getal. Dit getal is een soort vermenigvuldigingsfactor waarmee je de lettergrootte moet vermenigvuldigen.

De standaardwaarde van deze eigenschap (= die waarde die je zou krijgen als je de eigenschap niet gebruikt in je CSS-bestand) is bij alle browsers eerder aan de kleine kant. Het is een goed idee om de line-height te verhogen in de buurt van 1.5.

Hieronder vind je drie keer dezelfde alinea. De eerste line-height is te klein, de tweede zit in het juiste gebied, de laatste versie is te groot.

Bovendien is er een verband tussen line-height en regellengte: hoe langer de regels, hoe groter de afstand ertussen moet worden. In een smalle tekstkolom mogen de regels dus wat dichter tegen elkaar staan.

Uitlijning

De eigenschap text-align regelt de uitlijning: links, rechts, gecentreerd of uitgevuld (‘justify’). De meeste beginners maken de fout om teveel gecentreerd of uitgevuld te kiezen. Gecentreerd kan voor een titel of zo, een gedichtje, maar wordt moeilijk voor hele alinea's. Uitgevuld (dus links en rechts uitgelijnd) kan als de regellengte groot genoeg is. Het is niet bruikbaar voor eerder smalle tekstkolommen. Bekijk volgende erg smalle tekstkolom met text-align: justify. Er ontstaan grote gaten tussen de woorden omdat de browser de woorden niet automatisch kan afbreken.

Kies standaard voor text-align: left. In zeer beperkte mate kan center voor een titel of zo. Blijf ver weg van justify.

Firefox Developer Tools

Firefox heeft in de dev. edition een handig tabblad ‘Lettertype’. Hier kan je spelen met de hierboven genoemde parameters grootte en interlinie (en ook vet / cursief).

Lettertypes

Schreef / schreefloos

Heel sterk vereenvoudigd kan je lettertypes opdelen in twee grote categorieën: schreefletters (‘serif’) en schreefloze letters (‘sans serif’):

Schreven (serifs) zijn de ‘uitstekende deeltjes’ op het einde van een letter, zoals onderaan bij de letter ‘r’. Denk: dit is de plaats waar de monnik zijn ganzenveer horizontaal hield of waar de steenkapper zijn beitel draaide om de letter te beëindigen.

Lettertype kiezen

Elk lettertype heeft een uitstraling, een sfeer. Bij een site voor kinderen hoort een ander lettertype dan bij een bedrijfssite. Een site met veel tekst zal vermoedelijk een andere letter gebruiken dan een site waar amper tekst op staat. Probeer na te denken over wat je site moet uitstralen en zoek een letter die daarbij past.

In CSS gebruiken we dan een font stack. Dat werkt als volgt. Nemen we als voorbeeld deze CSS-regel:

body {
  font-family: "Noto Serif", Georgia, 'Times New Roman', Times, serif;
}

De browser gaat het lijstje in de font stack af en kiest het eerste lettertype dat beschikbaar is op de computer van de bezoeker. In dit geval wordt eerst "Noto Serif" (met aanhalingstekens, want bevat een spatie) geprobeerd. Dit is een google font die moet geladen worden. Stel dat dat mislukt, dan wordt lettertype 2 geprobeerd: Georgia. Dat is een mooie schreefletter die de meeste mensen (wie iets heeft van Microsoft heeft Georgia) op hun computer staan hebben. Als deze niet aanwezig zou zijn wordt de volgende in het rijtje geprobeerd enz.

Stel je bij font-family niet tevreden met één lettertype. Voorzie altijd enkele alternatieven en eindig altijd met serif of sans-serif.

Lettertypes combineren

Heel sterk vereenvoudigd kan je stellen dat het niet zo gemakkelijk is om twee lettertypes uit dezelfde familie te combineren, dus twee schreefletters of twee schreefloze letters. Het is veel veiliger om uit elke familie eentje te kiezen. Laat je helpen door designers die mooie combinaties voorstellen. Zoek naar "font pairing google fonts" als je twee google fonts wilt combineren. Voor deze site gebruik ik het paar "Noto Serif" / "Noto Sans".

Cursief, vet, …

Nog kort enkele CSS-eigenschappen:

… {
  font-weight: 700; // 100 = ultradunne letter, 900 = heel dik
  font-style: italic; // cursief
  text-transform: capitalize; // zet alles in kapitalen (hoofdletters)
  letter-spacing: 1px; // voorzie beetje ruimte tussen letters (gebruik zeer voorzichtig!)
}