# Typografie
# Hoe lezen we?
- Lezen is een complex samenspel tussen hersenen en ogen.
- Beeld scannen in zigzag.
- Beeld scannen diagonaal (milliseconden).
- Oogfixaties → groepjes woorden die samen worden herkend 4-tal woorden per fixatie, 3-tal fixaties per regel.
Vlgones een oznrdeeok op een Eglnese uvinretsiet mkaat het neit uit in wlkee vloogdre de ltteers in een wrood saatn. Het einge wat blegnaijrk is is dat de eretse en de ltaatse ltteer op de jiutse patals saatn. De rset van de ltteers mgoen wllikueirg gpletaast wdoren en je knut vrelvogens gwoeon lzeen wat er saatt. Dit kmot odmat we neit ekle ltteer op zcih lzeen maar het wrood als gheeel.
# Leessnelheid
De leessnelheid wordt bepaald door:
- Lengte van de regels
- Lange regels → te veel fixaties
- Korte regels → te veel onderbrekingen (bijv. krant)
- Voorkennis van de lezer (kennis van inhoud)
- Hypothese / Verwachtingspatroon
De dokter werd verpleegd door de patiënt - Typografie (corpsgrootte, regelafstand …)
# Hypothese
After reading the
the sentence, you are
now aware that the
the human brain does
not inform you that the
the word "the" was repeated
twice every-time!
# Kapitalen
Een tekst waarbij zowel kapitalen en onderkastletters worden gebruikt is beter leesbaar dan enkel met hoofletters. Een markanter woordsilhouet zou het verschil maken …
# Typografie is sfeer
De typografie bepaald mee de sfeer van een website. Er zijn 1000’den verschillende soorten lettertypes.
| Type | Betekenis | Voorbeeld | Website |
|---|---|---|---|
| Serif | Geschreefd lettertype | Times New Roman | tijd.be (opens new window) |
| Sans-serif | Niet-geschreefd lettertype | Helvetica | vrtnws.be (opens new window) |
# Lettergrootte
Lettergrootte bepaal je met font-size.
De lettergrootte bepaald ook de leesbaarheid van de tekst. Voor een gewone tekst kiezen we meestal uit voor 16px. Uiteraard staat het je vrij om dit aan te passen, hierbij zal de hoeveelheid tekst een bepalende factor zijn. Bij grote hoeveelheden zal je misschien ene kleiner font kiezen. Heb je weinig tekst dan ken je opteren om de lettergrootte groter te kiezen.
h1 {
font-size: 2.5rem; /* = 40px */
}
h2 {
font-size: 2rem; /* = 32px */
}
h3 {
font-size: 1.6rem; /* = 25.6px */
}
p {
font-size: 1rem; /* = 16px */
}
2
3
4
5
6
7
8
9
10
11
12
# Typografie is structureren
De gebruiker leest niet graag (digitaal)! Volgens studie zouden we maar 5 seconden tijd hebben om de aandacht van de bezoeker te krijgen.
Als we teksten schrijven voor het web moeten we hier rekening mee houden. Je moet daarbij je tekst zo kort en duidelijk mogelijk maken maar dit is nog niet voldoende.
Een van de eerste stap dat onze ogen/hersenen doen is een tekst scannen. Om sneller een overzicht te krijgen van de belangrijkste inhoud. Dit kunnen we bevorderen door onze tekst zo goed mogelijk te structureren. Hiervoor zullen we de tekst visueel gaan opsplitsen in onderdelen. Dit doen we aan de hand van titels, tussentitels, paragrafen, afbeeldingen, kleur …
# Titels en tussentitel
Aan de hand van de titels en tussentitels kan je de gebruiker visueel wegwijs maken in de inhoud van je tekst. Gebruik hiervoor de header tags h1, h2, h3, h4, h5, h6.
Maak dus geen gebruik van bijvoorbeeld:
<p class="hoofdtitel">Dit is fout</p>
# Paragrafen
Langere stukken tekst moeten opgedeeld worden in logische paragrafen.
# Regellengte
Refactoring UI, p. 114: Keep your line length in check
De ervaring leert dat een optimaal leesbare regel niet langer is dan 45 à 75 lettertekens. Het oog heeft moeite om een lange regel te volgen en vooral om het begin van een volgende regel op te zoeken. Bij het lezen van te lange regels raak je snel vermoeid en zijn er meer regressiebewegingen van het oog. Te korte regels zijn ook niet goed: de inhoud van de tekst lijkt dan een soort “verkleuteringsproces” te ondergaan. Korte regels zijn niet geschikt voor leestekst, wel voor bijschriften.
# Marges
Marges tussen elementen doe je met margin.
Refactoring UI, p. 96: Avoid ambiguous spacing
Elementen die samen horen moeten ook visueel gegroepeerd worden. Dit wil zeggen dat een tussentitel dichter bij de paragraaf eronder dient te staan en verder dan de paragraaf erboven.
Standaard is de marge van headers in CSS bovenaan en onderaan even groot. Pas deze dus steeds aan.
Bijvoorbeeld:
h1 { margin: 2em 0 1em 0; }
# Regelafstand
De regelafstand bepaal je met line-height.
Refactoring UI, p. 122: Line-height is proportional
De algemene regel voor een goede regelafstand is 150% van de lettergrootte. Of 1.5em als relatieve CSS eenheid. Bij grotere lettergrootes dient de regelafstand kleiner te zijn. Bij kleinere lettergroottes moet dit groter zijn.
Bijvoorbeeld:
h1 { line-height: 1em; }
h2, h3 { line-height: 1.2em; }
p { line-height: 1.5em; }
small { line-height: 1.75em; }
2
3
4
-of-
h1 { line-height: 100%; }
h2, h3 { line-height: 120%; }
p { line-height: 150%; }
small { line-height: 175%; }
2
3
4
# Regelval of Alignement
text-align
Refactoring UI, p. 128 Align with readability in mind
De algemene regel is dat de tekst gealigneerd moet worden volgens de schrijfrichting van de taal. De schrijfrichting kan je ook aangeven door het attribuut dir te gebruiken op een element. Bijvoorbeeld: <html dir="ltr">
# Links aligneren
Maak dus zoveel mogelijk gebruik van links aligneren bij westerse talen. Deze staat ook als standaard in onze browser ingesteld en moeten we dus niet specifiek gaan toevoegen in onze CSS.
body {
text-align: left;
}
2
3
# Rechts aligneren
Dit wordt vooral gebruikt op korte stukjes tekst, hyperlinks … naast een ander element te plaatsen (zie het voorbeeld hieronder bij verticaal aligneren).
Daarnaast is het ook aangeraden om rechts aligneren te gebruiken bij kolommen met cijfers (bedragen). Op dien manier kunnen we sneller grotere en kleinere cijfers van elkaar onderscheiden.
| Product | Kostprijs |
|---|---|
| Lorem | |
| Ipsum | |
| Dolor |
Naast het rechts aligneren kan je er ook voor zorgen dat elk getal dezelfde breedte is. Zeker voor het oplijsten van getallen onder elkaar is dit nodig. Op die manier staan de eenheden, tientallen, hondertallen, … mooi onder elkaar. Dit kan aan ge had van de css eigenschap font-variant-numberic: tabular-nums.
td.kostprijs {
font-variant-numeric: tabular-nums;
}
2
3
# Uitvullen
Het uitvullen (Eng. justify) van tekst wordt heel vaak toegepast bij print. Je kan dit ook op websites toepassen maar dit is niet meteen aangeraden. Indien je er toch gebruik van maakt dan moet je ook woordafbreking toevoegen. Hierbij gaat de browser automatische woordafbreking gaan toevoegen. Dit kan echter soms voor foute woordafbrekingen zorgen.
p {
text-align: justify;
hyphens: auto;
}
2
3
4
# Centreren
Centreren gebruiken we vooral bij knoppen maar je kan het ook gebruiken bij korte stukjes tekst die samenhoren bij een afbeelding, icon of korte tussentitel. Bijvoorbeeld om de 4 USP’s van je product of bedrijf kort voor te stellen.
© Sandra Scheurwater
# Vormregelval
Je kan sinds kort ook tekst laten vloeien rond een vorm. Bijvoorbeeld een afgeronde foto. Dit kan je doen aan de hand van de css eigenschap shape-outside.
# Logisch aligneren
In de nieuwste versie van css kan je naast left en right ook kiezen voor de logische waarde start en end. Hierbij zal het alignement gebeuren op basis van de taal van de website en/of browser instelling. Want niet iedere taal leest van link naar rechts of van boven naar beneden…
Deze start en end kan je ook terugvinden bij flexbox en css-grid.
body {
text-align: start;
}
2
3
# Verticaal aligneren
Hierbij is de regel dat je tekst zoveel mogelijk zal aligneren op basis van de baseline of de basislijn van een lettertype. Dit is opnieuw de standaard waarde in onze browser
body {
vertical-align: baseline;
}
2
3
Bijvoorbeeld:
# Keuze tips
# Fonts matter
