Tipografia

Funzionalità web: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() e clamp() Unità viewport

Best practice generali

  • Utilizza numeri senza unità per line-height (ad es. 1.5) per garantire il ridimensionamento relativo durante l'ereditarietà delle dimensioni dei caratteri.
  • Utilizza overflow-wrap: break-word (o anywhere) per contenere URL lunghi.
  • NON utilizzare px per le dimensioni del carattere. Preferisci rem per rispettare le preferenze relative alle dimensioni dei caratteri del browser dell'utente (dimensioni dei caratteri principali) o em/percentuali per il dimensionamento contestuale.

Leggibilità

  • Evita righe di testo lunghe: limita i blocchi di paragrafi a una larghezza massima di 80 caratteri.
  • Evita i fiumi di spazi vuoti: evita text-align: justify perché può rendere il testo più difficile da leggere. Se devi utilizzarlo, combinalo con hyphens: auto per evitare spazi vuoti eccessivi tra le parole.
  • Non utilizzare caratteri decorati: evita i caratteri tipografici in corsivo per i contenuti di lettura principali.
  • Non fare affidamento sulle lettere maiuscole per dare enfasi: preferisci il grassetto per l'enfasi visiva e utilizza <em>/<strong> quando l'enfasi è semantica.
  • Limita l'enfasi in generale: l'enfasi perde significato quando è ovunque. Applicala solo dove cambia il modo in cui i contenuti devono essere letti.
  • Supporta le preferenze di zoom degli utenti: consenti agli utenti di ridimensionare il testo fino al 200% senza perdita di contenuti o funzionalità.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Testo a capo

  • Utilizza text-wrap: balance per titoli bilanciati e contenuti simili a titoli (ad es. <th>)
  • Utilizza text-wrap: pretty per il corpo del testo in formato lungo (paragrafi, citazioni ecc.)
  • Utilizza text-wrap: balance o text-wrap: pretty in modo deliberato, NON applicarlo su * perché comporta un costo in termini di prestazioni.
  • Evita text-wrap: balance sugli elementi con una casella visibile (sfondi, bordi, ombre e così via) perché non modifica la larghezza del contenitore, ma influisce solo sul modo in cui il testo va a capo all'interno di quella larghezza. Questo può lasciare uno spazio vuoto alla fine del container, il che di solito non è auspicabile.

Tipografia adattabile

  • SÌ: combina unità relative all'area visibile e relative ai caratteri in clamp() per dimensioni dei caratteri che si adattano alle dimensioni dell'area visibile, assicurandoti al contempo che rimangano entro un intervallo desiderato. Ad esempio: clamp(2rem, 1rem + 5vw, 4rem). Regola la proporzione delle unità relative alla visualizzazione e al carattere per controllare la velocità con cui cambia la dimensione del carattere.
  • NON utilizzare vw da solo per font-size senza clamp(), in quanto può ridimensionare il testo in modo che sia troppo piccolo o troppo grande su schermi estremi.