Typografie
Een warme schreef en een heldere schreefloze
Twee letters, allebei gratis en open source. Newsreader geeft onze koppen de warmte en het karakter van een veelgebruikt kookboek. Inter houdt de rest helder en goed leesbaar, van ingrediëntenlijsten tot openingstijden.
Grote statements op posters, headerbanners en eindbeelden. Regular, zinsopbouw met alleen een hoofdletter aan het begin, met een punt erachter. Eén korte regel, max. acht woorden.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
- Regelafstand
- 1,05 · 105% · 16,8 px bij 16 px
- Letterspatiëring
- -0,01 em · -1%
Een menselijker morgen.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
Een menselijker morgen.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
font-family: Newsreader, Georgia, 'Times New Roman', serif;Paginatitels, tussenkoppen en gerechten op de menukaart. Medium voor H1 en H2; Semibold alleen op kleine formaten. Nooit in kapitalen.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
- Regelafstand
- 1,15 · 115% · 18,4 px bij 16 px
- Letterspatiëring
- 0 em · 0%
Kooklessen in Rotterdam-West
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
Kooklessen in Rotterdam-West
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
font-family: Newsreader, Georgia, 'Times New Roman', serif;Alle lopende tekst, formulieren, knoppen en interface. Regular om te lezen, Medium voor nadruk, Semibold voor knoppen en H3. 16–18 px op scherm, 9–10 pt in print.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
- Regelafstand
- 1,6 · 160% · 25,6 px bij 16 px
- Letterspatiëring
- 0 em · 0%
Neem een bakje mee voor restjes.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
Neem een bakje mee voor restjes.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
font-family: Inter, Arial, Helvetica, sans-serif;Bovenkopjes, data, namen van keukens en prijzen: Semibold kapitalen, +8% spatiëring, 12–14 px. Bijschriften: Regular, gewone zinsopbouw, in Steen.
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
- Regelafstand
- 1,25 · 125% · 20 px bij 16 px
- Letterspatiëring
- +0,08 em · +8%
ELKE DONDERDAG · 18.00 UUR
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
ELKE DONDERDAG · 18.00 UUR
Goede typografie zie je niet. Ze leidt het oog van regel naar regel, zodat lezers bij het verhaal blijven in plaats van bij de letters. De ruimte tussen regels is net zo belangrijk als de letters zelf.
font-family: Inter, Arial, Helvetica, sans-serif;Hiërarchie
Typografische schaal
Zeven stappen dekken alles wat we maken. Hieronder staat elke stap live in Newsreader en Inter; typ je eigen tekst om het te proberen. Formaten zijn in px voor scherm; voor A4-documenten halveer je ze en lees je ze als punten (broodtekst 17 px ≈ 9,5 pt).
Op mobiel (smaller dan 600 px) schaal je de drie grootste stappen terug: Display 44/48 px, H1 34/40 px, H2 26/32 px. Vanaf H3 blijft alles gelijk, en broodtekst is op scherm nooit kleiner dan 16 px.
Tekst zetten
Goed leesbaar, voor iedereen
Goede typografie gaat vooral over weglaten. Deze drie regels maken het grootste verschil.
Regellengte
Houd regels tussen de 45 en 75 tekens. Gebruik op brede schermen liever een smalle kolom dan tekst over de hele breedte.
Uitlijning
Lijn altijd links uit met een rafelige rechterkant. Geen uitgevulde tekst: die geeft gaten die het lezen lastiger maken, zeker in het Nederlands met zijn lange woorden.
Hoofdletters en leestekens
Overal gewone zinsopbouw, ook in koppen en op knoppen. Kapitalen alleen voor korte labels. Geen uitroeptekens. Een punt achter een Display-regel is ons handschrift.
- Combineer één kop in Newsreader met Inter voor al het andere.
- Gebruik echte aanhalingstekens en half-kastlijnen: ‘soep’ en 18.00–21.00 uur, niet 'soep' en 18.00-21.00.
- Gebruik tabelcijfers in Inter voor prijzen en roosters, zodat de cijfers netjes onder elkaar staan.
- Zet geen lange alinea's in Newsreader en geen koppen in Inter Bold. Elke letter heeft zijn eigen taak.
- Gebruik niet tegelijk cursief, onderstreping en vet om iets te benadrukken. Kies er één, het liefst Medium.
- Voeg geen andere letters toe, ook niet voor één evenementposter. Schrijfletters laten ons op een koffieketen lijken.
Praktische details