La typographie est sûrement la discipline la plus mystérieuse pour beaucoup de designer cependant elle est souvent déterminante dans l’ergonomie d’une interface Web.
A l’issue d’une étude réalisée par Vision Quest de Digital Web Magazine, on s’aperçoit que l’on assimile 30% moins d’information avec une lecture à l’écran plutôt que sur papier.
Il convient donc de ne pas faire chuter d’avantage ce ratio en délaissant certaines règles essentielles.
La typographie, n’est pas seulement le fait de choisir la “bonne police”, c’est également se poser de nombreuses questions telles que:
Comment hiérarchiser l’information, améliorer la lisibilité et le confort de lecture ?
La lisibilité se décompose en 2 parties:
- Lisibilité cognitive (Readability): Facilité d’un texte à être compris
- Lisibilité perceptive (Legibility): Facilité d’un texte à être lu (Uniquement la perception visuelle)
Nous allons nous intéresser ici à la lisibilité perceptive qui fait souvent énormément défaut sur certains sites alors que l’effort à fournir pour y remédier est souvent moindre.
Quelques règles générales
- Le confort de lecture dépend d’abord de la longueur de vos lignes de texte.
On préconise de manière générale d’avoir des lignes de texte avec 52-78 caractères (espaces inclus). - Le deuxième paramètre à prendre en compte est la valeur de votre interlignage (line-height) qui devra de manière générale être plus important que votre intermot (espace).
De cette façon, l’oeil aura tendance à se déplacer le long des lignes plutôt que verticalement. - L’espacement entre vos mots doit dépendre du premier paramètre (longueur de ligne).
Plus vos lignes sont longues, plus votre espacement entre les mots doit être petit et inversement. - Pour ne pas casser la mise en pratique de tous ces paramètres, il est conseillé de ne pas utiliser un alignement “justifié” de votre texte mais tout simplement une disposition “aligné à gauche” qui reste la disposition la plus lisible.
- Ne pas abuser de texte en lettres capitales (notamment pour de longs blocs de texte) ce qui rend la lecture difficile.
Contraste et lisibilité
Le choix d’un contraste positif (texte clair sur fond sombre), ou négatif (texte foncé sur fond clair) a des répercutions sur la lisibilité.
Su un fond sombre, on peut facilement se rendre compte que l’on doit appliquer des règles différentes afin de maximiser la lisibilité.
En effet, il faudra sûrement augmenter l’interligne, l’espace entre les lettres et réduire le graissage des caractères.
Pour s’en rendre compte, voici un exemple qui met en pratique ces différences:
Pour information, il n’est pas forcément souhaitable que le contraste soit maximal.
En effet, un fond clair sans être à 100% blanc (et inversement pou un fond sombre) est préférable. On peut alors aussi jouer sur la couleur de texte afin de diminuer le contraste (Ex: Couleur de police grise foncée au lieu de d’un noir profond).
De manière générale, le contraste positif n’est pas à proscrire, mais il trouve son utilité principalement pour l’affichage de textes courts, la mise en valeur d’images…
Il convient également de compenser sa moindre lisibilité par une augmentation de la taille des polices.
En conclusion…
Après cette réflexion générale sur la lisibilité perceptive, il faudra se pencher sur la mise en pratique de ces notions avec une utilisation correcte des règles CSS.
Si vous ne savez pas trop comment choisir et appliquer les règles CSS, je vous conseille cet article qui détaille une bonne utilisation des propriétés et leurs justifications.
Pour tester vous même vos règles, vous pouvez également vous rendre sur ce site et/ou celui-ci qui se chargeront de présenter le rendu et les règles CSS associées.
Si ce sujet vous a intéressé, je vous conseille de poursuivre votre lecture avec ces différents articles:
8 Commentaires
Article bien intéressant ma foi ! Merci.
[...] Soignez et améliorez votre typographie sur Internet, [...]
Merci pour cet article très intéressant et très bien construit…
Voilà un billet proprement salutaire. C’est idiot (de ma part) de le dire, mais effectivement, ton blog est (assez) très lisible, quand ce n’est pas le cas pour d’autres, et on ne l’impute qu’au thème ou à ce je-ne-sais-quoi, la déco*, les couleurs…
Si certaines règles simples peuvent être appliquées, en plus du design, royal, le mec. Bravo et merci de l’info (mon ophtalmo lui ne te remercie pas).
Amicalement.
Al.
*tu serais donc le Valéridamido du web : pas maaaal! Mais évite quand même la mèche (blonde) coiffée comme un dessous de bras, retenue par le pic à glace de Sharon Stone.
Ainsi que la forte poitrine.
Tu donnes des leçons sur la typographie alors que tu ne la respecte même pas ? Je te laisse chercher tes erreurs…
@Manu: Je n’ai pas la prétention de donner des leçons comme tu dis…
Ce billet a pour vocation de rassembler des pistes que j’ai trouvé par ci par là dans le cadre de recherches sur ce sujet.
Après, c’est comme tout, il ne faut pas appliquer bêtement des règles pour arriver à un résultat satisfaisant.
Si tu veux rediscuter de ce qui te gène dans mon template, ce sera avec grand plaisir…
Mais je n’ai pas de compte à rendre…
Manu : tu ferais bien de détailler ton argumentation
Décidément entre la typographie, le référencement, l’ergonomie, ce blog est plein d’à propos ! Qualité ++
Je suis bien content que la blogroll de Gonzague m’a amenée ici !
Allez zou, j’te RSS !