Font display: come progettare con la tipografia grande

I font display sono caratteri disegnati per essere usati in grande: titoli, poster, copertine, confezioni e brevi raffiche di parole. I loro dettagli, dal forte contrasto tra tratti spessi e sottili alla spaziatura serrata e alle forme espressive, sono pensati per rendere al meglio in grande e di solito si sfaldano alle dimensioni di un paragrafo. Usa un font display per le poche parole che devono fermare lo sguardo, e un font di testo più sobrio per tutto ciò che si legge dopo.

Questa guida spiega cosa rende display un font, quanto grande impostarlo, come abbinarlo e come evitare che la tipografia grande sembri affollata o datata. Si appoggia sulle basi della tipografia e sulla gerarchia visiva.

Cosa distingue un font display da un font di testo

I font di testo sono costruiti per il comfort su migliaia di parole: forme aperte, tratti solidi, spaziatura generosa e una grande altezza della x, perché le lettere reggano a dimensioni piccole e su schermi scadenti. I font display sacrificano un po’ di tutto questo in cambio di carattere. A 80 px nessuno fatica a vedere le lettere, quindi chi disegna può spingere il contrasto, stringere le larghezze, affilare i dettagli e serrare la spaziatura.

Alcune famiglie esistono in entrambe le versioni: un taglio Text e un taglio Display dello stesso disegno, oppure un unico file variabile con un asse di dimensione ottica che si regola da solo al variare della dimensione. I font variabili spiegano meglio la dimensione ottica.

Tipi di font display e l’atmosfera che creano

I caratteri display si scelgono più facilmente in base alla sensazione che vuoi. Ogni famiglia qui sotto include esempi ampiamente disponibili su Google Fonts, così puoi provarli con le tue parole.

• Serif ad alto contrasto: moda, cultura, editoria. Esempi: Playfair Display, DM Serif Display, Bodoni Moda.
• Sans condensati: urgenza, sport, notizie, poster. Esempi: Bebas Neue, Anton, Oswald.
• Sans larghi ed estesi: tecnologia, brand moderni, calma sicura. Esempi: Syne, Unbounded.
• Morbidi e arrotondati: cordiali, cibo, bambini, benessere. Esempi: Fraunces con il suo asse soft, Fredoka.
• Grotesque pesanti: dichiarazioni forti, lanci, attivismo. Esempi: Archivo Black, Inter Tight nel peso black.
• Script e a mano libera: inviti, artigianato, brand personali, da usare con parsimonia. Esempi: Caveat, Yellowtail.

Quanto grande deve essere il testo display

Abbastanza grande da essere chiaramente la prima cosa che si vede, e abbastanza piccolo da far stare le parole in poche righe. Un’abitudine utile è dimensionare il testo display in rapporto al canvas e non in punti. Su un post da 1080 per 1350, un titolo di due o quattro parole riempie spesso circa il 70-90 per cento della larghezza. In un sito web, il titolo di una hero sta di solito tra tre e sei volte la dimensione del testo corrente.

Sul web, clamp() scala il testo display in modo fluido tra un minimo e un massimo, così è grande sugli schermi larghi senza traboccare sui telefoni. Stringi interlinea e spaziatura tra le lettere man mano che la dimensione cresce: i valori predefiniti sono pensati per testi più piccoli.

.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}

Abbinare un font display a un font di testo

L’abbinamento semplice e affidabile dà a ogni font un solo compito. Il carattere display parla forte per poche parole; il carattere di testo fa il lavoro silenzioso di didascalie, testo corrente, date e prezzi. Falli contrastare in almeno un modo chiaro, come serif contro sans o condensato contro larghezza normale, in modo che non sembrino un quasi uguale. L’abbinamento dei font spiega tutte le regole.

Testo display su gradienti e sfondi movimentati

Il testo grande è il più tollerante che puoi mettere su uno sfondo colorato, perché i tratti spessi mantengono la forma contro il movimento del campo dietro. Il rischio sta nelle parti sottili: le grazie sottilissime e i dettagli fini spariscono nelle zone più chiare o più movimentate di un gradiente. Su sfondi ricchi scegli un carattere display con filetti più robusti, o sali di peso.

In Gradiently un Mark sa dove sono le tue parole: la sua zona più calma si sposta dietro il titolo e i colori vicini alle lettere si approfondiscono o si schiariscono, così anche un testo display sottile regge. I trattamenti del lettering come Contour, Inline ed Extrude danno carattere alle parole display quando il carattere in sé è semplice; gli effetti di testo mostrano quando funzionano.

Errori che fanno sembrare economico il testo display

1. 1

   Spaziatura predefinita a dimensioni enormi

   Il testo grande impostato con i valori del testo sembra allentato. Stringi l’interlinea a circa 1-1,1 e la spaziatura tra le lettere di poco.

2. 2

   Grassetto e corsivo finti

   Quando a un font manca uno stile, strumenti e browser possono simularlo sbavando o inclinando le lettere. Carica i pesi e i corsivi veri.

3. 3

   Stirare il testo per farlo entrare

   Non scalare mai il testo in orizzontale o in verticale. Scegli invece un taglio condensato o largo.

4. 4

   Caratteri di tendenza senza motivo

   Un carattere scelto perché è ovunque in questa stagione invecchia con la stagione. Scegli in base all’atmosfera che ti serve.

5. 5

   Righe vedove nei titoli di due righe

   Una sola parola corta da sola sulla seconda riga indebolisce il titolo. Riscrivi, spezza in un altro punto o usa text-wrap: balance.