Come rendere responsive la tipografia

La tipografia responsive mantiene il titolo leggibile e adeguatamente evidente quando cambia lo spazio circostante. Quella fluida varia continuamente la dimensione entro un intervallo; quella basata sui breakpoint la cambia a larghezze scelte. Entrambe richiedono limiti e una colonna adatta al contenuto. Ridurre il font sul telefono è solo una parte del lavoro. Un titolo può stare nel contenitore e sembrare comunque stretto, spezzarsi male o sopraffare il paragrafo esplicativo.

Considera il titolo fittizio «Un modo più sereno di gestire progetti complessi». Può essere composto su due righe in una pagina ampia, ma diventare cinque righe dense sullo stretto, con «complessi» isolato in fondo. La risposta non è automaticamente un font minore: la colonna può essere troppo stretta, la famiglia molto larga o un a capo desktop può imporre la forma sbagliata.

GOV.UK ha cambiato il testo piccolo, non solo i titoli grandi

Un controesempio a «riduci tutto sul mobile» viene da GOV.UK. La sua scala attuale mantiene il corpo da 19px anche sugli schermi piccoli, mentre un titolo extra large passa da 48px a 32px. I ruoli rispondono diversamente perché hanno compiti di lettura diversi.

Nella spiegazione della revisione tipografica, il team riferisce preoccupazioni della comunità sul ridimensionamento dei testi piccoli e sull’impatto per persone con difficoltà visive. L’implementazione attuale è il riferimento dei valori qui usati; l’articolo precedente spiega la motivazione.

Su una pagina prodotto, conviene separare due decisioni spesso unite. Un titolo espressivo può richiedere meno peso visivo restringendosi. Istruzioni, condizioni e paragrafi richiedono comunque lettura comoda. Applicare lo stesso moltiplicatore a ogni ruolo può risolvere il titolo creando un problema nel corpo.

Una regola CSS fluida da provare

Per un titolo espressivo, un punto di partenza illustrativo è:

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

Con radice predefinita di 16px, produce circa 32px a 390px di viewport, 43px a 768px e 63px a 1440px. La proprietà utile è avere un minimo e un massimo.

Il calcolo presenta due transizioni da verificare. Sotto 400px prevale il minimo di 32px. Oltre circa 1467px prevale il massimo di 64px. Nel mezzo, ogni 100px aggiunti al viewport aumentano il titolo di 3px. Se attorno a 900px compare una riga scomoda, puoi confrontare la colonna con quel ritmo di crescita anziché indovinare una nuova misura mobile.

Tratta la formula come candidata. A una larghezza intermedia il titolo può crescere più in fretta della colonna, aggiungendo una riga anche se lo schermo si allarga. Metti il titolo reale più lungo accanto all’immagine reale prima di accettare la curva. Se fallisce il centro, riduci la crescita o cambia le proporzioni delle colonne; inserire a capo manuali in ogni titolo crea manutenzione.

Una componente in rem non garantisce automaticamente che una regola fluida superi le verifiche di ridimensionamento del testo. Lo zoom del browser modifica sia lo spazio effettivo del viewport sia la dimensione del testo, e la componente legata al viewport può compensare in parte l’ingrandimento. Verifica il risultato renderizzato usando sia lo zoom sia un’impostazione più grande per il testo predefinito. Il requisito è che il contenuto resti leggibile e disponibile, non la semplice presenza di un’unità relativa nel foglio di stile.

Descrivi il disagio prima di cambiare font

Quando un titolo non convince, identifica ciò che vedi. «Troppo grande» è diverso da «troppe righe». «Troppo stretto» può significare lettere che si toccano, righe affollate o tutto il blocco premuto contro l’immagine. Ogni diagnosi suggerisce una correzione diversa.

Leggi ad alta voce e guarda come si divide la frase. Finire una riga dopo una breve congiunzione può interrompere il ritmo; una riga finale cortissima può sembrare casuale. Nessuno dei due è automaticamente un guasto di usabilità, ma possono spiegare l’impressione incompleta.

