Tipografia: font-family, font-size, font-weight, line-height, letter-spacing

La tipografia è una delle parti più importanti del web design. Un sito con testi leggibili e ben gerarchizzati comunica ordine anche con pochi elementi grafici; una tipografia poco curata rende faticosa la lettura.

Esploriamo cinque proprietà CSS fondamentali per controllare la maggior parte dei testi.

1. font-family (Il carattere)

Indica quale tipo di carattere (font) usare. Poiché i dispositivi (Windows, Mac, Android) hanno font preinstallati diversi, si fornisce sempre una lista di fallback separata da virgole, terminando sempre con una famiglia generica (sans-serif, serif, o monospace).

body {
  /* Prova Helvetica, se non c'è prova Arial, se non c'è usa un font senza grazie predefinito */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Le virgolette sono necessarie solo se il nome del font contiene spazi.

In futuro vedremo come caricare font personalizzati esterni (come Google Fonts) per non dipendere da quelli di sistema!

2. font-size (La dimensione)

Mentre un tempo si usavano molto i pixel (px), oggi per questioni di accessibilità e scalabilità si preferiscono quasi sempre unità relative come rem (Relative to Root EM) per la tipografia.

Di default nei browser, 1rem equivale a 16px.

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

.nota-piccola {
  font-size: 0.875rem; /* 14px */
}

3. font-weight (Lo spessore)

Determina quanto è “grasso” o “sottile” il testo. Puoi usare parole chiave (normal, bold) o valori numerici da 100 a 900 in multipli di 100.

• 400 equivale a normal.
• 700 equivale a bold.

.sottotitolo {
  font-weight: 300; /* Molto sottile (Light) */
}

.evidenza {
  font-weight: 800; /* Molto spesso (ExtraBold) */
}

Attenzione: il browser mostrerà questi spessori solo se il font scelto li include effettivamente. Altrimenti cercherà di “falsificarli” ingrassando digitalmente il testo (il che risulta pessimo).

4. line-height (L’interlinea)

L’altezza della riga è fondamentale per la leggibilità. Se le righe sono troppo vicine, l’occhio fa fatica a scorrere la pagina.

Una pratica consigliata è usare un numero senza unità di misura come moltiplicatore della dimensione del testo attuale.

p {
  /* Seleziona un'interlinea pari a 1.5 volte o 1.6 volte il font-size */
  line-height: 1.6; 
}

h1 {
  /* I titoli, essendo molto grandi, hanno bisogno di MENO interlinea per non sembrare slegati */
  line-height: 1.1; 
}

5. letter-spacing e text-transform

Queste due proprietà agiscono su dettagli più fini e si accoppiano spesso insieme.

• text-transform: converte il testo in maiuscolo (uppercase), minuscolo (lowercase) o con iniziali maiuscole (capitalize).
• letter-spacing: aumenta o riduce la distanza tra le lettere (kerning globale).

Quando converti un testo in tutto maiuscolo, spesso conviene aumentare un po’ il letter-spacing per migliorarne la leggibilità.

.etichetta-categoria {
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Aumenta del 5% della grandezza del font */
  font-size: 0.75rem;
  font-weight: bold;
}

Applicare queste regole di base rende i testi più leggibili e il progetto visivamente più coerente.