Tipografia

Le WCAG suggeriscono righe non più lunghe di 80 caratteri e un'interlinea di almeno 1.5 dentro i paragrafi. Due proprietà CSS si occupano di entrambe le cose.

Scegliere i caratteri

font-family accetta un elenco di caratteri separati da virgole. Il browser usa il primo disponibile sul dispositivo di chi legge e scende nell'elenco se manca. Chiudi sempre l'elenco con una famiglia generica, serif, sans-serif, monospace o system-ui, così compare qualcosa di sensato qualunque cosa sia installata. I nomi dei caratteri che contengono spazi vanno tra virgolette, come "Noto Sans KR". system-ui usa il carattere dell'interfaccia del sistema operativo, che è ben disegnato, è già sul dispositivo e copre molti sistemi di scrittura.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

Puoi anche caricare un file di carattere dal tuo server con una regola @font-face, o da un servizio di caratteri. I web font danno a una pagina una personalità propria, ma ognuno è un download che fa arrivare il testo più tardi, e i caratteri coreani, cinesi e giapponesi possono pesare diversi megabyte perché contengono migliaia di glifi. Carica solo i pesi che ti servono e tieni un buon ripiego nell'elenco.

Dimensione, peso e interlinea

font-size imposta la dimensione; come spiegava l'unità su colori e unità, rem tiene il testo al passo con le impostazioni di chi legge. font-weight va da 100 (sottile) a 900 (nero), con 400 come normale e 700 come grassetto; le parole chiave normal e bold significano 400 e 700. Un carattere ha solo i pesi che il suo designer ha disegnato, quindi chiedere 300 in un carattere che ha solo 400 e 700 ti dà quello più vicino.

line-height imposta la distanza tra le righe. Dagli un numero semplice senza unità, come 1.6: allora significa 1.6 volte la dimensione del carattere di ogni elemento, così titoli e caratteri piccoli ricevono ciascuno la spaziatura adatta. Un valore con unità, come 24px, viene calcolato una volta sola ed ereditato come lunghezza fissa, troppo stretta per i titoli grandi. Il testo del corpo di solito si legge bene tra 1.4 e 1.7; il criterio di successo WCAG 1.4.8 suggerisce almeno 1.5 dentro i paragrafi. I titoli grandi stanno meglio più stretti, intorno a 1.1-1.3.

Lunghezza delle righe e allineamento

Le righe molto lunghe stancano: l'occhio perde il segno quando torna all'inizio della riga successiva. WCAG 1.4.8 suggerisce non più di 80 caratteri per riga (40 per cinese, giapponese e coreano). Il modo più semplice per rispettarlo è max-width in unità ch sui paragrafi, per esempio max-width: 65ch. text-align imposta l'allineamento: left (o start) è il più facile da leggere per i testi lunghi nelle lingue che si scrivono da sinistra a destra, center va bene per titoli brevi e justify può aprire spazi irregolari tra le parole.

Piccoli ritocchi finali

text-transform: uppercase mostra il testo in maiuscolo senza cambiare l'HTML, così il sorgente mantiene la grafia normale e lo stile si può cambiare in seguito in un solo punto. MDN fa notare che lunghe sequenze di maiuscole sono più difficili da leggere per alcune persone, comprese le persone con dislessia, quindi riservalo alle etichette brevi e aggiungi un po' di letter-spacing, come 0.08em. text-decoration disegna linee: underline, line-through, oppure none per togliere la sottolineatura a un link (lascia qualche altro segno che si tratta di un link). Chi ha bisogno di più spazio può sostituire la tua spaziatura; WCAG 1.4.12 chiede che le pagine funzionino ancora con interlinea 1.5, spaziatura tra le lettere 0.12em, tra le parole 0.16em e tra i paragrafi 2em, quindi evita riquadri ad altezza fissa che taglierebbero il testo.