Font per caroselli, dimensione del testo e contrasto

Che dimensione deve avere il font di un carosello?

Progetta per il telefono, non per il tuo monitor. Un telefono mostra una slide da 1.080 px larga circa 360 punti, un terzo della sua larghezza in pixel (i telefoni grandi la mostrano un po’ più larga). Quindi ogni dimensione che imposti sulla slide finisce per essere circa tre volte più piccola sullo schermo su cui la si legge.

Le linee guida di design di Apple fissano il testo più piccolo su iPhone a 11 punti e la dimensione di lettura predefinita a 17 punti. Moltiplica per tre e hai i numeri per una slide da 1.080 px: circa 33 px come minimo per tutto ciò che va letto, e circa 51 px per un testo comodo da leggere. Il verificatore di PDF per LinkedIn gratuito di aiCarousels segnala come difficile da leggere su telefono il testo sotto i 24 px circa: consideralo il limite minimo per le piccole etichette, come il numero di pagina o il tuo @, non una dimensione per le frasi.

Dimensioni del testo su una slide da 1.080 px, e come diventano sul telefono

Dimensioni della slide divise per tre: un telefono che mostra la slide larga 360 punti. I punti dello schermo sono l’unità di Apple, circa un pixel CSS ciascuno; le WCAG misurano il testo grande in punti tipografici, e i loro 18 pt sono circa 24 punti dello schermo. L’ultima colonna è disegnata a quella dimensione sullo schermo. Dimensioni di Apple: Human Interface Guidelines, Typography, e UI Design Dos and Don’ts.

Lavori su una tela più grande? Scala allo stesso modo: a 2.160 px di larghezza, raddoppia ogni numero. Un font sottile o condensato ha bisogno di dimensioni maggiori di queste, non minori; le linee guida di Apple consigliano di stare più larghi quando un font personalizzato ha un peso sottile.

I formati di carosello più comuni sono tutti larghi 1.080 px (1080 × 1350 per LinkedIn e Instagram 4:5, 1080 × 1440 per Instagram 3:4, 1080 × 1920 per TikTok), quindi queste dimensioni funzionano su ogni piattaforma. Le misure esatte per ogni app sono in dimensioni dei caroselli su ogni piattaforma.

Quali sono i font migliori per i caroselli?

Il miglior font per un carosello è quello che non si nota mentre si legge. Qualche regola che vale su ogni piattaforma:

• Due font bastano. Uno per i titoli, uno per tutto il resto. Per il resto della gerarchia usa dimensione e peso, non un terzo font.
• Lascia la personalità al font dei titoli. Un serif, un grottesco molto nero o un display condensato funziona bene per poche parole grandi.
• Tieni semplice il font del testo. Lettere aperte, un’altezza della x generosa (l’altezza delle minuscole) e un peso regular ben pieno. Quasi tutti i sans serif puliti vanno bene.
• Evita i pesi sottili e light nelle dimensioni piccole. Le linee guida di Apple avvertono che i pesi Ultralight, Thin e Light si vedono male, soprattutto quando il testo è piccolo.
• Corsivi calligrafici e tutto maiuscolo solo per poche parole. Un font scritto a mano o una riga in maiuscolo si leggono più lentamente del minuscolo. Va bene per un titolo breve, stanca in un paragrafo.
• Usa gli stessi su ogni slide, e su ogni carosello. Le persone imparano a riconoscere il tuo stile, e un brand kit conserva font e colori per ogni nuovo carosello.

Coppie di font che reggono sul telefono

Coppie dal generatore di abbinamenti di font gratuito. Sono tutti Google Fonts, gratuiti anche per uso commerciale.

Quanto contrasto serve al testo di un carosello?

Il contrasto è la differenza di luminosità tra il testo e ciò che gli sta dietro, espressa come rapporto da 1:1 (nessuno) a 21:1 (nero su bianco). Lo standard di accessibilità del web, le WCAG 2.2, chiede almeno 4,5:1 per il testo, e 3:1 per il testo grande: 18 punti, o 14 punti in grassetto. Le WCAG dicono che lo stesso vale per le immagini di testo, e ogni slide di un carosello lo è. Sono esclusi solo i loghi e il testo accessorio: parole puramente decorative, o che capitano dentro una foto. Il titolo e il testo di una slide non sono né l’uno né l’altro.

