# Testo tutto maiuscolo: quando funziona e quando no

[Canonical HTML page](https://gradiently.design/it/guide/all-caps-typography)

Le maiuscole danno autorevolezza a un’etichetta e peso a un titolo, ma trasformano un paragrafo in un muro. Ecco dove il maiuscolo ha senso, quanto spaziarlo e come impostarlo bene sul web.

## The short version

- Il testo tutto maiuscolo funziona meglio per etichette brevi, occhielli, pulsanti e titoli di poche parole.
- Le lettere maiuscole hanno la stessa altezza, quindi le parole scritte in maiuscolo perdono il profilo vario che aiuta a riconoscerle in fretta.
- Il maiuscolo vuole più spaziatura tra le lettere: circa 0,08em a 0,12em per le etichette piccole e 0,01em a 0,03em per i titoli grandi.
- Sul web scrivi il testo in minuscolo normale e applica il maiuscolo con il CSS text-transform, così copia, traduzione e screen reader ricevono le parole naturali.
- Testi lunghi, corpo del testo e tutto ciò che è già forte di suo vanno lasciati in minuscolo con la sola iniziale maiuscola.

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.

Un post verticale in cui titolo, data e dettagli sono tutti in lettere maiuscole e si contendono l’attenzione

Tutto in maiuscolo: niente risalta perché tutto urla.

Lo stesso post con solo la data in piccole maiuscole e titolo e dettagli in minuscolo normale

Le maiuscole restano solo per il piccolo occhiello. Titolo e dettagli si leggono più in fretta con la sola iniziale maiuscola.

## 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

### Meglio evitare il maiuscolo

- Corpo del testo e paragrafi
- Titoli più lunghi di circa quattro parole
- Tutti i titoli di una pagina insieme
- Caratteri corsivi calligrafici e decorativi
- Messaggi che devono sembrare calmi o gentili
- Testi legali e condizioni

### Funziona in maiuscolo

- Occhielli ed etichette
- Pulsanti e navigazione
- Titoli da una a tre parole
- Bastoni robusti e caratteri slab
- Saldi, aperture e avvisi urgenti
- Intestazioni di tabelle e grafici

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](https://gradiently.design/it/guide/title-case-vs-sentence-case) 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](https://gradiently.design/it/guide/letter-spacing) spiega il tracking in generale; per il maiuscolo usa questi punti di partenza.

| Uso | Dimensione | Spaziatura tra le lettere |
| --- | --- | --- |
| Etichetta minuscola o occhiello | da 11 a 13 px su schermo, da 28 a 32 px su un post da 1080 px | da 0,08em a 0,12em |
| Pulsante o navigazione | da 14 a 16 px | da 0,04em a 0,08em |
| Sottotitolo in maiuscolo | da 18 a 24 px | da 0,04em a 0,06em |
| Titolo grande in maiuscolo | 48 px e oltre | da 0,01em a 0,03em |
| Parola display enorme | 120 px e oltre | da 0 a 0,02em, controlla le coppie a occhio |

Valori di partenza in em, così la spaziatura scala con la dimensione. Regola a occhio per il tuo font.

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](https://gradiently.design/it/guide/tracking-vs-kerning) 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.

```css
.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;
}
```

La funzione `case` solleva la punteggiatura per centrarla sulle maiuscole. `all-small-caps` offre un’alternativa più discreta alle maiuscole piene.

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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 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](https://gradiently.design/it/guide/headline-fonts) robusto aiuta in ogni caso. [Gerarchia del testo nei post social](https://gradiently.design/it/guide/text-hierarchy-social) mostra come si incastrano i livelli.

Una storia verticale con APERTI ORA in grandi maiuscole, un piccolo occhiello in maiuscolo e una riga di dettaglio in minuscolo normale

Due parole che funzionano in maiuscolo, con i dettagli più lunghi lasciati sotto in minuscolo normale.

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.

## FAQ

### Il testo tutto maiuscolo è più difficile da leggere?

Oltre poche parole, sì. Le maiuscole hanno tutte la stessa altezza, quindi le parole perdono il profilo riconoscibile e richiedono più tempo per essere lette.

### Quanta spaziatura tra le lettere serve al maiuscolo?

Circa 0,08em a 0,12em per le etichette piccole, 0,04em a 0,06em per i sottotitoli e 0,01em a 0,03em per i titoli grandi.

### Meglio scrivere in maiuscolo o usare text-transform uppercase?

Usa `text-transform: uppercase` su testo in minuscolo normale. Copia, traduzione e screen reader riceveranno così le parole naturali.

### I titoli in maiuscolo sembrano urlati?

Quelli lunghi sì. Da una a tre parole in maiuscolo trasmettono sicurezza; una frase intera sembra un urlo.