Lettertypen, tekstgrootte en contrast voor carrousels

Welke lettergrootte heeft carrouseltekst nodig?

Ontwerp voor de telefoon, niet voor je monitor. Een telefoon toont een slide van 1080 px ongeveer 360 punten breed, een derde van de breedte in pixels (grote telefoons tonen hem iets breder). Elke maat die je op de slide instelt, wordt dus ongeveer drie keer kleiner op het scherm waarop mensen hem lezen.

De ontwerprichtlijnen van Apple leggen de kleinste tekst op een iPhone op 11 punten en de standaard leesgrootte op 17 punten. Vermenigvuldig met drie en je hebt de maten voor een slide van 1080 px: ongeveer 33 px als minimum voor alles wat mensen moeten lezen, en ongeveer 51 px voor prettig leesbare lopende tekst. De gratis LinkedIn-pdf-checker van aiCarousels markeert tekst onder ongeveer 24 px als moeilijk leesbaar op een telefoon: zie dat als de ondergrens voor kleine labels zoals een paginanummer of je gebruikersnaam, niet als een maat voor zinnen.

Tekstgroottes op een slide van 1080 px, en wat ze op een telefoon worden

Slidematen gedeeld door drie: een telefoon die de slide 360 punten breed toont. Schermpunten zijn de eenheid van Apple, elk ongeveer één CSS-pixel; WCAG meet grote tekst in drukpunten, en de 18 pt daarvan is er ongeveer 24. De laatste kolom is op die schermgrootte getekend. Maten van Apple: Human Interface Guidelines, Typography, en UI Design Dos and Don’ts.

Werk je op een groter canvas? Schaal dan op dezelfde manier: bij 2.160 px breed verdubbel je elke maat. Een dun of smal lettertype heeft meer nodig dan deze maten, niet minder; de richtlijnen van Apple zeggen dat je groter moet mikken als een eigen lettertype een dun gewicht heeft.

De gangbare carrouselformaten zijn allemaal 1080 px breed (1080 × 1350 voor LinkedIn en Instagram 4:5, 1080 × 1440 voor Instagram 3:4, 1080 × 1920 voor TikTok), dus deze maten werken op elk platform. De exacte formaten per app staan in carrouselformaten op elk platform.

Welke lettertypen werken het best voor carrousels?

Het beste lettertype voor een carrousel is het lettertype dat mensen niet opmerken terwijl ze lezen. Een paar regels die op elk platform gelden:

• Twee lettertypen zijn genoeg. Eén voor koppen, één voor al het andere. Gebruik grootte en gewicht voor de rest van de hiërarchie, geen derde lettertype.
• Laat het koplettertype de persoonlijkheid dragen. Een schreefletter, een zware grotesk of een smalle displayletter werkt voor een paar grote woorden.
• Houd het lettertype voor lopende tekst eenvoudig. Open lettervormen, een ruime x-hoogte (de hoogte van de kleine letters) en een stevig regular gewicht. De meeste strakke schreefloze letters voldoen.
• Vermijd dunne en lichte gewichten op kleine maten. De richtlijnen van Apple waarschuwen dat de gewichten Ultralight, Thin en Light moeilijk te zien zijn, vooral als tekst klein is.
• Bewaar schrijfletters en hoofdletters voor een paar woorden. Een handgeschreven lettertype of een regel in hoofdletters leest langzamer dan kleine letters. Prima voor een korte kop, vermoeiend voor een alinea.
• Houd ze gelijk op elke slide, en op elke carrousel. Mensen leren je look herkennen, en een brandkit bewaart de lettertypen en kleuren voor elke nieuwe carrousel.

Lettertypecombinaties die overeind blijven op een telefoon

Combinaties uit de gratis tool Lettertypecombinaties. Het zijn allemaal Google Fonts, gratis voor commercieel gebruik.

Hoeveel contrast heeft carrouseltekst nodig?

Contrast is het verschil in lichtheid tussen de tekst en wat erachter staat, uitgedrukt als verhouding van 1:1 (geen) tot 21:1 (zwart op wit). De toegankelijkheidsstandaard van het web, WCAG 2.2, vraagt om minstens 4,5:1 voor tekst, en 3:1 voor grote tekst: 18 punten, of 14 punten vet. Volgens WCAG geldt hetzelfde voor afbeeldingen van tekst, en elke carrouselslide is er een. Alleen logo’s en bijkomstige tekst zijn uitgezonderd: woorden die pure decoratie zijn, of toevallig deel uitmaken van een foto. De kop en lopende tekst van een slide zijn geen van beide.

