Bill Gates a dit : « Le contenu est roi » et en ce qui concerne l’expérience utilisateur en ligne, c’est la vérité à 100%. Offrir une expérience utilisateur exceptionnelle ne signifie pas seulement offrir un excellent contenu – cela signifie également fournir ce contenu dans un format utilisable et utile qui encourage la lecture et l’interaction plutôt que de cliquer hors du site parce qu’il est illisible.
Donc la typographie sur le web devient une partie vitale du travail du designer. Plus que toute autre partie du design – choisir les bonnes polices et afficher ces polices de la bonne manière fera ou défraiera l’expérience utilisateur.
La typographie est l’utilisation de la police pour défendre, communiquer, célébrer, éduquer, élaborer, éclairer et diffuser. En chemin, les mots et les pages deviennent de l’art.
– James Felici, auteur de The Complete Manual of Typography.
La typographie a une histoire longue et intéressante. Elle est importante depuis la production de la presse écrite et ce n’est pas quelque chose de nouveau pour Internet.
Lignes directrices pour l’utilisation de la typographie sur Internet
Il existe de nombreuses lignes directrices qui peuvent être utilisées pour informer votre choix de typographie en ligne. Il convient également de noter que toutes (et en fait toutes) ces directives peuvent être brisées si vous cherchez à créer un effet ou si vos utilisateurs préfèrent que vous le fassiez. Il n’existe pas de modèle de typographie unique et la recherche utilisateur dans ce domaine de l’UX est aussi importante que dans d’autres domaines de l’UX.
Voyons donc comment tirer le meilleur parti de la typographie en ligne :
Titres
Les titres sont une partie vitale de l’expérience de contenu – ils doivent être écrits pour attirer l’attention de l’utilisateur ou ils passeront rapidement à autre chose. Cependant, ils doivent également être affichés correctement, ce qui signifie avoir la bonne taille de la police et la police elle-même.
La police de titre en ligne occupe désormais 38 px ! C’est une augmentation importante au cours de la dernière décennie. Cela signifie également une compréhension accrue du fait que si vous n’attirez pas l’attention de l’utilisateur – il va ailleurs. Les autres titres ont tendance à se situer entre 20 et 32 pixels.
Quant aux polices elles-mêmes ; il y a même une répartition entre les polices serif et sans-serif utilisées en ligne ; et les polices serif les plus populaires sont Georgia et Chapparal Pro, Arial et Freight Sans Pro étant les polices sans-serif les plus populaires. N’ayez pas peur d’expérimenter avec les polices, mais assurez-vous d’obtenir les avis des utilisateurs sur leur lisibilité.
Vous n’avez pas besoin d’être un fan des nuages de mots pour voir que le titre dans ce nuage fait le travail d’attirer l’attention. Les titres doivent attirer l’attention du lecteur pour les rendre efficaces.
Le corps du texte
La typographie du corps de texte est tout aussi importante que celle des titres. Les titres peuvent attirer les lecteurs, mais c’est le corps du texte qui les fait traîner. Encore une fois, l’affichage du contenu est vital pour cela.
Les tailles de police les plus populaires pour le corps de texte sont de 14 à 16 px, ce qui a de nouveau augmenté au cours de la dernière décennie, lorsque les polices plus petites étaient à nouveau populaires. Il est entendu que la copie doit être facile à lire maintenant.
Il convient également de noter que, généralement, il existe un rapport entre la taille de la police du titre et du corps du texte utilisé en ligne et que les titres ont tendance à être 2,5 fois plus grands que le corps du texte.
Il existe également un ensemble de règles qui s’appliquent à l’espacement et à la longueur des lignes pour le texte web (au moins pour les sites web ordinaires – les sites mobiles sont traités différemment, comme nous le verrons bientôt). Cela indique que la hauteur de ligne doit être 1,46 fois plus grande que la hauteur de police et que la longueur de ligne optimale est de 24,9 fois la hauteur de ligne optimale. La longueur de ligne (mesure) peut également être exprimée en caractères – 85 caractères étant à peu près optimaux. Cette règle empirique devrait toujours permettre les marges, la marge interne, etc. qui rendent le texte du corps attrayant visuellement.
Quant aux polices elles-mêmes ; la majorité des sites web (près des 2/3 de tous les sites web) utilisent des polices serif pour le corps de texte, le reste utilisant des polices sans serif. Les polices serif les plus populaires sont les mêmes que pour les titres mais en sans-serif, ce sont Arial et Helvetica qui l’emportent.
Georgia est l’une des polices les plus populaires en ligne lorsqu’elle est utilisée « prête à l’emploi », mais la typographie sur mesure est également incroyablement populaire et donne aux designers la liberté de créer des expériences précises.
Polices personnalisées
Il convient de noter que malgré les conseils ci-dessus – la majorité des sites web n’utilisent pas du tout de polices standard. Ils utilisent des polices sur mesure conçues pour leurs marques. Cela signifie que tant que vous effectuez un peu de recherche sur les utilisateurs – il existe de nombreuses façons de faire ressortir votre copie de celle de votre concurrent.
Devenir mobile
Le web mobile ne suit pas les mêmes règles que le web standard et les designers devront examiner la façon dont les polices responsive peuvent être utilisées pour garantir des expériences cohérentes entre les différentes plateformes.
Couleurs de police
Pour rendre la vie confuse, il existe des conseils contradictoires sur l’utilisation des couleurs de police pour avoir le texte le plus lisible possible. Les normes web du W3C recommandent d’utiliser des polices qui contrastent avec l’arrière-plan dans un rapport de 3:1 au minimum. Cependant, d’autres sources affirment que ce contraste peut être rebutant et peut même avoir un impact sur la capacité des lecteurs dyslexiques à analyser le texte. Cela signifie qu’il est impératif que vous testiez les couleurs (avec de vrais utilisateurs) de vos polices avant de les utiliser.
Les couleurs devraient créer du contraste, mais exactement quel quantité de contraste est à débattre. Il existe des directives contradictoires à ce sujet et vous voudrez les tester avec vos utilisateurs pour en être sûr.
Ce qu’il faut retenir
Le contenu est vraiment roi en ligne. Peu importe à quel point vos créations sont belles ou votre navigation merveilleuse – sans contenu, les utilisateurs vont ailleurs. Pour maximiser l’expérience utilisateur de ce contenu ; vous devrez l’afficher de telle manière qu’il incite le lecteur à s’engager avec le contenu et à rendre l’acte de lire le contenu agréable. Les règles ci-dessus fournissent une base solide pour fournir un contenu agréable mais comme toujours ; ils ne remplacent pas la recherche et les tests avec vos utilisateurs.
Références et où en savoir plus
Course: Web Design for Usability:
https://www.interaction-design.org/courses/web-design-for-usability
You can find some interesting and inspiring typography projects on Behance – https://www.behance.net/search?field=97
The W3C standards on typography can be found here – https://www.w3.org/wiki/Typography_on_the_Web
The usability geek gives their take on best typography practices for usability here – http://usabilitygeek.com/12-typography-guidelines-for-good-website-usability/
