Catégories
Plugin et site web

Techniques CSS modernes pour améliorer la lisibilité – Smashing Magazine

A propos de l'auteur

Edoardo est un développeur Web chez Chialab. Il a développé ses intérêts pour la typographie et l'accessibilité en travaillant sur divers produits EdTech et certains institutionnels…
Plus à propos
Edoardo

Dans cet article, nous expliquons comment nous pouvons améliorer la lisibilité des sites Web en utilisant des techniques CSS modernes, de nouvelles technologies comme les polices variables et en mettant en pratique ce que nous avons appris en faisant des recherches scientifiques.

Nous pouvons lire de nombreuses manières et il existe de nombreux types de lecteurs, chacun ayant ses propres besoins, compétences, langue et, surtout, habitudes. Lire un roman à la maison est différent de le lire dans le train, tout comme lire un journal est différent de parcourir sa version en ligne. La lecture, comme toute autre activité, nécessite de la pratique pour que quelqu'un devienne rapide et efficace. En gros, nous lisons mieux les choses que nous avons l'habitude de lire le plus.

Quels aspects devons-nous prendre en compte lors de la conception et du développement pour la lecture? Comment pouvons-nous créer des expériences accessibles, confortables et inclusives pour tous les lecteurs, y compris les plus handicapés et ceux affectés par la dyslexie?

Articles dédiés à l'accessibilité

Chez Smashing, nous pensons qu'un bon site Web est un site Web accessible, accessible à tous, quelle que soit la façon dont ils naviguent sur le Web. Nous avons mis en évidence quelques-uns des nombreux articles qui, nous en sommes certains, vous aideront à créer des sites et des applications Web plus accessibles. Explorez plus d'articles →

Espaces, mots, phrases et paragraphes

Unités

Sur une page Web, de nombreuses unités sont disponibles pour nous permettre d'ajuster la taille de la police du texte. Comprendre quelle unité utiliser est essentiel pour définir la structure de toute une section de lecture. La nature redistribuable du Web nous oblige à prendre en compte plusieurs aspects, tels que la taille de la fenêtre d'affichage et les préférences de lecture de l'utilisateur.

Pour cette raison, les choix les plus appropriés sont généralement em et rem, qui sont des unités spécifiques à la police. Par exemple, la définition des marges entre les paragraphes à l'aide de ems permet de préserver le rythme vertical lorsque la taille du texte change. Cependant, cela peut être un problème lorsqu'une police serif est alternée avec un sans-serif dans une section. En fait, à la même taille de police, les polices peuvent apparaître optiquement très différentes. Traditionnellement, la hauteur du caractère «x» minuscule (la hauteur x) est la référence pour déterminer la taille apparente d'un caractère.

La comparaison entre les glyphes «d» et «x» de trois polices différentes de même taille révèle que leurs hauteurs du «x» (et donc leur taille optique) sont totalement différentes
À la même taille de police, les caractères apparaîtront optiquement très différents. (Grand aperçu)

En utilisant la règle d'ajustement de la taille de la police, nous pouvons donc rendre optiquement des polices de même taille, car la propriété correspondra à la hauteur des lettres minuscules. Malheureusement, cette propriété n'est actuellement disponible que dans Firefox et dans Chrome et Edge derrière un indicateur, mais elle peut être utilisée comme amélioration progressive en utilisant la vérification @support:

@supports (font-size-adjust: 1;) {
    article {
        font-size-adjust: 0.5;
    }
}