Copri poi per un momento l’immagine circostante. Se il titolo diventa comodo senza, il problema può essere compositivo anziché soltanto tipografico. Il bordo dell’immagine può far sembrare la colonna più stretta di quanto sia. Un’illustrazione molto attiva può competere con le stesse parole che erano chiare su un fondo vuoto.

Dai un ruolo a ogni livello

Titolo pagina, sezione e scheda fanno lavori diversi. Il primo stabilisce il soggetto; il secondo orienta nell’argomento o nell’offerta; il terzo distingue elementi ripetuti. Non devono crescere tutti con la stessa intensità perché condividono una famiglia.

Nell’esempio di gestione progetti, il titolo principale può essere espressivo. «Tieni le decisioni vicino al lavoro» resta visibile senza competere per la prima attenzione. «Cronologia del progetto» si accorda alla descrizione. Se ogni livello è enorme sul desktop, la pagina sembra una raccolta di banner.

Definisci le relazioni prima dei numeri: cosa si vede prima, quanto testo contiene normalmente e se affianca un’immagine. Poi testa l’esempio realistico più lungo di ogni livello. Funzionare solo col titolo più breve è una dimostrazione, non una regola affidabile.

Non usare la dimensione per compensare parole poco chiare. «Tutto ciò che serve» può essere bellissimo senza identificare la sezione. Se si deve leggere ogni paragrafo per scoprire i contenuti, occorrono parole precise oltre agli spazi.

Fai meritare la larghezza alla colonna

Gli a capo dipendono dallo spazio assegnato. Prima di ridurre il font, verifica il contenitore. Padding laterale, gap, colonna vuota o immagine troppo grande possono sottrarre spazio. Scelte giuste sul largo possono essere rimaste troppo a lungo.

Per il titolo fittizio, confronta due layout stretti con tipografia identica. Nel primo grandi margini comprimono il testo; nel secondo i margini diventano più modesti restando coerenti con la pagina. Il secondo può dare un titolo più calmo senza cambiare affatto dimensione o peso.

Sul largo compare il problema opposto. Lasciare il titolo su tutta la pagina può trasformarlo in una lunga striscia, indebolendo il rapporto col seguito. Una larghezza massima può conservarne la forma editoriale. Sceglila sui titoli reali anziché trattare un conteggio di caratteri come lunghezza di riga garantita.

Ricorda che le lettere non sono ugualmente larghe. Una colonna per dodici lettere strette non accoglie necessariamente dodici larghe. Le unità tipografiche sono punti di partenza, ma le parole renderizzate restano la prova. Conta soprattutto quando un marchio o termine tecnico deve restare intero.

Un intervallo, non una crescita senza fine

Puoi usare pochi cambi discreti oppure una scala fluida. Entrambi funzionano con limiti sensati. La domanda è cosa accade fra le viste progettate deliberatamente.

La lezione web.dev spiega le dimensioni fluide e avverte contro le sole unità viewport. Il principio è che leggere richiede più della scelta del font. Conserva una componente relativa e prova zoom e preferenze del lettore.

Guarda il centro dell’intervallo. Buoni estremi possono nascondere un blocco scomodo a tre righe. Cambiare colonna o ritmo può servire più di un altro salto brusco. La regola deve restare comprensibile per chi cambierà il testo.

Cura lo spazio dentro e attorno alle parole

Interlinea: tieni unita la frase

L’interlinea fa sentire un titolo multilinea come una sola unità leggibile. Troppo poca può far collidere visivamente le righe, soprattutto maiuscole alte e discendenti. Troppa può separarle tanto che la frase sembri un insieme di etichette estranee.

Confronta le forme effettive delle lettere, non soltanto i valori nel pannello degli stili. Un carattere con minuscole alte può apparire affollato con un’interlinea che funziona per un altro font. Un peso più marcato può far sembrare gli spazi più piccoli, perché aumenta la quantità di forme scure sulla pagina. Anche i caratteri accentati possono rivelare che la line box era troppo stretta per il campione originale.

