Techniques CSS modernes pour améliorer la lisibilité

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 dans de nombreuses façons, 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. Fondamentalement, nous lisons mieux les choses que nous avons l'habitude de lire le plus.

Quels aspects devons-nous prendre en considération 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 démunis et ceux qui souffrent de dyslexie?

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, comme la taille de la fenêtre 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.

En utilisant la règle font-size-adjust nous pouvons donc rendre optiquement des polices de même taille, car la propriété correspondra aux hauteurs du minuscules. Malheureusement, cette propriété est actuellement disponible uniquement 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 {
        ajustement de la taille de la police: 0,5;
    }
}

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

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», quand on applique cette notion à la conception d'un site Web ou d'une application Web, nous devons prendre en compte des fonctionnalités 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 s'appuyant sur la hauteur x permet d'optimiser le 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.

Grand aperçu )

Par rapport à la lecture sur papier, la lecture à l'é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 {
    hauteur de ligne: 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. [19659028] Définir l'échelle

Maintenant que nous avons ajusté la taille de la police et utilisé l'unité ex pour calculer la hauteur de la ligne, nous devons définir l'échelle typographique afin de régler correctement l'espacement entre les paragraphes et de fournir un bon rythme pour 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 {
    taille de la police: 2,5em;
    hauteur de ligne: calc (1ex / 0.42);
    marge: calc (1ex / 0,42) 0;
}

article h2 {
    taille de la police: 2em;
    hauteur de ligne: calc (1ex / 0.42);
    marge: calc (1ex / 0,42) 0;
}

article h3 {
    taille de la police: 1,75em;
    hauteur de ligne: calc (1ex / 0,38);
    marge: calc (1ex / 0,38) 0;
}

article h4 {
    taille de la police: 1,5em;
    hauteur de ligne: calc (1ex / 0,37);
    marge: calc (1ex / 0,37) 0;
}

article p {
    taille de la police: 1em;
    hauteur de ligne: calc (1ex / 0,32);
    marge: 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 (« Testing Text Readability of Dyslexia-Friendly Fonts ] »), Il y avait une évidence claire que les formes de glyphe des polices à haute lisibilité n'aident pas vraiment la lecture, mais un espacement plus large entre les caractères ( crénage ) le fait. Cette conclusion a été confirmée par une autre étude sur l'efficacité de l'augmentation de l'espacement (« How the Visual Aspects Can Be Crucial in Reading Acquisition: The Intriguing Case of Crowding and Developmental Dyslexia »).

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

See the Pen [Letter and word spacing] (https://codepen.io/smashingmag/pen/KKVbOoE) par Edoardo Cavazza .

Le problème avec ceci est que letter-spacing agit de manière inconditionnelle et rompt le crénage de la police, amenant la page à afficher des 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 peuvent 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.

See the Pen [The optical size in variable fonts] (https: / /codepen.io/smashingmag/pen/VweqoRM) par Edoardo Cavazza .