Cela facilite également le passage de la police de secours à celle chargée à distance (par exemple, à l'aide de Google Fonts).

Il y a deux articles. Lors du changement de police principale, le premier article augmente considérablement sa longueur, car la taille de la police n'est pas ajustée à la hauteur x, tandis que le second change de manière presque transparente
Le premier exemple montre comment le changement de police fonctionne normalement. Dans le second, nous utilisons font-size-adjust pour rendre l'échange plus confortable. (Grand aperçu)

Hauteur de ligne optimale

Nous pensons que la typographie est en noir et blanc. La typographie est vraiment blanche (…) C'est l'espace entre les noirs qui la fait vraiment.

– Massimo Vignelli, Helvetica, 2007

Parce que la typographie est plus une question de «blancs» que de «noirs», lorsque nous appliquons cette notion à la conception d'un site Web ou d'une application Web, nous devons prendre en compte des caractéristiques spéciales telles que la hauteur de ligne, les marges entre les paragraphes et les sauts de ligne.

La définition de la taille de la police en se basant sur la hauteur x permet d'optimiser la hauteur de la ligne. La hauteur de ligne par défaut dans les navigateurs est 1,2 (une valeur sans unité est relative à la taille de la police), ce qui est la valeur optimale pour Times New Roman mais pas pour les autres polices. Il faut également considérer que l'interligne ne croît pas linéairement avec la taille de la police et qu'il dépend de divers facteurs comme le type du texte. En testant certaines polices courantes pour la lecture longue durée, combinées à des tailles de 8 à 14 points, nous avons pu déduire que, sur papier, le rapport entre la hauteur x et l'interligne optimal est de 37,6.

Un graphique montre la relation entre le rapport entre la hauteur x et la hauteur de la ligne (axe y) et le rapport entre la hauteur x et les ascendeurs (axe x), avec une tendance à la baisse de 38,1 à 35,8 pour le premier rapport tout en augmentant les valeurs de l'axe x
Plages d'interligne acceptables. (Grand aperçu)

Par rapport à la lecture sur papier, la lecture d'écran nécessite généralement plus d'espacement entre les lignes. Par conséquent, nous devons ajuster le rapport à 32 pour les environnements numériques. En CSS, cette valeur empirique peut se traduire par la règle suivante:

p {
    line-height: calc(1ex / 0.32);
}

Dans les bons contextes de lecture, cette règle définit une hauteur de ligne optimale pour les polices serif et sans-serif, même lorsque les outils typographiques ne sont pas disponibles ou lorsqu'un utilisateur a défini une police qui écrase celle choisie par le concepteur.

Définir l'échelle

Maintenant que nous avons ajusté la taille de la police et utilisé l'unité ex pour calculer la hauteur de ligne, nous devons définir l'échelle typographique afin de régler correctement l'espacement entre les paragraphes et de donner un bon rythme à la lecture. Comme indiqué précédemment, l'interligne ne croît pas de manière linéaire mais varie en fonction du type de texte. Pour les titres avec une grande taille de police, par exemple, nous devrions envisager un rapport plus élevé pour la hauteur de ligne.

article h1 {
    font-size: 2.5em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

article h2 {
    font-size: 2em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

article h3 {
    font-size: 1.75em;
    line-height: calc(1ex / 0.38);
    margin: calc(1ex / 0.38) 0;
}

article h4 {
    font-size: 1.5em;
    line-height: calc(1ex / 0.37);
    margin: calc(1ex / 0.37) 0;
}

article p {
    font-size: 1em;
    line-height: calc(1ex / 0.32);
    margin: calc(1ex / 0.32) 0;
}

Espacement des lettres et des mots

Lorsque nous travaillons sur la lisibilité, nous devons également tenir compte des lecteurs qui ont des difficultés, comme ceux qui souffrent de dyslexie et de troubles d'apprentissage. La dyslexie développementale affecte la lecture, et la discussion et la recherche sur les causes sont toujours en cours. Il est important d'utiliser des études scientifiques pour comprendre les effets des variables visuelles et typographiques sur la lecture.

Par exemple, dans une étude que mon entreprise a suivie («Test de la lisibilité du texte des polices adaptées à la dyslexie»), il a été clairement démontré que les formes de glyphes des polices à haute lisibilité ne facilitent pas vraiment la lecture, mais un espacement plus large entre les caractères (crénage) Est-ce que. Cette constatation a été confirmée par une autre étude sur l'efficacité de l'augmentation de l'espacement («Comment les aspects visuels peuvent être cruciaux dans l'acquisition de la lecture: le cas intriguant de la surpopulation et de la dyslexie développementale»).

Ces études suggèrent que nous devrions exploiter le dynamisme et la réactivité des pages Web en offrant des outils plus efficaces, comme des contrôles de gestion de l'espacement. Une technique courante pour agrandir la taille des caractères consiste à ajuster l'espacement entre les lettres et les mots via des propriétés CSS telles que letter-spacing et word-spacing.

Voir le stylo (espacement des lettres et des mots) (https://codepen.io/smashingmag/pen/KKVbOoE) d'Edoardo Cavazza.

Voir la lettre du stylo et l'espacement des mots par Edoardo Cavazza.

Le problème avec ceci est que letter-spacing agit sans condition et rompt le crénage de la police, amenant la page à rendre les espaces non optimaux.

Alternativement, nous pouvons utiliser des polices variables pour mieux contrôler le rendu des polices. Les concepteurs de polices peuvent paramétrer l'espacement de manière variable et non linéaire, et peut déterminer comment le poids et la forme d'un glyphe peuvent mieux s'adapter aux habitudes du lecteur. Dans l'exemple suivant, en utilisant la police Amstelvar, nous pouvons augmenter la taille optique ainsi que l'espacement et le contraste, comme prévu par le concepteur.

Voir le Pen (La taille optique dans les polices variables) (https://codepen.io/smashingmag/pen/VweqoRM) d'Edoardo Cavazza.

Voir le stylo La taille optique en polices variables par Edoardo Cavazza.

L'article de Web.dev «Introduction aux polices variables sur le Web» donne plus de détails sur ce que sont les polices variables et comment les utiliser. Et consultez l'outil Polices variables pour voir comment elles fonctionnent.

Largeur et alignement

Pour optimiser le flux de lecture, nous devons également travailler sur la largeur du paragraphe, qui est le nombre de caractères et d'espaces sur une ligne. En lisant, notre l'œil se concentre sur environ huit lettres dans une foveatio (c'est-à-dire l'opération qui est activée lorsque nous regardons un objet), et il ne peut gérer qu'un quelques répétitions consécutives. Par conséquent, les sauts de ligne sont cruciaux: le moment de déplacer le focus de la fin d'une ligne au début de la suivante est l'une des opérations les plus complexes de lecture et doit être facilitée en gardant le bon nombre de caractères par type de texte. Pour un paragraphe de base, une longueur commune est d'environ 60 à 70 caractères par ligne. Cette valeur peut être facilement définie avec l'unité ch en attribuant une largeur au paragraphe:

p {
    width: 60ch;
    max-width: 100%;
}

La justification joue également un rôle important dans la lecture à travers les lignes. La prise en charge de la césure pour les langues n'est pas toujours optimale dans les différents navigateurs; par conséquent, il doit être vérifié. Dans tout les cas, éviter le texte justifié en l'absence de césure car l'espacement horizontal qui serait créé serait un obstacle à la lecture.

/* The browser correctly supports hyphenation */
p(lang=”en”) {
    text-align: justify;
    hyphens: auto;
}

/* The browser does NOT correctly support hyphenation */
p(lang=”it”) {
    text-align: left;
    hyphens: none;
}

La césure manuelle peut être utilisée pour les langues qui n'ont pas de prise en charge native. Il existe plusieurs algorithmes (côté serveur et côté client) qui peuvent injecter le entité dans les mots, pour indiquer aux navigateurs où le jeton peut être brisé. Ce caractère serait invisible, à moins qu'il ne soit situé à la fin de la ligne, après quoi il serait rendu comme un trait d'union. Pour activer ce comportement, nous devons définir le hyphens: manual CSS règle.

Contraste de premier plan

Le contraste des caractères et des mots avec l'arrière-plan est fondamental pour la lisibilité. Le WCAG a défini des lignes directrices et des contraintes pour différentes normes (A, AA, AAA) régissant le contraste entre le texte et l'arrière-plan. Le contraste peut être calculé avec différents outils, à la fois pour les environnements de conception et de développement. Gardez à l'esprit que les validateurs automatisés sont des outils d'assistance et ne garantissent pas la même qualité qu'un vrai test.

En utilisant des variables CSS et un calc déclaration, nous pouvons calculer dynamiquement la couleur qui offre le meilleur contraste avec l'arrière-plan. De cette manière, nous pouvons proposer à l'utilisateur différents types de contraste (sépia, gris clair, mode nuit, etc.), en convertissant l'ensemble du thème en fonction de la couleur de fond.

article {
    --red: 230;
    --green: 230;
    --blue: 230;
    --aa-brightness: (
        (var(--red) * 299) +
        (var(--green) * 587) +
        (var(--blue) * 114)
    ) / 1000;
    --aa-color: calc((var(--aa-brightness) - 128) * -1000);
    background: rgb(var(--red), var(--green), var(--blue));
    color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
}

Voir le stylo (contraste de texte automatique) (https://codepen.io/smashingmag/pen/zYrygyr) par Edoardo Cavazza.

Voir le contraste de texte Pen Automatic par Edoardo Cavazza.

De plus, avec l'introduction et la prise en charge multi-navigateurs du prefer-color-scheme media query, il devient encore plus facile de gérer le passage du thème clair au thème sombre, selon les préférences de l'utilisateur.

@media (prefers-color-scheme: dark) {
    article {
        --red: 30;
        --green: 30;
        --blue: 30;
    }
}

Aller de l'avant

Concevoir et développer pour une lecture optimale nécessitent beaucoup de connaissances et le travail de nombreux professionnels. Plus ces connaissances sont réparties dans l'équipe, meilleurs seront les utilisateurs. Voici quelques points pour nous conduire à de bons résultats.

Pour les designers

  • Considérez la structure sémantique comme faisant partie du projet, plutôt que comme un détail technique;
  • La mise en page des documents et les statistiques relatives aux polices, en particulier le pourquoi et le comment de vos choix. Ils aideront les développeurs à mettre en œuvre correctement la conception;
  • Réduisez au maximum les variables typographiques (moins de familles, de styles et de variantes).

Pour les développeurs

  • Apprenez les principes de la typographie afin de comprendre les décisions de conception prises et comment les mettre en œuvre;
  • Utilisez des unités relatives à la taille de la police pour implémenter des mises en page réactives (rembourrages, marges, espaces) qui s'adaptent aux préférences de l'utilisateur;
  • Évitez de manipuler sans restriction les métriques de police. La lisibilité peut souffrir lorsque les contraintes de police ne sont pas respectées.

Pour les équipes

  • Lire et comprendre les principes du WCAG;
  • Envisagez l'inclusion et l'accessibilité dans le cadre du projet (plutôt que des problèmes séparés).

La lecture est une activité complexe. Malgré les nombreuses ressources sur la typographie Web et les articles académiques qui identifient les domaines à améliorer, il n'existe pas de recette magique pour obtenir une bonne lisibilité. Le nombre de variables à considérer peut sembler écrasant, mais bon nombre d'entre elles sont gérables.

Nous pouvons définir la hauteur de ligne optimale d'un paragraphe en utilisant la ex unité, ainsi que définir la largeur d'un paragraphe à l'aide de la ch unité, afin de respecter les paramètres de navigateur préférés de l'utilisateur pour la taille et la famille de police. Nous pouvons utiliser des polices variables pour ajuster l'espacement entre les lettres et les mots, et nous pouvons manipuler le tracé des glyphes pour augmenter le contraste, aidant ainsi les lecteurs malvoyants et dyslexiques. Nous pouvons même ajuster automatiquement le contraste du texte à l'aide de variables CSS, donnant à l'utilisateur son thème préféré.

Tous ces éléments nous aident à créer une page Web dynamique dont la lisibilité est optimisée en fonction des besoins et des préférences de l’utilisateur. Enfin, étant donné que chaque petite implémentation ou chaque détail technologique peut faire une énorme différence, il est toujours essentiel de tester les performances de lecture des utilisateurs à l'aide de l'artefact final.

Éditorial fracassant(ra, yk, al, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *