Skrifttyper, tekststørrelse og kontrast for karuseller

Hvilken skriftstørrelse bør karuselltekst ha?

Design for mobilen, ikke for skjermen din. En mobil viser en slide på 1080 px omtrent 360 punkter bred, en tredjedel av bredden i piksler (store mobiler viser den litt bredere). Hver størrelse du setter på sliden, blir altså omtrent tre ganger mindre på skjermen folk leser den på.

Apples designretningslinjer setter den minste teksten på en iPhone til 11 punkter og standardstørrelsen for lesing til 17 punkter. Gang med tre, så har du tallene for en slide på 1080 px: rundt 33 px som minimum for alt folk skal lese, og rundt 51 px for behagelig brødtekst. aiCarousels’ gratis Sjekk av LinkedIn PDF-karusell flagger tekst under omtrent 24 px som vanskelig å lese på mobil: se på det som gulvet for små etiketter som et sidetall eller brukernavnet ditt, ikke som en størrelse for setninger.

Tekststørrelser på en slide på 1080 px, og hva de blir på en mobil

Slidens størrelser delt på tre: en mobil som viser sliden 360 punkter bred. Skjermpunkter er Apples enhet, omtrent én CSS-piksel hver; WCAG måler stor tekst i typografiske punkter, og 18 pt der tilsvarer omtrent 24 slike. Den siste kolonnen er tegnet i den størrelsen på skjermen. Apples størrelser: Human Interface Guidelines, Typography, og UI Design Dos and Don’ts.

Jobber du på et større lerret? Skaler på samme måte: ved 2160 px bredde dobler du hvert tall. En tynn eller smal skrifttype trenger mer enn disse størrelsene, ikke mindre; Apples retningslinjer sier at du bør gå større når en egen skrifttype har en tynn vekt.

De vanlige karusellstørrelsene er alle 1080 px brede (1080 × 1350 for LinkedIn og Instagram 4:5, 1080 × 1440 for Instagram 3:4, 1080 × 1920 for TikTok), så disse størrelsene fungerer på alle plattformer. De nøyaktige målene for hver app finner du i karusellstørrelser for alle plattformer.

Hvilke skrifttyper fungerer best for karuseller?

Den beste skrifttypen for en karusell er den folk ikke legger merke til mens de leser. Noen regler som gjelder på alle plattformer:

• To skrifttyper er nok. Én til overskrifter, én til alt annet. Bruk størrelse og vekt for resten av hierarkiet, ikke en tredje skrifttype.
• La overskriftsskriften bære personligheten. En serif, en tung grotesk eller en smal displayskrift fungerer for noen få store ord.
• Hold brødtekstskriften enkel. Åpne bokstavformer, en romslig x-høyde (høyden på de små bokstavene) og en solid normalvekt. De fleste rene sans serif-skrifter holder.
• Unngå tynne og lette vekter i små størrelser. Apples retningslinjer advarer om at vektene Ultralight, Thin og Light er vanskelige å se, særlig når teksten er liten.
• Spar skriveskrift og store bokstaver til noen få ord. En håndskrevet skrifttype eller en linje i store bokstaver er tregere å lese enn små bokstaver. Greit for en kort overskrift, slitsomt for et helt avsnitt.
• Hold dem like på hver slide, og på hver karusell. Folk lærer seg utseendet ditt, og en merkevarepakke tar vare på skrifttypene og fargene til hver nye karusell.

Skriftpar som holder på mobilen

Par fra den gratis KI-generatoren for fontkombinasjoner. Alle er Google Fonts, gratis å bruke kommersielt.

Hvor mye kontrast trenger karuselltekst?

Kontrast er forskjellen i lyshet mellom teksten og det som ligger bak den, skrevet som et forhold fra 1:1 (ingen) til 21:1 (svart på hvitt). Nettets standard for universell utforming, WCAG 2.2, krever minst 4,5:1 for tekst, og 3:1 for stor tekst: 18 punkter, eller 14 punkter i fet skrift. Ifølge WCAG gjelder det samme for bilder av tekst, og hver slide i en karusell er et slikt bilde. Bare logoer og tilfeldig tekst er unntatt: ord som er ren dekorasjon, eller som tilfeldigvis er med på et foto. Overskriften og brødteksten på en slide er ingen av delene.

