18 règles typographiques pour améliorer vos contenus web

Un des éléments essentiels pour rendre un contenu visuellement attrayant et agréable à lire est de s’assurer qu’il soit correctement mis en forme. En dehors du choix des couleurs, de la structure et des illustrations, la typographie influence la lisibilité et l’efficacité du message. Les possibilités en matière de polices de caractères sont illimitées. Mais il convient de suivre quelques règles pour rendre un texte banal séduisant et efficace.  L’objectif prioritaire des règles typographiques : harmoniser fond et forme pour encourager la lecture !

La typographie est cruciale car elle facilite le processus de compréhension et d’assimilation de l’information. Un texte bien formaté assure donc que l’accent reste mis sur le contenu et non sur l’effort nécessaire pour le lire.
Et dans un monde où la pratique de l’écriture manuscrite est de plus en plus supplantée par la typographie, il est étonnant de constater à quel point les bases de cette technique sont méconnues.

Une infographie en anglais liste 18 règles valables pour tous les types de textes, web ou print. Cet article s’en inspire.

Typographie, caractères, polices et fontes

De manière générale, la typographie fait référence à l’agencement des caractères d’écriture. Elle apparaît en Europe au milieu du 15ème siècle avec l’invention des caractères en plomb utilisés dans l’imprimerie. Mais c’est aussi l’art d’agencer les caractères d’écriture pour mettre en valeur un contenu et lui conférer une personnalité et un style.

Les caractères mobiles ou types qui la composent sont la manifestation visuelle de la parole. Assemblés, ils forment les mots que nous utilisons pour communiquer. Il n’est donc pas exagéré de dire que le caractère est l’essence de la communication visuelle. Car, même à l’heure où visuels et pictogrammes ont tendance à remplacer un peu vite les mots, ces derniers restent les seuls garants d’une richesse conceptuelle ou culturelle souvent difficile à traduire en images.

Les termes polices ou fontes évoquent les caractères d’une même famille, formant un alphabet complet et cohérent. Au fil du temps ces polices se sont multipliées, à tel point qu’elles ont donné naissance à de nombreuses classifications. À l’heure du numérique, le nombre de polices a augmenté de façon exponentielle. Pas facile de s’y retrouver dans cet univers très spécialisé.

Chaque police a une personnalité propre et correspond à un usage, une mode ou une époque définie. Il s’agit donc de trouver celles qui vous correspondent le mieux et qui sauront séduire votre public. Pour cela, il est important de reconnaître et identifier les résonances émotionnelles de chaque police. La question à se poser à ce stade : quelle image voulez-vous donner ? Moderne ou traditionnelle, légère ou musclée, masculine ou féminine, artistique ou technique, ludique ou sérieuse, etc.

Choisir une police qui a du caractère

Le choix des polices est d’autant plus important qu’il conditionne la lisibilité et, surtout, qu’il influence la manière dont les lecteurs percevront votre contenu (formel, décontracté, sérieux, créatif, …).

Chaque police a sa personnalité

Depuis l’avènement du web, la classification généralement utilisée, celle du W3C, regroupe les fontes en cinq familles génériques :

• serif : polices à empattement (ex : Times New Roman, Georgia, Garamond…)
• sans-serif : polices sans empattement (ex : Arial, Helvetica, Tahoma, Verdana…)
• cursive : polices simulant l’écriture à la main (ex : Lucida Handwriting)
• fantaisie : polices plus décoratives, surtout utilisées pour des titres (ex: Impact, Fraktur…)
• monospace : polices à largeur (chasse) fixe (ex : Courier New, Lucida Console…)
  

Évitez les polices par défaut
La plupart des logiciels de traitement de texte proposent des polices par défaut (Arial, Calibri, Times New Roman). Choisir une typo plus personnelle est déjà une manière de sortir du lot, d’indiquer que, pour vous, les détails comptent.
Si vous pensez que seul votre contenu a de l’importance, sachez qu’un texte kilométrique, mal structuré, sans titres et sous-titres, (donc difficile à lire en ligne) risque fort de vous faire perdre pas mal de lecteurs. Car, sur le web, les lecteurs scannent les textes plus qu’ils ne les lisent d’un bout à l’autre. Un texte lisse, sans points de repères, a donc peu de chance de capter l’attention.

Fuyez les clichés et les typos bling bling
Certaines polices ont tellement été utilisées à tort et à travers qu’elles sont devenues synonymes d’amateurisme et de mauvais goût.  Fuyez les Comic Sans et autre Papyrus, à moins de les utiliser avec une extrême prudence.

Sacrés caractères – Comic Sans par franceculture

Jouer avec les formes et les familles

La conception graphique repose sur des techniques qu’il est bon de maîtriser pour mettre en valeur ses idées. Pour que la forme reflète le fond, mieux vaut savoir mettre en relief et hiérarchiser son contenu et le formater à l’aide de titres, sous-titres et autres éléments contextuels.

2 ou 3 polices maximum

Pour donner du relief au contenu, il est préférable d’utiliser une police différente pour les titres et pour le corps du texte. Par contre, mieux vaut limiter le nombre de polices.
Pour varier les effets visuels, vous jouerez plutôt sur la taille, la graisse, voire la couleur des blocs de texte plutôt que de changer de police de caractères. Alternez aussi sérif et sans sérif.
Mais avant tout, distinguez l’essentiel (un nom, un titre, une offre) de ce qui l’est moins.

Jouez sur les contrastes

