Quanto deve essere grande il testo su una miniatura?

La risposta breve

Su una tela da 1280 × 720, fai il testo più piccolo che vuoi far leggere alto almeno 72 pixel, cioè un decimo dell'altezza dell'inquadratura. Novanta pixel sono comodi. Sotto i 48 pixel circa, il testo smette di essere testo e diventa trama.

Quei numeri non sono una preferenza stilistica. Vengono dal posto più piccolo in cui la tua miniatura viene mostrata, e l'aritmetica che ne segue è tutto l'argomento. I consigli di YouTube su miniatura e titolo arrivano fino a «fai il testo grande»; tutto quello che segue è cosa succede quando chiedi quanto.

Dove viene mostrata davvero la tua miniatura

Una miniatura si disegna a 1280 pixel di larghezza e si mostra a tutt'altro. Queste sono le larghezze a cui la renderizza il tool di anteprima, allineate ai layout che usa YouTube:

Due gruppi, e per questa domanda ne conta uno solo. Le superfici di navigazione stanno intorno al 28% della tua tela. Le liste dei suggeriti — dove chi sta già guardando qualcosa decide cosa guardare dopo — stanno al 12,5%. Ogni regola qui sotto è fissata da quel secondo numero, perché il testo che sopravvive lì sopravvive ovunque.

Cosa fa questo al tuo titolo

Moltiplica l'altezza del testo per quelle due percentuali e la domanda si risponde da sola.

Nove pixel è più o meno il punto in cui una parola corta in un peso pesante smette di essere leggibile e comincia a essere indovinabile. Sei è il punto in cui non è più né l'una né l'altra. È tutto qui il motivo per cui la risposta è 72 e non 48: a 48 il tuo testo sembra generoso sulla tela e nella colonna dei suggeriti è sparito.

Quello che sopravvive davvero è lo spessore del tratto

L'altezza è il numero che chiedono tutti, ma non è la proprietà che cede per prima. La prima a cedere è lo spessore del tratto, cioè quanto sono spesse le linee di cui sono fatte le lettere.

Al 12,5%, un tratto che nel tuo file misura 8 pixel arriva a un pixel sullo schermo. Un peso light o thin, i cui tratti a quella dimensione saranno 4 o 5 pixel, arriva a mezzo pixel, viene mediato con quello che ha dietro e diventa grigio. È per questo che un peso pesante a 72 pixel batte regolarmente un peso leggero a 96: non è più forte, è ancora lì.

Versione pratica: usa il peso più pesante del tuo carattere che somigli ancora a quel carattere, e tratta gli 8 pixel di tratto come un limite minimo esattamente come tratti i 72 pixel di altezza.

Quante parole ci stanno, in numeri

Il numero di parole non è una domanda separata dalla dimensione: si scambiano sulla stessa riga, e lo scambio si calcola.

Un carattere maiuscolo in grassetto occupa in larghezza circa sei decimi della sua altezza. A 72 pixel sono circa 43 pixel per carattere. La larghezza utile non è tutta 1280 ma la parte che sopravvive alle safe zone, diciamo 1024. Dividi e ottieni circa 23 caratteri su una riga.

Ventitré caratteri sono tre parole corte, o due lunghe. È questo il limite vero, ed è per questo che il consiglio di tenere il testo delle miniature su tre o quattro parole continua ad avere ragione: non è una regola sulla soglia di attenzione, è quello che ci sta a una dimensione leggibile.

Spiega anche perché una parola lunga costa cara. Una sola parola da dodici caratteri si mangia mezza riga da sola, e la reazione abituale — rimpicciolirla perché ci stia — è proprio la mossa che spinge tutto il titolo sotto la soglia di leggibilità.

Una riga o due

Il limite dei 23 caratteri è per riga, non per miniatura, quindi una seconda riga è il modo onesto di far stare cinque o sei parole senza rimpicciolire niente. Costa spazio verticale, e ce n'è in abbondanza: due righe da 72 pixel più l'interlinea fanno circa 160 pixel, poco più di un quinto dell'altezza dell'inquadratura.

