Typographie accessible sur le web : Conception, application et aspects techniques
Typographie accessible sur le web : Conception, application et aspects techniques
Phil Garnham Polices pour l'accessibilité
La conception de sites web réactifs est arrivée à maturité et de nouveaux modes de lecture et d'interaction avec le texte sont apparus. Avec les développements récents des technologies "variables" police qui permettent à polices de s'afficher dans des largeurs, des graisses et des contrastes différents, il est plus important que jamais d'être conscient des attributs accessibles de police .
Le choix d'une police de caractères accessible peut sembler être une tâche décourageante. La pléthore d'informations concernant la conception, l'application et la méthodologie du code des caractères accessibles est tout à fait stupéfiante. Une chose est claire : la lisibilité du contenu est probablement l'objectif principal de presque tous les sites web. Les points présentés ici ont pour but de servir de caisse de résonance pour la réflexion et l'évaluation lors de la sélection d'une police de caractères pour votre marque.
Conception de caractères
Lisibilité et facilité de lecture : La lisibilité est liée à la question suivante : "Pouvez-vous reconnaître cette lettre ou ce mot ?" "Pouvez-vous interpréter et comprendre ce mot ?". La lisibilité s'intéresse à la question suivante : "Êtes-vous à l'aise dans l'expérience de la lecture ? La conception accessible est à la fois lisible et lisible.
Sérif ou sans : Nos recherches en collaboration avec Mencap ont montré que les lettres sans empattement ( polices ) étaient considérées comme le style le plus accessible. Le niveau de détail des lettres avec empattement a été jugé trop complexe par les personnes souffrant de troubles de la lecture. Les lettres sans empattement polices ont une structure simplifiée ; leurs formes se rapprochent de l'écriture manuscrite que nous connaissons et sont donc jugées plus lisibles. Dans les navigateurs, les lettres sans linéaires s'affichent plus proprement à des tailles de pixels plus petites, en particulier dans les environnements de rendu les plus difficiles.
Forme des lettres : Le choix d'une police de caractères ayant de grandes qualités de reconnaissance des caractères favorise la lisibilité. Les malvoyants peuvent être déroutés par certaines lettres. Il est donc important de définir clairement les formes de lettres qui peuvent prêter à confusion. Les lettres les plus courantes sont le "I" (œil), le "i" (œil inférieur), le "l" (el) et le "1". Un "C" fermé peut ressembler à un "O" dans les petites tailles de pixels. Les formes ouvertes des compteurs facilitent la lecture. La combinaison de "r" et de "n" peut se lire comme un "m". Les longues jambages ascendants et descendants sont également importants. Elles permettent de définir des formes de mots extérieures que l'œil peut balayer et interpréter rapidement.
Police les proportions : Une hauteur x importante et des proportions modérées à larges sont les plus accessibles. La hauteur x d'une police de caractères est importante car elle implique souvent un espace blanc plus important à l'intérieur d'une lettre, ce qui favorise la définition et la clarté. Les styles de largeur condensée et comprimée sont souvent présentés comme permettant une mise en page fluide et plus réactive. Il est important de se rendre compte qu'en utilisant une version condensée du site police lorsque l'espace est limité (mobile), vous risquez également de réduire l'accessibilité. Il est essentiel de procéder à des tests approfondis du site polices utilisé dans son contexte.
Indices : Les indices sont une couche supplémentaire de données dans un site police qui décrit le degré d'activation ou de désactivation d'un pixel pour améliorer la qualité d'une lettre à une taille de pixel spécifique. Malgré l'amélioration de la résolution des écrans, police hinting est toujours un processus essentiel de conception de caractères. La plupart des fonderies l'automatisent et obtiennent de très bons résultats, mais il faut rester prudent. Il n'est pas possible d'améliorer la qualité d'une police de caractères à fort grammage ( police ) à une taille de 12 px.
Type d'application
Poids : Établir une hiérarchie en attribuant des rôles à chaque police. Une hiérarchie permet à l'œil de décomposer l'information en une expérience claire. Utilisez des graisses ouvertes et moyennes pour les sous-titres et le corps du texte. Mettez en place un test pour évaluer les différents navigateurs et environnements ou utilisez Pile de navigateurs pour avoir une vue d'ensemble. La graisse peut varier considérablement d'un environnement à l'autre Suivante. Si vous le souhaitez, mettez en œuvre les éléments suivants Mélange de rendu des types pour équilibrer l'apparence.
La taille : La taille est importante. N'oubliez pas que chaque police se situe à une échelle différente sur le corps typographique et que les tailles réelles peuvent varier considérablement entre polices. 14 px dans un police peut être équivalent à 18 px dans un autre. La taille moyenne pour le corps se situe entre 14 et 16 px. En règle générale, la taille de 16 px et plus est considérée comme la plus inclusive. Police-La taille peut également avoir un impact sur la qualité du rendu. Trouvez les points d'équilibre qui offrent les meilleurs résultats de rendu pour vos principales plates-formes.
Hauteur de ligne : Donnez de l'espace aux caractères pour qu'ils puissent respirer. L'œil doit pouvoir passer facilement d'une ligne à l'autre ( Suivante ). Les lignes directrices relatives à l'accessibilité du contenu Web recommandent une valeur de 1,5 pour le corps du texte. Évaluez, réduisez ou augmentez si nécessaire.
Longueur des lignes : La lecture de longues lignes de texte est éprouvante pour les yeux. Les recherches indiquent que la longueur moyenne d'une ligne en ligne est d'environ 70 à 80 caractères. Limitez les lignes à 16 mots maximum.
Alignement des caractères : Un texte centré n'est pas un texte accessible. Le centrage crée différentes positions de départ. Cela pose des problèmes aux malvoyants.
TOUTES CAPS : N'utilisez jamais "TOUTES CAPITALES" dans le corps du texte. Utilisez les petites capitales si une capitalisation de courte durée est nécessaire. Elles sont idéales pour l'accentuation, les abréviations et les sous-titres.
Ligatures : Pensez à la conception des ligatures - fi, fl etc... Ces lettres combinées peuvent ajouter de l'harmonie, mais aussi de la confusion pour les personnes souffrant de troubles de la lecture.
La couleur : Comme tous les éléments visuels, les caractères doivent être suffisamment contrastés. Les caractères gris sur fond blanc peuvent être difficiles à lire si la grisaille et le poids de police sont trop faibles. Notre FS Untitled® a des graisses finement "graduées" pour aider les utilisateurs à équilibrer son apparence. Les caractères blancs sur fond sombre "brillent" à l'écran, ils paraissent plus serrés et certains sites polices peuvent nécessiter des ajustements de l'espacement des lettres en conséquence.
Type techniques
Police les stratégies de chargement : Les connexions lentes (mobiles) et les gros fichiers police ralentissent le chargement des textes. Un seul fichier WOFF avec un jeu de caractères européen complet pèsera entre 30 et 50 Ko. Les états FOUT (Flash of Unstyled Text) ou FOIT (Flash of Invisible Text) doivent être pris en considération. FOIT est le navigateur par défaut prédominant et, en termes d'esthétique, FOIT est souhaitable, mais en termes d'accessibilité, FOUT est certainement la meilleure solution. Il vaut mieux voir un peu de contenu que pas de contenu du tout. Essayez d'afficher le texte dans une solution de repli jusqu'à ce que toutes les pages web polices soient chargées. Mise en œuvre avec Webfont Loader et installez un cookie, car cela minimise le FOUT au fur et à mesure que l'internaute avance dans le site. Vous pouvez également utiliser le nouveau descripteur CSS police-display qui permet de configurer le chargement de police par le biais de CSS. Plus d'informations à ce sujet ici.
Fallback polices: La sélection est limitée, en particulier sur mobile. Le tableau de compatibilité de Jordan Moore tableau de compatibilité du fallback mobile de Jordan Moore illustre le problème. Lors de la sélection d'un fallback, essayez d'obtenir des poids et des proportions similaires. Ajustez les paramètres du fallback pour qu'il corresponde à la taille choisie pour police . Informez votre décision en superposant le site police accessible que vous avez choisi au site de repli et jugez de sa pertinence.
text-rendering: Use optimiseLegibility to enable kerning and improve rendering quality. This setting also enables ligatures, so review the design of the ligatures and their shape complexity. If necessary disable them by setting: .classname { font-feature-settings: “liga” 0; }
Protéger polices: Il faut des années d'efforts et d'investissements pour développer une police de caractères de haute qualité. Compte tenu du rôle important que jouent les caractères dans tous les projets web, il n'est que juste de prendre des mesures pour protéger l'investissement qu'ils représentent. Utilisez CORS pour déployer polices, en veillant à ce que seuls les sites autorisés aient accès aux fichiers.
Chez Fontsmith, nous nous efforçons de rendre les caractères aussi accessibles que possible. Nos polices de caractères accessibles police FS Me® est disponible avec un jeu Pro couvrant plus de 150 langues. Nous avons travaillé avec des groupes de signalisation et de protection de l'environnement pour créer une police de caractères d'orientation du 21e siècle. FS Millbank®qui vise à faciliter la navigation dans les environnements très fréquentés.
Une version antérieure de cet article a été publiée dans Net Magazine.
Les fichiers web variables police se profilent à l'horizon et la flexibilité d'une famille police aujourd'hui standard sera bientôt totalement ouverte. Le concepteur et le développeur pourront adapter le poids et la largeur des caractères utilisés sur un site et dans des environnements spécifiques. Créons un web plus lisible grâce aux principes de base de la typographie accessible en ligne.