Tipografia llegible: mida, interlineat, espaiat (1.4.12), canvi de mida (1.4.4) i reflow (1.4.10)

La llegibilitat d'un text depèn de la tipografia triada, de la mida, de l'interlineat, de l'amplada de línia i, sobretot, que la persona els pugui adaptar a les seves necessitats. Moltes persones amb baixa visió no fan servir lector de pantalla: fan servir el zoom del navegador, augmenten la mida de lletra o apliquen fulls d'estil propis. Tres criteris de les WCAG garanteixen que ho puguin fer sense trencar la pàgina: 1.4.4 Canvi de mida del text, 1.4.10 Reajustament dels elements i 1.4.12 Espaiat del text. Aquesta lliçó els explica i dona recomanacions tipogràfiques concretes.

Triar una tipografia llegible

No existeix una «tipografia accessible» universal, però sí característiques que ajuden:

• Formes de lletra distingibles: que la «I» majúscula, la «l» minúscula i l'«1» es diferenciïn; que la «a» i la «o», o la «rn» i la «m», no es confonguin. Fonts com Verdana o Atkinson Hyperlegible es van dissenyar pensant-hi; altres de molt usades en pantalla, com Source Sans, Open Sans o Inter, són llegibles, però convé comprovar-hi aquests parells de caràcters, perquè no totes els diferencien igual de bé.
• Gruix mitjà: evita les variants light o thin per al text de lectura; perden contrast efectiu.
• Alçada de la x generosa i espaiat entre lletres normal: les fonts condensades cansen.
• Poques famílies: una per al text i, com a molt, una altra per als títols.
• Res de cursiva ni de majúscules seguides per als paràgrafs: totes dues redueixen la velocitat de lectura, especialment amb dislèxia.

Les fonts amb gràcies (serif) no són inaccessibles per si mateixes en les pantalles actuals, però les sans serif solen funcionar millor en mides petites i en pantalles de baixa resolució.

Mida, interlineat i amplada de línia

• Mida base: almenys 16 píxels CSS per al text de lectura (1 rem). Les notes o el text legal poden baixar a 14 px, però no menys.
• Interlineat: 1,5 vegades la mida de lletra (line-height: 1.5) als paràgrafs. El criteri 1.4.8 Presentació visual (AAA) ho demana expressament (ho veuràs en detall a la lliçó següent), i 1.4.12 exigeix que es pugui forçar.
• Amplada de línia: entre 45 i 80 caràcters per línia (max-width: 70ch és una bona regla). Les línies més llargues dificulten tornar al començament de la següent.
• Separació entre paràgrafs: més gran que l'interlineat, perquè els paràgrafs es distingeixin.
• Unitats relatives: defineix les mides en rem o em, no en px, perquè respectin la mida de lletra que la persona ha configurat al navegador.

1.4.4 Canvi de mida del text

Aquest criteri, de nivell AA, exigeix que el text es pugui ampliar fins al 200 % sense tecnologies de suport i sense pèrdua de contingut ni de funcionalitat. Es comprova de dues maneres: amb el zoom del navegador al 200 % i, de manera més exigent, augmentant només la mida de lletra (a Firefox: «Amplia només el text»). Errades típiques: textos que es tallen en caixes d'alçada fixa, botons el text dels quals desborda, menús que se superposen i contingut que desapareix sota un encapçalament fix.

/* Incorrecte: alçada fixa, el text ampliat es talla */
.tarjeta { height: 120px; overflow: hidden; font-size: 14px; }

/* Correcte: alçada mínima, unitats relatives */
.tarjeta { min-height: 7.5rem; font-size: 0.875rem; }

1.4.10 Reajustament dels elements

El criteri 1.4.10 Reajustament dels elements (AA, introduït a WCAG 2.1) exigeix que el contingut es pugui presentar sense pèrdua d'informació ni de funcionalitat i sense desplaçament en dues dimensions: per al contingut que es llegeix en vertical, a una amplada de 320 píxels CSS; per al contingut horitzontal, a una alçada de 256 píxels. A la pràctica, 320 px CSS equival a una finestra d'escriptori de 1280 px amb zoom al 400 %, que és la manera habitual de comprovar-ho. S'exceptua el contingut que requereix dues dimensions per al seu ús o significat: imatges, mapes, diagrames, vídeos, jocs, presentacions, taules de dades (la taula es pot desplaçar horitzontalment, però les cel·les no s'han de trencar) i interfícies on cal mantenir visibles les barres d'eines mentre es manipula el contingut.

El reflow és, bàsicament, disseny responsive ben fet. El que falla gairebé sempre:

• Amplades fixes en píxels en contenidors, taules de maquetació i imatges sense max-width: 100%.
• Text que es trunca amb punts suspensius i no hi ha manera de llegir-lo sencer.
• Elements fixos (capçaleres, bàners de galetes, xats) que al 400 % ocupen tota la pantalla i tapen el contingut.
• Versions mòbils amb funcions retallades respecte a la d'escriptori: això és pèrdua de funcionalitat.

1.4.12 Espaiat del text

Aquest criteri, de nivell AA, protegeix les persones que apliquen els seus propis fulls d'estil o extensions per espaiar el text (molt habitual amb dislèxia). Exigeix que no es perdi contingut ni funcionalitat en forçar aquests valors: interlineat d'almenys 1,5 vegades la mida de lletra, separació entre paràgrafs d'almenys 2 vegades, espaiat entre lletres d'almenys 0,12 vegades i entre paraules d'almenys 0,16 vegades. Els contenidors que retallen el text, els botons d'amplada fixa i els textos superposats són les errades típiques. Es comprova amb un bookmarklet d'espaiat de text (el més usat és el «Text Spacing Bookmarklet» de Steve Faulkner) o amb l'extensió Stylus aplicant aquests valors a tots els elements.

Resum

• Tipografia llegible: lletres distingibles, gruix mitjà, 16 px de base, interlineat 1,5, línies de 45-80 caràcters, unitats rem.
• 1.4.4 Canvi de mida del text (AA): ampliar al 200 % sense pèrdua; evita les alçades fixes i el bloqueig del zoom.
• 1.4.10 Reajustament dels elements (AA): sense desplaçament horitzontal a 320 px CSS (zoom 400 %), excepte taules, mapes i imatges.
• 1.4.12 Espaiat del text (AA): suporta interlineat 1,5, paràgrafs 2, lletres 0,12 em i paraules 0,16 em.
• Comprova amb zoom 200 % i 400 %, «amplia només el text» i el bookmarklet de Text Spacing.