Typographie

Les WCAG conseillent des lignes de 80 caractères au plus et un interligne d'au moins 1.5 dans les paragraphes. Deux propriétés CSS gèrent ces deux points.

Choisir des polices

font-family accepte une liste de polices séparées par des virgules. Le navigateur utilise la première disponible sur l'appareil du lecteur et descend dans la liste si elle manque. Termine toujours la liste par une famille générique, serif, sans-serif, monospace ou system-ui, pour qu'une police convenable s'affiche quoi qu'il soit installé. Les noms de police qui contiennent des espaces se mettent entre guillemets, comme "Noto Sans KR". system-ui utilise la police d'interface du système d'exploitation, bien conçue, déjà présente sur l'appareil, et qui couvre de nombreux systèmes d'écriture.

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; }

Tu peux aussi charger un fichier de police depuis ton propre serveur avec une règle @font-face, ou depuis un service de polices. Les polices web donnent du caractère à une page, mais chacune est un téléchargement qui retarde l'affichage du texte, et les polices coréennes, chinoises et japonaises peuvent peser plusieurs mégaoctets car elles contiennent des milliers de glyphes. Charge le moins de graisses possible et garde une bonne police de secours dans la liste.

Taille, graisse et interligne

font-size règle la taille ; comme l'a expliqué l'unité sur les couleurs et les unités, rem garde le texte en accord avec les réglages du lecteur. font-weight va de 100 (très fin) à 900 (très gras), avec 400 pour normal et 700 pour gras ; les mots-clés normal et bold valent 400 et 700. Une police ne possède que les graisses que son créateur a dessinées : demander 300 dans une police qui n'a que 400 et 700 donne la plus proche.

line-height règle la distance entre les lignes. Donne-lui un simple nombre sans unité, comme 1.6 : il signifie alors 1.6 fois la taille de police de chaque élément, si bien que les titres et les petits caractères reçoivent chacun un espacement adapté. Une valeur avec unité, comme 24px, est calculée une seule fois et héritée comme une longueur fixe, trop serrée pour les grands titres. Le texte courant se lit bien en général entre 1.4 et 1.7 ; le critère de succès WCAG 1.4.8 conseille au moins 1.5 dans les paragraphes. Les grands titres sont plus beaux plus serrés, autour de 1.1 à 1.3.

Longueur de ligne et alignement

Les lignes très longues fatiguent : l'œil perd sa place en revenant au début de la ligne suivante. Le critère WCAG 1.4.8 conseille 80 caractères au plus par ligne (40 pour le chinois, le japonais et le coréen). Le moyen simple d'y arriver est un max-width en unités ch sur les paragraphes, par exemple max-width: 65ch. text-align règle l'alignement : left (ou start) est le plus facile à lire pour un long texte dans les langues qui s'écrivent de gauche à droite, center convient aux titres courts, et justify peut créer des espaces irréguliers entre les mots.

Petites finitions

text-transform: uppercase affiche le texte en majuscules sans modifier le HTML : la source garde son orthographe normale et le style peut être changé plus tard à un seul endroit. MDN signale que de longues suites de majuscules sont plus difficiles à lire pour certaines personnes, notamment les personnes dyslexiques : réserve-les aux étiquettes courtes et ajoute un peu de letter-spacing, comme 0.08em. text-decoration trace des lignes : underline, line-through, ou none pour retirer le soulignement d'un lien (garde un autre signe montrant que c'est un lien). Les lecteurs qui ont besoin de plus d'espace peuvent remplacer ton espacement ; le critère WCAG 1.4.12 demande que les pages fonctionnent encore avec un interligne de 1.5, un espacement des lettres de 0.12em, un espacement des mots de 0.16em et un espacement des paragraphes de 2em. Évite donc les boîtes à hauteur fixe qui couperaient le texte.