Durante la revisione, usa un titolo che combini maiuscole, minuscole e punteggiatura. «LAVORA MEGLIO» non sostituisce bene la frase con maiuscole e minuscole che apparirà davvero: nasconde diverse forme importanti. Se la pagina supporta più lingue, il test dei titoli dovrà includere anche i rispettivi sistemi di scrittura.

Giudica separatamente lo spazio sotto il titolo. Aumentare l’interlinea per allontanare il paragrafo cambia l’interno e può dare l’effetto sbagliato. Assegna un valore distinto alla distanza titolo-paragrafo e verifica il legame.

Spaziatura: conserva le forme delle parole

La spaziatura fra lettere merita attenzione quando il titolo sembra compresso pur avendo righe comode. Un valore fortemente negativo può risultare drammatico in una grande composizione statica, poi scomodo in piccolo. La stessa impostazione può apparire diversa anche cambiando peso.

Parti dalla spaziatura normale del carattere e confronta piccoli aggiustamenti. Osserva le combinazioni di lettere tonde, tratti diagonali e aste verticali ripetute, senza giudicare soltanto la prima parola. Una modifica che dà respiro a «sereno» può far apparire troppo distanziata un’altra parte della frase.

Mantieni coerenti le forme delle parole. Troppa spaziatura positiva può rallentare il riconoscimento e trasformare la frase in caratteri isolati. Aumenta anche la larghezza totale, creando potenzialmente l’a capo da eliminare. Con titoli già lunghi, spaziatura e colonna vanno valutate insieme.

Non trattare allo stesso modo i titoli tutti in maiuscolo e quelli con la normale combinazione di maiuscole e minuscole. Un breve soprattitolo maiuscolo può beneficiare di una spaziatura leggermente maggiore, mentre un titolo lungo richiede spesso un trattamento più sobrio. La scelta deve sostenere il ruolo del testo: uno stile copiato da una piccola etichetta raramente funziona come regola per il titolo principale.

A capo: evita soluzioni fragili

Un a capo deliberato può migliorare una composizione ma renderla fragile. Se dividi dopo «gestire» nel nostro titolo, le parole finali possono funzionare bene sul largo. Su una larghezza minore la prima parte potrebbe già andare a capo, producendo una riga aggiuntiva inattesa.

Prima di aggiungere ritorni manuali, prova larghezza e scala. Se restano importanti, documenta le condizioni in cui si applicano e controlla cosa succede fuori da esse. Non presumere che un a capo scelto per l’inglese debba restare in ogni traduzione.

Non tenere una frase lunga indivisibile solo per proteggere una forma preferita. Impedire ogni ritorno può spingere il testo fuori dal contenitore o richiedere dimensioni illeggibili. Limita le unioni ai casi in cui dividere danneggia il senso, come un valore breve con unità, e ricontrolla il resto dello spazio.

Se l’ultima riga è cortissima, valuta una modifica senza perdita di significato. Togliere un’espressione inutile migliora frase e layout. Ma non sacrificare limiti di prodotto, qualificazioni importanti o parole necessarie a riconoscere l’offerta.

Colore e peso sostengono la gerarchia

Un titolo grande non ha bisogno di tutti gli strumenti di enfasi contemporaneamente. Un peso marcato, una spaziatura stretta, un gradiente brillante e un’ombra forte possono competere all’interno dello stesso blocco. Decidi quale trattamento gli dà risalto e mantieni sobri gli altri.

In una pagina con un’illustrazione colorata, un titolo scuro a tinta unita può rendere più chiaro l’ordine di lettura. Se il design prevede un gradiente delicato, verifica che la sua parte più chiara resti leggibile sullo sfondo. Un titolo leggibile alle dimensioni originali può perdere contrasto quando viene ridotto per uno schermo più piccolo o affiancato a un’immagine dai colori brillanti.

