Display-lettertypen: ontwerpen met grote letters

Display-lettertypen zijn lettertypen die zijn getekend om groot te worden gebruikt: koppen, posters, covers, verpakkingen en korte woordenreeksen. Hun details, van scherp contrast tussen dikke en dunne streken tot krappe letterafstand en expressieve vormen, zijn ontworpen om er op grote formaten op hun best uit te zien en vallen op alineaformaat meestal uit elkaar. Gebruik een display-lettertype voor de paar woorden die iemand moeten tegenhouden, en een rustiger tekstlettertype voor alles wat daarna wordt gelezen.

Deze gids behandelt wat een lettertype tot display-lettertype maakt, hoe groot je het zet, hoe je het combineert en hoe je voorkomt dat grote letters druk of gedateerd ogen. Hij bouwt voort op de basis van typografie en visuele hiërarchie.

Wat een display-lettertype anders maakt dan een tekstlettertype

Tekstlettertypen zijn gebouwd voor comfort over duizenden woorden: open vormen, stevige streken, royale letterafstand en een grote x-hoogte zodat letters kleine formaten en slechte schermen overleven. Display-lettertypen ruilen daar iets van in voor karakter. Op 80 px heeft niemand moeite de letters te zien, dus de ontwerper kan het contrast opvoeren, breedtes samenknijpen, details aanscherpen en de letterafstand verkleinen.

Sommige families komen in beide uitvoeringen: een Text-snede en een Display-snede van hetzelfde ontwerp, of één variabel bestand met een optische-grootte-as die zich aanpast als het formaat verandert. Variabele lettertypen legt optische grootte uitgebreider uit.

Soorten display-lettertypen en de sfeer die elk zet

Display-lettertypen kies je het makkelijkst op het gevoel dat je wilt. Elke familie hieronder bevat breed verkrijgbare voorbeelden van Google Fonts, zodat je ze op je eigen woorden kunt uitproberen.

• Schreeflettertypen met hoog contrast: mode, cultuur, redactioneel. Voorbeelden: Playfair Display, DM Serif Display, Bodoni Moda.
• Smalle schreefloze: urgentie, sport, nieuws, posters. Voorbeelden: Bebas Neue, Anton, Oswald.
• Brede en uitgerekte schreefloze: tech, moderne merken, zelfverzekerde rust. Voorbeelden: Syne, Unbounded.
• Zacht en afgerond: vriendelijk, eten, kinderen, welzijn. Voorbeelden: Fraunces met zijn zachte as, Fredoka.
• Zware grotesken: krachtige uitspraken, lanceringen, activisme. Voorbeelden: Archivo Black, Inter Tight in zwaarste gewicht.
• Script en met de hand getekend: uitnodigingen, ambacht, persoonlijke merken, spaarzaam gebruikt. Voorbeelden: Caveat, Yellowtail.

Hoe groot display-letters moeten zijn

Groot genoeg dat het duidelijk het eerste is wat mensen zien, en klein genoeg dat de woorden op weinig regels passen. Een handige gewoonte is display-letters te schalen ten opzichte van het canvas in plaats van in punten. Op een post van 1080 bij 1350 vult een kop van twee tot vier woorden vaak zo’n 70 tot 90 procent van de breedte. Op een website zit een herokop meestal ergens rond drie tot zes keer de tekstgrootte.

Op het web schaalt clamp() display-letters soepel tussen een minimum en een maximum, zodat ze op grote schermen groot zijn zonder op telefoons over te lopen. Maak de regelafstand en letterafstand krapper naarmate het formaat groeit; de standaardwaarden zijn getekend voor kleinere tekst.

.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}

Een display-lettertype combineren met een tekstlettertype

De eenvoudigste betrouwbare combinatie geeft elk lettertype één taak. Het display-lettertype spreekt luid voor een paar woorden; het tekstlettertype doet het rustige werk van bijschriften, lopende tekst, data en prijzen. Laat de twee op minstens één duidelijke manier contrasteren, zoals schreef tegenover schreefloos of smal tegenover normale breedte, zodat ze niet als een bijna-raak ogen. Lettertypen combineren behandelt de regels volledig.

Display-letters op kleurverlopen en drukke achtergronden

Grote letters zijn de vergevingsgezindste tekst die je op een kleurrijke achtergrond kunt zetten, omdat dikke streken hun vorm houden tegen beweging in het vlak erachter. Het risico zit in de dunne delen: haarfijne schreven en fijne details verdwijnen in de lichtere of drukkere delen van een kleurverloop. Kies op rijke achtergronden een display-lettertype met stevigere dunne streken, of ga een gewicht omhoog.

In Gradiently weet een Mark waar je woorden staan: zijn rustigste gebied schuift achter de kop en kleuren bij de letters worden dieper of lichter, zodat zelfs fijne display-letters overeind blijven. Lettertreatments zoals Contour, Inline en Extrude geven karakter aan display-woorden als het lettertype zelf eenvoudig is; teksteffecten laat zien wanneer die werken.

Fouten die display-letters goedkoop laten ogen

1. 1

   Standaardletterafstand op enorme formaten

   Grote letters met tekststandaarden ogen los. Maak de regelafstand krapper, rond 1 tot 1,1, en de letterafstand iets krapper.

2. 2

   Nepvet en nepcursief

   Ontbreekt een stijl in een lettertype, dan kunnen tools en browsers hem nabootsen door letters uit te smeren of schuin te zetten. Laad de echte gewichten en cursieven.

3. 3

   Letters uitrekken om te passen

   Schaal letters nooit horizontaal of verticaal. Kies in plaats daarvan een smalle of brede snede.

4. 4

   Trendlettertypen zonder reden

   Een lettertype dat is gekozen omdat het dit seizoen overal is, veroudert met het seizoen. Kies voor de sfeer die je nodig hebt.

5. 5

   Weduwen in koppen van twee regels

   Eén kort woord alleen op de tweede regel verzwakt de kop. Herschrijf, breek anders af of gebruik text-wrap: balance.