WCAG setter 18 typografiske punkter til omtrent 24 px på en skjerm, de 24 skjermpunktene i tabellen ovenfor. På en slide som en mobil viser i en tredjedel av størrelsen, blir det omtrent 72 px (eller omtrent 56 px i fet skrift). Overskrifter i den størrelsen klarer seg altså med 3:1. Alt som er mindre, også brødteksten din, trenger 4,5:1.

Eksempler på kontrast for karusellfarger

Forholdene er regnet ut med WCAG-formelen for nøyaktig disse fargene. Oransjen viser den vanlige løsningen: behold fargen, bytt teksten på den.

• Tekst på et foto endrer kontrast fra bokstav til bokstav. Legg ordene på en ensfarget flate, eller gjør fotoet bak dem mørkere, og sjekk det lyseste punktet bak teksten.
• Merkevarefarger fungerer ofte dårlig som tekstfarge. Bruk dem til bakgrunner, former og ett enkelt aksentord, og sett teksten i den mørke eller lyse nøytrale fargen din.
• Ha litt margin. 4,5:1 er minimum på en god skjerm. Folk leser karuseller i sollys, med lysstyrken skrudd ned. Et høyere forhold koster ingenting.

Hvor mye tekst bør det være på én slide i en karusell?

Mindre enn du tror. Får ikke ordene plass i størrelsene ovenfor, rommer sliden for mye.

• Én idé per slide. En overskrift som sier poenget, og en linje eller to som underbygger det.
• En kort forside. 12 ord eller færre er målet aiCarousels’ sjekk Klar til å poste? teller for den første sliden.
• Del opp, ikke krymp. Når en slide leses som et helt avsnitt, gjør du den om til to slides. De fleste plattformer gir deg plass: Instagram tar opptil 20.
• Korte lister. Noen få punkter per slide, hvert på én linje.

I aiCarousels kan du stille inn dette før noe er skrevet: Flere valg › Ord per slide har Auto, Slagkraftig (færrest ord), Balansert og Detaljert. Mens du redigerer, får tekst som ikke får plass i en lesbar størrelse, en rød etikett, For langt for denne boksen, i stedet for å krympe, og Forkort så den passer korter den ned med din stemme. Det er Smart teksttilpasning. Eller bytt sliden til et oppsett med mer plass: ordene dine følger med.

Er fet skrift med Unicode dårlig for skjermlesere?

Det kommer an på hvor den fete skriften er.

• På en slide: den fete skriften er skrifttypens egen fete vekt, tegnet inn i bildet. Den ser lik ut for alle som kan se den. Ikke noe problem.
• I en bildetekst: den «fete skriften» du limer inn fra et tekstformateringsverktøy, er ikke fet i det hele tatt. Det er et annet sett med tegn, Mathematical Alphanumeric Symbols (U+1D400 til U+1D7FF), laget for matematikk. Unicode anbefaler at de ikke brukes i stedet for ekte formatering. Skjermlesere kan hoppe over dem eller lese opp noe sånt som «mathematical sans-serif script t», som den britiske organisasjonen for funksjonshemmede Scope forklarer.

Hold derfor formaterte bokstaver til noen få ord, og aldri på et navn, en emneknagg eller setningen folk må forstå. Hvordan du gjør det i hver app, står i fet skrift på LinkedIn og i verktøyet for fet skrift på Instagram.

Endrer skrifttyper og tekststørrelser seg på LinkedIn, Instagram og TikTok?

Størrelsene ovenfor gjelder overalt, fordi alle slidene er 1080 px brede. Det som endrer seg, er hva som ligger oppå dem:

• TikTok og slides i 9:16: knappene i appen og bildeteksten dekker kantene av sliden. Hold ordene unna dem. aiCarousels tegner opp disse områdene når du slår på Vis sikkerhetssoner.
• Instagram: slidetelleren sitter øverst til høyre og prikkene under bildet. La det være margin ved kantene, og skriv alternativ tekst for hver slide.
• LinkedIn: karusellen er et PDF-dokument. Sidestørrelse, forside og selve PDF-en gjennomgås i designtips og spesifikasjoner for LinkedIn-karuseller.

Et eksempel: en karusell bygget på disse reglene

Seks slides i 4:5. Store overskrifter, én linje brødtekst på hver, mørkt på lyst og ett og samme skriftpar fra forsiden til den siste sliden.

Slik stiller du inn skrifttyper, tekststørrelse og kontrast i aiCarousels