Testo tutto maiuscolo: quando funziona e quando no

Il testo tutto maiuscolo aiuta quando è breve: un occhiello sopra un titolo, un’etichetta, un pulsante, una data o un titolo di due o tre parole. Fa danni quando si allunga. Le maiuscole hanno tutte la stessa altezza, quindi una parola in maiuscolo diventa un semplice rettangolo invece di una forma riconoscibile, e una frase intera si legge più lentamente e sembra gridata. Usate con parsimonia e con un po’ di spaziatura in più, le maiuscole portano ordine e autorevolezza; usate per tutto, appiattiscono la gerarchia.

Perché il maiuscolo si legge peggio

Le lettere minuscole hanno aste ascendenti (b, d, h, k) e discendenti (g, p, y). Insieme danno a ogni parola un profilo distintivo, che i lettori esperti usano per riconoscere le parole familiari senza compitarle. In maiuscolo ogni lettera sta tra le stesse due linee. Il profilo diventa una scatola e chi legge deve guardare ogni lettera con più attenzione. Su due o tre parole va bene. Su un paragrafo stanca.

Quando il maiuscolo funziona

• Occhielli e sopratitoli: una piccola categoria o una data sopra il titolo, come NOVITÀ o EPISODIO 12. Le maiuscole dicono a chi legge che è un’etichetta, non il contenuto.
• Navigazione e pulsanti: parole brevi e facili da scorrere, dove ogni voce è dello stesso tipo.
• Titoli brevi da una a tre parole: SALDI, APERTO ORA, ESAURITO. La forma del blocco diventa parte del design.
• Wordmark e loghi: molti loghi efficaci sono in maiuscolo, perché la parola si vede come un’immagine fissa più che leggersi.
• Etichette di dati e intestazioni di tabella: brevi intestazioni in maiuscolo sopra le colonne le tengono distinte dai valori sotto.

Quando il maiuscolo danneggia

I caratteri calligrafici meritano un avvertimento speciale: le loro maiuscole sono disegnate per aprire le parole, non per stare insieme, e una parola in maiuscole calligrafiche è spesso quasi illeggibile. Conta anche il tono. Le maiuscole suonano forti: vanno bene per i saldi e rovinano delle scuse. Se stai scegliendo più in generale lo stile delle maiuscole nei titoli, maiuscole nei titoli: iniziale sola o ogni parola copre le opzioni più discrete.

Quanta spaziatura serve al maiuscolo

I font sono spaziati per le minuscole. Le maiuscole affiancate, con i loro lati dritti e le forme larghe, a spaziatura standard sembrano strette. Aprire il tracking dà a ogni lettera il suo respiro e rende la parola più facile da scorrere. Più il testo è piccolo, più spazio serve. La spaziatura tra le lettere spiega il tracking in generale; per il maiuscolo usa questi punti di partenza.

Le maiuscole grandi possono richiedere anche una crenatura manuale sulle coppie difficili come AV, LT e TY, dove lo spazio standard sembra troppo largo. Tracking e crenatura spiega la differenza tra i due interventi.

Usare text-transform uppercase nel CSS

Scrivi le parole in minuscolo normale nell’HTML e applica le maiuscole con il CSS. Copia, risultati di ricerca e strumenti di traduzione ricevono così un testo naturale, e eviti il rischio che uno screen reader tratti una parola scritta in maiuscolo come una sigla e la compiti. Ti permette anche di cambiare idea più avanti senza riscrivere nulla.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

Imposta anche l’attributo lang della pagina. text-transform segue le regole della lingua, il che conta per parole come la i turca col punto, e il riferimento MDN spiega come viene trattata ogni lingua. Le etichette tradotte sono spesso più lunghe di quelle inglesi e il maiuscolo le allarga ancora, quindi lascia spazio in pulsanti e schede.

Il maiuscolo nei post social

Su un telefono, le maiuscole a corpo piccolo possono reggere meglio delle minuscole piccole, perché le loro forme sono più semplici. Per questo il maiuscolo è una buona scelta per i dettagli minuscoli di un post: una data, un nome utente, il numero di pagina in un carosello. Per il titolo usa le maiuscole solo se è cortissimo; altrimenti la minuscola con iniziale maiuscola si legge più in fretta nel momento in cui qualcuno dà un’occhiata al post. Un font per titoli robusto aiuta in ogni caso. Gerarchia del testo nei post social mostra come si incastrano i livelli.

In Gradiently il Designer scrive titoli e dettagli per te e li imposta nel tuo Mark, e ogni parola resta modificabile nello Studio. L’inchiostro automatico mantiene le piccole etichette in maiuscolo leggibili quanto il titolo, scegliendo per ogni riga un testo chiaro o scuro dalla palette del Mark.