Distingui le informazioni secondarie attraverso dimensione, peso e posizione prima di renderle molto pallide. Un sottotitolo più discreto deve restare facile da leggere. Lo stesso vale per didascalie ed etichette: renderle quasi invisibili non crea una gerarchia utile, ma sottrae informazioni.

Confronta un colpo d’occhio e una lettura prolungata. Il primo dovrebbe stabilire il soggetto principale, la seconda mostrare i dettagli senza fatica. Se tutti i titoli gridano ugualmente, ridurre alcuni pesi o dimensioni può fare più di aggiungere un colore d’accento.

Verifica il font realmente caricato

Il design può cambiare quando il font previsto diventa disponibile o non riesce a caricarsi. Larghezze diverse possono cambiare righe e spostare contenuti vicini. Includi il fallback nella revisione, senza presumere che ogni visitatore veda subito la stessa tipografia.

Durante la revisione in sviluppo, chiedi quale font venga effettivamente visualizzato e se il peso previsto sia disponibile. Richiedere un peso assente dal file può produrre un risultato inatteso. Se il titolo appare insolitamente pesante o stretto, verifica il file del font prima di compensare con modifiche alla spaziatura.

Osserva le conseguenze sul layout quando il testo cambia forma. Il paragrafo si sposta bruscamente verso il basso? Un badge si sovrappone al titolo? Un hero ad altezza fissa taglia l’ultima riga? Queste osservazioni sono più utili del semplice «il font sembra diverso», perché identificano le condizioni che il layout deve gestire.

Il font di fallback non deve essere visivamente identico a quello del marchio, ma deve preservare l’usabilità della pagina. Lascia abbastanza flessibilità perché il titolo occupi un numero diverso di righe senza compromettere la sezione. Anche quando la resa precisa del marchio è importante, deve convivere con condizioni di caricamento variabili.

Una revisione compatta dei titoli

Scegli tre titoli: quello principale, un titolo di sezione lungo e il titolo di scheda più lungo fra quelli normalmente previsti. Esaminali con i contenuti circostanti, non come campioni isolati. Controlla una vista stretta, una intermedia e una ampia, poi ridimensiona la finestra fra queste misure osservando eventuali cambiamenti bruschi.

A ogni vista leggi la frase completa. Verifica significato degli a capo, comodità degli spazi interni e distinzione dal paragrafo. Aumenta poi lo zoom e ripeti la lettura essenziale. Osserva il risultato anziché presumere che una tecnica garantisca il comportamento.

Come prova di manutenzione, usa anche il titolo alternativo «Un modo più sereno di gestire progetti tra team distribuiti». Non stai scegliendo definitivamente quel testo: stai verificando se il componente può accogliere una ragionevole modifica editoriale senza correzioni su misura.

Documenta la decisione con parole semplici: «Il titolo può occupare una riga in più sugli schermi stretti; conserva la frase intera e lascia crescere la sezione». Questa indicazione dura più del tentativo di preservare a ogni dimensione il numero esatto di righe di uno screenshot. Spiega a chi modificherà il testo che cosa conta nel design e che cosa può variare.

Una richiesta precisa in OpenDesign

L’anteprima HTML e le viste desktop, tablet e mobile di OpenDesign aiutano a confrontare lo stesso titolo fra layout. Per una revisione mirata, identifica titolo e disagio osservato. Per soli spazi o proprietà supportate può bastare l’editing manuale; descrivi invece una richiesta strutturale in chat con i vincoli previsti.

Per esempio, chiedi di mantenere le parole e il carattere, allentare la spaziatura troppo stretta fra le lettere e consentire una riga in più nella vista stretta. La revisione resta così concentrata sulla tipografia. Una richiesta vaga come «Rendi più premium tutto l’hero» potrebbe cambiare illustrazione, colori e testo senza risolvere il problema di lettura iniziale.

Dopo la modifica, torna a tutti e tre i titoli della selezione. Uno stile condiviso può influenzare più del titolo aperto. Confronta le viste pertinenti e conferma che il testo di supporto conservi il ruolo previsto.