Le WCAG fanno corrispondere 18 punti tipografici a circa 24 px su schermo, i 24 punti dello schermo della tabella qui sopra. Su una slide che il telefono mostra a un terzo della sua grandezza, sono circa 72 px (o circa 56 px in grassetto). Quindi i titoli così grandi possono stare a 3:1. Tutto ciò che è più piccolo, compreso il testo del corpo, ha bisogno di 4,5:1.

Esempi di contrasto per i colori di un carosello

Rapporti calcolati con la formula WCAG per questi colori esatti. L’arancione mostra la soluzione tipica: tieni il colore, cambia il testo sopra.

• Il testo su una foto cambia contrasto da una lettera all’altra. Metti le parole su un riquadro pieno, o scurisci la foto dietro, e controlla il punto più chiaro dietro il testo.
• I colori del brand spesso non funzionano come colori del testo. Usali per sfondi, forme e una parola in evidenza, e scrivi il testo nel tuo neutro scuro o chiaro.
• Tieniti un margine. 4,5:1 è il minimo su un buon schermo. I caroselli si leggono al sole, con la luminosità bassa. Un rapporto più alto non costa niente.

Quanto testo mettere in una slide di un carosello?

Meno di quanto pensi. Se le parole non ci stanno alle dimensioni qui sopra, la slide contiene troppo.

• Un’idea per slide. Un titolo che dice il punto, e una riga o due che lo sostengono.
• Una copertina breve. 12 parole o meno è l’obiettivo che il controllo Pronto a pubblicare? di aiCarousels conta per la prima slide.
• Dividi, non rimpicciolire. Quando una slide sembra un paragrafo, falla diventare due slide. Quasi tutte le piattaforme ti danno spazio: Instagram ne accetta fino a 20.
• Elenchi brevi. Pochi punti per slide, ognuno su una riga.

In aiCarousels puoi deciderlo prima che venga scritto qualcosa: Altre opzioni › Parole per slide offre Auto, Incisivo (il minor numero di parole), Equilibrato e Dettagliato. Mentre modifichi, il testo che non ci sta a una dimensione leggibile riceve un’etichetta rossa Troppo lungo per questa casella invece di rimpicciolirsi, e Accorcia per farlo entrare lo taglia con la tua voce. È l’adattamento intelligente del testo. Oppure passa la slide a un layout con più spazio: le tue parole si spostano con lei.

Il grassetto Unicode è un problema per gli screen reader?

Dipende da dove sta il grassetto.

• Su una slide: il grassetto è il peso bold del font, disegnato dentro l’immagine. Appare uguale a chiunque possa vederlo. Nessun problema.
• In una didascalia: il «grassetto» che incolli da un formattatore di testo non è affatto grassetto. È un altro insieme di caratteri, i Mathematical Alphanumeric Symbols (da U+1D400 a U+1D7FF), pensati per la matematica. Unicode consiglia di non usarli al posto della formattazione vera. Gli screen reader possono saltarli o leggere qualcosa come «mathematical sans-serif script t», come spiega l’associazione britannica per la disabilità Scope.

Quindi usa le lettere stilizzate solo per poche parole, e mai su un nome, un hashtag o la frase che bisogna capire. Come farlo su ogni app lo trovi in grassetto su LinkedIn e nel formattatore di testo Instagram.

Font e dimensioni del testo cambiano su LinkedIn, Instagram e TikTok?

Le dimensioni qui sopra valgono ovunque, perché le slide sono tutte larghe 1.080 px. Cambia ciò che ci sta sopra:

• TikTok e slide 9:16: i pulsanti dell’app e la descrizione coprono i bordi della slide. Tieni le parole lontane da lì. aiCarousels disegna queste aree quando attivi Mostra le zone sicure.
• Instagram: il contatore delle slide sta in alto a destra e i pallini sotto l’immagine. Lascia un margine sui bordi, e scrivi il testo alternativo per ogni slide.
• LinkedIn: il carosello è un documento PDF. Formato della pagina, copertina e PDF sono spiegati in consigli di design e specifiche per i caroselli LinkedIn.

Un esempio: un carosello costruito su queste regole

Sei slide in 4:5. Titoli grandi, una riga di testo per slide, scuro su chiaro, e una sola coppia di font dalla copertina all’ultima slide.

Come impostare font, dimensione del testo e contrasto in aiCarousels