Basi di tipografia: dimensione, peso, spaziatura e ritmo

Le basi di tipografia si riducono a sei decisioni: la dimensione di ogni porzione di testo, il suo peso, l’interlinea, la spaziatura tra le lettere, l’allineamento e la lunghezza della riga. Se le azzecchi, quasi qualsiasi carattere decente sembra professionale; se le sbagli, anche il miglior font del mondo sembra da dilettanti. Ognuna ha un valore predefinito sensato, indicato qui sotto, da cui puoi allontanarti di proposito.

Dimensione: usa una scala tipografica

Scegliere le dimensioni una alla volta porta a una pagina piena di dimensioni quasi uguali e senza un ordine chiaro. Una scala tipografica risolve il problema: parti da una dimensione di base e moltiplica per lo stesso rapporto a ogni passo. Il rapporto dà il carattere. Rapporti piccoli, come 1,2, sembrano calmi e compatti; quelli grandi, come 1,5, sembrano drammatici ed editoriali.

:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }

Nei post social la tela è più grande, quindi i numeri crescono ma l’idea è la stessa. Su un post largo 1080 pixel, un titolo di circa 90 a 120 pixel e una riga di dettaglio di circa 40 a 56 mantengono un salto netto tra i due e si leggono su un telefono.

Peso: meno pesi, passi più chiari

Il peso è lo spessore dei tratti, di solito numerato da 100 (thin) a 900 (black), con 400 come regular e 700 come bold. Due o tre pesi bastano per la maggior parte dei design. La chiave è che pesi vicini devono sembrare diversi: regular contro bold si legge come un contrasto voluto, regular contro medium spesso sembra un errore.

Interlinea: spazio tra le righe

L’interlinea è la distanza tra una riga e la successiva. Il testo corrente ha bisogno d’aria per essere letto comodamente: circa 1,4 a 1,6 volte la dimensione del font è un intervallo affidabile. I titoli grandi ne richiedono meno, circa 1,0 a 1,2, perché a grandi dimensioni gli spazi sembrano molto più ampi di quanto siano. Le righe lunghe richiedono un po’ più di interlinea di quelle corte, così l’occhio trova l’inizio della riga successiva. Interlinea e lunghezza della riga approfondisce.

Spaziatura tra le lettere: di solito lasciala com’è

I caratteri sono spaziati dai loro designer per le dimensioni previste, quindi il testo corrente raramente va regolato. Due eccezioni meritano di essere conosciute. I titoli grandi spesso stanno meglio leggermente più stretti, con un piccolo valore negativo come da -0.01em a -0.02em. Il testo in maiuscolo e le etichette piccole richiedono il contrario: un po’ di spazio in più, circa da 0.05em a 0.1em, perché le maiuscole sono state disegnate per stare accanto alle minuscole. La spaziatura tra le lettere spiega i dettagli.

Allineamento

Il testo allineato a sinistra, con il margine destro irregolare, è la scelta predefinita per un motivo: ogni riga inizia nello stesso punto, quindi l’occhio la trova facilmente. Il testo centrato si adatta ai pezzi brevi, come un titolo, una citazione o un invito, e diventa faticoso oltre poche righe. Il testo giustificato sembra ordinato in stampa, dove il software sa sillabare bene, ma sul web spesso apre spazi irregolari tra le parole.

Lunghezza della riga: la giustezza

La lunghezza di una riga, la giustezza, conta quanto la sua dimensione. Righe troppo lunghe rendono difficile trovare la successiva; righe troppo corte spezzano il ritmo di lettura con continui ritorni a capo. Un intervallo di circa 45 a 75 caratteri per riga è quello raccomandato più spesso per il testo corrente. Sul web, l’unità ch lo rende facile.

article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}

Ritmo: una spaziatura che raggruppa

Lo spazio dice ai lettori cosa va insieme. Un titolo dovrebbe stare più vicino al paragrafo che introduce che a quello precedente, quindi metti più spazio sopra i titoli che sotto. Mantieni costante la spaziatura tra i paragrafi, e usa un’unica unità di spaziatura, spesso basata sull’interlinea del testo corrente, ovunque. Quando lo spazio è usato con coerenza, la pagina acquista un ritmo che la fa sembrare calma anche quando è piena. La gerarchia visiva parte da qui.

1. 1

   Scegli una dimensione per il testo

   16 pixel o più sugli schermi; molto di più nei post social.

2. 2

   Scegli un rapporto di scala

   1,2 per un effetto calmo e compatto, 1,25 per quasi tutto, 1,333 o più per un dramma editoriale.

3. 3

   Imposta due pesi

   Regular per la lettura, bold o semibold per enfasi e titoli.

4. 4

   Imposta le interlinee

   Circa 1,5 per il testo corrente, circa 1,1 per i titoli grandi.

5. 5

   Limita la giustezza

   Circa 65 caratteri per il testo corrente.

6. 6

   Spazia con un’unità

   Un solo passo di spaziatura, riutilizzato, con più spazio sopra i titoli che sotto.

Con queste basi al loro posto, la scelta del carattere diventa la parte divertente e non la soluzione a un problema. Inizia da gli abbinamenti di font e serif o sans serif.