Mieux vaut ne pas choisir deux polices de la même famille. Mélangez une police sans-serif (corps) avec une cursive ou une police fantaisie (titres) ; l’impact sera nettement supérieur. C’est bien connu, les contraires ont tendance à attirer : des polices «introverties» et  « extraverties » s’équilibrent lorsqu’elles sont combinées. Il peut donc être intéressant de coupler une police avec une « forte personnalité » avec une police plus neutre pour équilibrer votre design.

Jouez sur la taille des caractères

Pour beaucoup le point 12 reste le standard à utiliser dans tous les cas. Pas forcément ! Un  point 10 ou 11 peut convenir pour des documents imprimés. Vous pouvez même descendre plus bas dans certains cas (jusqu’au point 8). Par contre, pour une page web, la tendance actuelle s’oriente vers des corps de texte de 14 ou 16.
Mais dans tous les cas, en toute logique, les éléments de contenu les plus importants seront les plus grands.

N’utilisez pas QUE DES MAJUSCULES

Notre cerveau lit beaucoup plus vite et plus facilement si les lettres correspondent à des formes. Or, les formes disparaissent en grande partie dans un texte rédigé tout en majuscule. De plus, l’usage des majuscules est souvent ressenti comme plus agressif.

Privilégier la lisibilité avant tout

Quelles sont les polices les plus lisibles ? Des polices avec ou sans empattements (serif ou sans serif). C’est un débat qui continue à faire rage entre les anciens et les modernes. Mais tous s’accordent sur le fait que la lisibilité d’un texte dépend d’un ensemble de facteurs tels que la longueur des lignes, la taille, le corps et la graisse des caractères ainsi que la hauteur de l’interligne (espace entre les lignes).

Couleurs et contrastes

Vous pouvez bien sûr varier les couleurs et les contrastes. Limitez toutefois cette technique à certains titres, évitez les contrastes agressifs et privilégiez les caractères larges ou gras aux polices étroites ou spéciales. Pour des textes longs, mieux vaut opter pour un contraste positif (texte foncé sur fond clair).

Longueur de ligne
On estime généralement que le nombre optimal de caractères d’une ligne se situe entre 60 et 72. Mais c’est surtout le contexte qui déterminera la valeur idéale. On comprend aisément qu’un roman réponde à des critères différents qu’un magazine, une page web ou un CV. Pour une page web, mieux vaut éviter les blocs de texte qui s’étendent d’un côté à l’autre de l’écran ; vous risquez de perdre vos lecteurs.

Interlignage
L’interlignage est la valeur de l’écart entre les lignes d’un texte, il peut être augmenté ou diminué. Généralement, il est légèrement plus grand que la taille de la police (ex : un interlignage de 12 pour une police de 10).

Facilité de lecture (readability)
La facilité de lecture est fonction de la taille et du type de police, de l’interlignage, de l’espacement des caractères et de la longueur des lignes.

Facilité de compréhension (legilibility)
La lisibilité de certaines police peut poser problème. Un logo, un nom, un titre doivent être facilement reconnaissable et  lisible.
Mieux vaut tester la police choisie dans plusieurs cas d’application (tout en majuscule, varier les tailles, tester les formes italique, bold, etc.)

Soigner les détails

Faites un usage correct des petites majuscules
Toutes les majuscules, petites ou grandes, posent problème si elles s’appliquent à une large section de texte.
Les petites majuscules s’utilisent surtout pour des abréviations ou pour attirer l’attention sur une ligne.

Retour à la ligne et césures
Les coupures de mots à la fin d’une phrase ne sont pas très heureuses visuellement. Et elles ne facilitent pas la lecture. Pour les éviter, il vous suffit de changer les paramètres par défaut de votre logiciel de traitement de texte.

Pas de mots orphelins
Les mots orphelins sont ces mots abandonnés, seuls, en début de ligne, à la fin d’un paragraphe. Si cela vous arrive, songez à reformuler votre phrase pour rééquilibrer votre bloc de texte.

Maîtrisez l’art de la mise en avant
La mise en évidence de certains éléments de texte est appréciée par les internautes pressés qui scannent votre contenu à la recherche des informations qui les intéressent. En règle générale, on considère qu’il ne faut pas mettre plus de 10% du texte en évidence. Il faut donc apprendre à doser pour obtenir l’effet recherché. De même, mieux vaut ne pas mélanger trop de techniques (couleurs, italique, bold, changement de police ou de taille). L’excès nuit en tout.

Jouez avec les chiffres
Connaissez-vous les chiffres elzéviriens ? Ce sont des chiffres minuscules, non alignés ou suspendus, qui débordent de manière variable de la ligne de base, en opposition aux chiffres classiques, dits chiffres Didot, alignés sur cette même ligne et de même hauteur que les majuscules. Utiliser de tels chiffres permet de mieux harmoniser chiffres et textes.

Connaissez-vous les règles de ponctuation ?
La ponctuation a non seulement un puissant impact visuel mais elle donne aussi sens, rythme et souffle au contenu. Elle traduit les modulations de la voix, d’où émergent sentiments et émotions. Mieux vaut donc en connaître et maîtriser l’usage.  Mais l’écriture étant un art, les règles sont parfois transgressées. À l’exemple de Coca-Cola qui réinvente l’utilisation de la ponctuation pour donner plus d’impact à ses slogans.  La ponctuation sert alors à rythmer, à créer la surprise, donner le ton, intriguer ou attirer l’attention.
Enfin, le saviez-vous, la règle, en typographie française, est d’ajouter une espace après un signe simple (, .) et 2 espaces autour des signes doubles (: ; ! ?).

18 rules for using text