Quello che costa davvero è l'ordine di lettura. Una riga si coglie come una forma unica; due righe si leggono, in sequenza, e leggere richiede un tempo che chi scorre un feed non spende. Una seconda riga si guadagna il posto quando porta un'idea davvero separata: un'impostazione e una conclusione, un soggetto e un numero. Non se lo guadagna quando è la stessa frase spezzata per farla stare.

Se ti accorgi di aver bisogno di tre righe, il problema è il testo e non il carattere. Tre righe a una dimensione leggibile riempiono metà dell'inquadratura, non lasciano spazio all'immagine che quelle parole dovrebbero etichettare, e verranno scorse invece che lette.

Contorni e ombre, e quando si ritorcono contro

Un contorno serve a separare le lettere da uno sfondo che le sta contrastando, e alle dimensioni piccole fa anche un'altra cosa: ispessisce il tratto, che è esattamente quello che il rimpicciolimento stava togliendo.

Smette di aiutare quando diventa spesso al punto da chiudere gli occhielli, cioè gli spazi racchiusi in a, e, o e l'apertura della r. Una volta che quelli si riempiono, la parola diventa una fila di macchie, e a 9 pixel una fila di macchie è illeggibile in un modo in cui un testo sottile almeno non è. Il fallimento è invisibile al 100% di zoom, che è dove i contorni vengono scelti di solito.

L'ombra è lo strumento più gentile per lo stesso lavoro, perché aggiunge separazione senza aggiungere alla lettera. Se lo sfondo è così affollato che non basta nessuno dei due, la risposta non è un contorno più spesso: è scurire o sfocare l'area dietro il testo, che non costa niente a nessuna dimensione.

Il colore smette di funzionare prima della dimensione

A nove pixel, il contrasto di tinta non è contrasto. Un testo rosso su sfondo blu sembra vivace sulla tua tela e si legge come un unico valore fangoso una volta che i due vengono mediati in pochi pixel ciascuno.

Quello che sopravvive è il contrasto di luminosità: chiaro su scuro, scuro su chiaro. Un controllo utile è guardare il progetto in scala di grigi: se il testo sparisce quando togli il colore, si stava reggendo sul colore, e il colore è la prima cosa che la scala porta via.

Il controllo che sostituisce l'aritmetica

Tutto questo è un surrogato di una cosa sola: guardare il progetto alla dimensione a cui verrà letto. L'aritmetica serve perché ti dice da dove partire, ma l'unico test affidabile è vedere la miniatura dentro un feed, accanto ad altre miniature, al 13%.

Coglie anche quello che l'aritmetica non può. Un titolo può rispettare tutti i numeri di questa pagina e perdere lo stesso perché la miniatura accanto sta facendo la stessa cosa in modo più chiaro. Mettere il tuo progetto in un feed vero a dimensione vera costa circa un minuto con il tool di anteprima, e i fallimenti che mostra sono quelli che stavano per succedere davanti a un pubblico.

I due errori che causano quasi tutto questo

Sono entrambi abitudini dell'editor più che giudizi di design.

Il primo è progettare al 100% di zoom. A grandezza piena un testo da 72 pixel sembra enorme e la tentazione è rimpicciolirlo e aggiungere una seconda riga. Ogni decisione presa a quel livello di zoom è presa a una dimensione che nessuno spettatore vedrà mai.

Il secondo è scrivere il titolo dentro la miniatura. Su una card del feed il titolo sta proprio accanto o sotto l'immagine, a una dimensione che l'interfaccia garantisce leggibile. Ripeterlo nella miniatura spende l'area più cara dell'inquadratura per duplicare qualcosa che lo spettatore sta già leggendo — ed è di solito quello che ha spinto il testo a una dimensione illeggibile in primo luogo. Su come funziona la coppia c'è altro nella guida sul click-through rate.

Gli Shorts sono più stretti, quindi il limite è più basso

Un'inquadratura verticale ti dà più altezza e meno larghezza, e il testo è limitato dalla larghezza. La stessa riga da 23 caratteri diventa circa 13 caratteri in un 9:16 alla stessa altezza dei caratteri: due parole corte, non tre.

Anche le tessere verticali vengono mostrate piccole. Accorcia le parole invece di rimpicciolire il carattere: la seconda opzione è quella che finisce illeggibile. L'inquadratura e le sue superfici sono nella guida sulle miniature degli Shorts.

Le domande che si fanno tutti