WCAG stelt 18 drukpunten gelijk aan ongeveer 24 px op een scherm, de 24 schermpunten uit de tabel hierboven. Op een slide die een telefoon op een derde van het formaat toont, is dat ongeveer 72 px (of ongeveer 56 px vet). Koppen van dat formaat mogen dus 3:1 gebruiken. Alles wat kleiner is, ook je lopende tekst, heeft 4,5:1 nodig.

Contrastvoorbeelden voor carrouselkleuren

Verhoudingen berekend met de WCAG-formule voor precies deze kleuren. Het oranje laat de gebruikelijke oplossing zien: houd de kleur, verander de tekst erop.

• Tekst op een foto verandert van contrast van letter tot letter. Zet de woorden op een effen vlak, of maak de foto erachter donkerder, en check de lichtste plek achter de tekst.
• Merkkleuren vallen als tekstkleur vaak door de mand. Gebruik ze voor achtergronden, vormen en één accentwoord, en zet de tekst in je donkere of lichte neutrale kleur.
• Houd marge. 4,5:1 is het minimum op een goed scherm. Mensen lezen carrousels in de zon, met de helderheid omlaag. Een hogere verhouding kost niets.

Hoeveel tekst hoort er op één carrouselslide?

Minder dan je denkt. Passen de woorden niet op de maten hierboven, dan staat er te veel op de slide.

• Eén idee per slide. Een kop die het punt maakt, en een of twee regels die het onderbouwen.
• Een korte cover. De check Klaar om te plaatsen? van aiCarousels mikt voor de eerste slide op 12 woorden of minder.
• Splits, krimp niet. Leest een slide als een alinea, maak er dan twee slides van. De meeste platforms geven je ruimte: Instagram accepteert er tot 20.
• Korte lijstjes. Een paar punten per slide, elk op één regel.

In aiCarousels stel je dit in voordat er iets geschreven is: Meer opties › Woorden per slide heeft Auto, Krachtig (de minste woorden), Gebalanceerd en Uitgebreid. Tijdens het bewerken krijgt tekst die niet op een leesbare grootte past een rood label Te lang voor dit vak in plaats van te krimpen, en Inkorten tot het past kort hem in, in jouw stem. Dat is automatisch passende tekst. Of zet de slide om naar een layout met meer ruimte: je woorden verhuizen mee.

Is Unicode-vetgedrukte tekst slecht voor schermlezers?

Dat hangt af van waar het vet staat.

• Op een slide: vet is het eigen vette gewicht van het lettertype, in de afbeelding getekend. Het ziet er hetzelfde uit voor iedereen die het kan zien. Geen probleem.
• In een bijschrift: het “vet” dat je uit een tekstopmaaktool plakt, is helemaal geen vet. Het is een andere reeks tekens, de Mathematical Alphanumeric Symbols (U+1D400 tot U+1D7FF), bedoeld voor wiskunde. Unicode raadt af ze te gebruiken in plaats van echte opmaak. Schermlezers kunnen ze overslaan of iets voorlezen als “mathematical sans-serif script t”, zoals de Britse gehandicaptenorganisatie Scope uitlegt.

Houd opgemaakte letters dus bij een paar woorden, en nooit op een naam, een hashtag of de zin die mensen moeten begrijpen. Hoe je het per app doet, staat in vetgedrukte tekst op LinkedIn en de Instagram-tekstopmaak.

Veranderen lettertypen en tekstgroottes op LinkedIn, Instagram en TikTok?

De maten hierboven gelden overal, omdat de slides allemaal 1080 px breed zijn. Wat verandert, is wat erbovenop ligt:

• TikTok en slides in 9:16: de knoppen van de app en het bijschrift bedekken de randen van de slide. Houd woorden daar weg. aiCarousels tekent deze gebieden als je Veilige zones tonen aanzet.
• Instagram: de slideteller staat rechtsboven en de puntjes onder de afbeelding. Houd marge aan de randen, en schrijf alternatieve tekst voor elke slide.
• LinkedIn: de carrousel is een pdf-document. Paginaformaat, cover en de pdf zelf komen aan bod in ontwerptips en specificaties voor LinkedIn-carrousels.

Een voorbeeld: een carrousel volgens deze regels

Zes slides in 4:5. Grote koppen, één regel lopende tekst per slide, donker op licht, en één lettertypecombinatie van cover tot laatste slide.

Zo stel je lettertypen, tekstgrootte en contrast in in aiCarousels