\n Ici, nous ne parlons que du lien UX et typographie, sans mentionner le r\u00f4le de la typographie dans la formation de la personnalit\u00e9 visuelle du site Web, la d\u00e9finition de votre marque et l’attention du lecteur. Consultez cet article<\/a> pour en savoir plus.\n<\/p>\n \n Le choix de la typographie pour ce site Web d’\u00e9glise stimule non seulement l’UX sur le site Web, mais contribue \u00e9galement \u00e0 fa\u00e7onner l’identit\u00e9 visuelle de la marque).\n<\/p>\n \n Comment booster l’UX sur votre site Web en optimisant la typographie ?\n<\/p>\n \n Il existe plusieurs fa\u00e7ons de booster l’exp\u00e9rience utilisateur sur votre site Web en optimisant la typographie. Comme l’UX et la typographie sont \u00e9troitement li\u00e9es, en optimisant la typographie, vous optimisez \u00e9galement la lisibilit\u00e9 de votre texte et, ainsi, vous ajoutez \u00e0 l’UX globale de votre site Web. Voyons quelles sont les r\u00e8gles pour optimiser la typographie :\n<\/p>\n \n Si vous voulez que votre site Web ait l’air coh\u00e9rent et professionnel, utilisez jusqu’\u00e0 trois polices (pas plus). Diff\u00e9rentes polices sur un site Web se heurtent et emp\u00eachent l’utilisateur de lire le texte. L’utilisation de plusieurs polices d’apparence similaire vous aide \u00e0 cr\u00e9er une coh\u00e9rence UX sur toutes les pages de votre site Web et \u00e9vite aux utilisateurs d’adopter des changements de style fr\u00e9quents.\n<\/p>\n \n C’est exactement ce que vous devriez \u00e9viter sur votre site Web.\n<\/p>\n \n Souvent, l’utilisation d’une seule police suffit. Si vous pensez toujours que vous avez besoin de quelques polices, optez pour les polices qui ont la m\u00eame largeur de caract\u00e8res. Dans ce cas, les polices ne diff\u00e9reront pas trop les unes des autres et distrairont le lecteur.\n<\/p>\n \n Ce site Web de remodelage utilise la police non conventionnelle Six Caps pour renforcer l’identit\u00e9 visuelle du site Web. Cette police est combin\u00e9e avec Roboto Condensed pour avoir deux polices dont les largeurs de caract\u00e8res correspondent.\n<\/p>\n \n Une autre bonne id\u00e9e de combiner quelques polices consiste \u00e0 marier les polices qui imitent l’\u00e9criture manuscrite avec les polices r\u00e9guli\u00e8res. La typographie manuscrite ajoute une touche personnelle \u00e0 la conception globale de votre site Web et d\u00e9veloppe le caract\u00e8re visuel de votre site Web.\n<\/p>\n \n Ce site Web a une sensation douce et f\u00e9minine avec la police Caveat Handwriting.\n<\/p>\n \n Les empattements sont les petites lignes \u00e0 la fin des traits de lettres. Dans la typographie imprim\u00e9e, les empattements aident les gens \u00e0 reconna\u00eetre les lettres imprim\u00e9es plus rapidement et plus efficacement. Cependant, \u00e0 l’\u00e9cran, en particulier sur un \u00e9cran non Retina, les empattements ne sont pas aussi bien d\u00e9finis que sur le papier, ce qui nuit partiellement \u00e0 la lecture.\n<\/p>\n \n En plus d’assurer une meilleure lisibilit\u00e9, les polices sans empattement parlent de mani\u00e8re plus audacieuse et plus minimale.\n<\/p>\n \n Ici, je ne dis pas que vous devriez compl\u00e8tement abandonner les polices serif. Un meilleur conseil serait d’\u00eatre plus prudent avec eux et d’utiliser ceux qui sont propres et pr\u00e9cis.\n<\/p>\n \n Par exemple, ce site Web de photographie cr\u00e9ative utilise la police Open Sans sans empattement qui aide le site Web \u00e0 faire une d\u00e9claration audacieuse, \u00e9l\u00e9gante et d\u00e9cisive.\n<\/p>\n \n L’espace sur Internet est illimit\u00e9. C’est pourquoi il n’est pas n\u00e9cessaire de l’enregistrer et d’opter pour de petites tailles de police qui imposent une fatigue oculaire suppl\u00e9mentaire aux utilisateurs. Les lecteurs malvoyants peuvent \u00e9prouver des difficult\u00e9s \u00e0 lire un petit texte, tandis que m\u00eame les lecteurs ayant une bonne vue ressentent de la fatigue et doivent faire des pauses pour arriver \u00e0 la fin, disons, d’un texte de 10 points.\n<\/p>\n \n Si vous ne voulez pas que vos utilisateurs aient du mal \u00e0 lire le texte que vous pr\u00e9sentez ou \u00e0 le zoomer, optez pour des tailles de police de 16 pt +. Ces tailles de police minimisent la fatigue oculaire et aident les utilisateurs \u00e0 atteindre leur objectif sur votre site Web sans \u00e9puisement visuel.\n<\/p>\n \n Le site Web de Malcolmy utilise une typographie lisible de 16 points pour ses pages d’accueil et de blog.\n<\/p>\n \n Sur votre site Web, vous ne devez pas entasser tout l’espace disponible avec votre texte. En tenant compte d’une longueur de ligne optimale, vous vous en tenez \u00e0 des normes \u00e9lev\u00e9es d’exp\u00e9rience de lecture. Si les lignes sont trop courtes, les yeux du lecteur doivent aller et venir lors de la lecture du texte, ce qui impose une fatigue oculaire suppl\u00e9mentaire. Si les lignes sont trop longues, il est trop difficile de se concentrer sur le mot exact que vous lisez et il est trop facile de se perdre.\n<\/p>\n \n Pour \u00e9viter les deux situations d\u00e9favorables, respectez 60 caract\u00e8res par ligne (pour les \u00e9crans de tablette\/PC).\n<\/p>\n \n Cette image illustre que les textes avec des lignes trop courtes ou trop longues sont plus difficiles \u00e0 lire que les textes qui s’en tiennent \u00e0 la longueur de la ligne \u00ab\u00a0golden middle\u00a0\u00bb de ~ 60pt.\n<\/p>\n \n La longueur de ligne optimale pour les appareils mobiles (par exemple les smartphones) est plus courte. Pour que le texte soit lisible sur les petits \u00e9crans, la ligne doit comporter environ 30 \u00e0 40 caract\u00e8res.\n<\/p>\n \n Comme vous le savez, la taille des lettres pour les titres est g\u00e9n\u00e9ralement plus grande que pour le corps du texte. Les rubriques diff\u00e8rent \u00e9galement par leur taille, allant de la plus petite \u00e0 la plus grande. Sur votre site Web, vous devrez opter pour diff\u00e9rentes tailles de police pour divers \u00e9l\u00e9ments (par exemple, les boutons, les l\u00e9gendes, les \u00e9l\u00e9ments de navigation, etc.), ainsi que pour diff\u00e9rentes \u00e9paisseurs de police pour la mise en valeur.\n<\/p>\n \n Pour garantir la distinction des \u00e9l\u00e9ments de votre site Web, optez pour une police de diff\u00e9rentes tailles et \u00e9paisseurs. Si vous optez pour l’une des polices standard, par exemple la police de caract\u00e8res Google Fonts Roboto, vous verrez toutes les variations dont elle dispose. Certaines polices sont disponibles en plus de 10 variantes, certaines n’en ont que quelques-unes. Optez pour une police qui a un riche ensemble de variations pour assurer une repr\u00e9sentation diversifi\u00e9e du contenu sur votre site.\n<\/p>\n \n Diff\u00e9rents styles de police de la police Roboto Google.\n<\/p>\n \n Le temps des sites Web multicolores et hurlants est r\u00e9volu. D\u00e9sormais, la lisibilit\u00e9 et le contraste sont les forces dominantes qui d\u00e9terminent les choix de couleurs. Tout d’abord, votre contenu doit \u00eatre lisible, et la combinaison qui a \u00e9t\u00e9 pendant de nombreuses ann\u00e9es consid\u00e9r\u00e9e comme la meilleure est le texte noir sur fond blanc. Cette combinaison assure un contraste maximal et remonte \u00e0 l’\u00e9poque de la typographie classique.\n<\/p>\n \n Cependant, r\u00e9cemment, on a souvent soutenu que la couleur noire impose plus de fatigue oculaire que la couleur gris fonc\u00e9. Les nuances de gris fonc\u00e9 contrastent \u00e9galement bien avec le fond blanc, mais elles sont un peu moins denses et offrent une exp\u00e9rience de lecture plus confortable.\n<\/p>\n \n Ce sont les nuances de gris qui surpassent le noir pour assurer une exp\u00e9rience de lecture confortable.\n<\/p>\n \n Une page de site Web utilisant le gris fonc\u00e9 comme couleur de texte du curseur.\n<\/p>\n \n Lorsque vous faites votre choix de couleur, assurez-vous de le tester sur diff\u00e9rents appareils et dans diff\u00e9rents environnements. Le texte agr\u00e9able \u00e0 lire dans un environnement de bureau typique peut \u00eatre difficile \u00e0 distinguer sur un smartphone, en particulier lorsqu’il est utilis\u00e9 \u00e0 l’ext\u00e9rieur. Il est difficile de tenir compte de tous les facteurs, mais votre objectif devrait \u00eatre de tenir compte de la majorit\u00e9 des environnements et d’offrir \u00e0 diff\u00e9rents groupes d’utilisateurs une exp\u00e9rience de navigation confortable.\n<\/p>\n \n Minimiser la hauteur de ligne pour ins\u00e9rer plus de contenu n’est pas une bonne pratique. Si les lignes sont trop proches les unes des autres, un lecteur est plus susceptible de sauter \u00e0 la ligne pr\u00e9c\u00e9dente ou suivante et de rester bloqu\u00e9. L’espace entre les lignes (interligne) doit \u00eatre sup\u00e9rieur de 30 % \u00e0 la hauteur des caract\u00e8res utilis\u00e9s. Une telle direction assure la meilleure lisibilit\u00e9 du contenu et sa perception visuelle claire.\n<\/p>\n\n 1 : Minimiser le nombre de polices utilis\u00e9es
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2 : Optez pour des polices Sans Serif pour am\u00e9liorer la lisibilit\u00e9
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Taille de police d\u00e9cente
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4 : Observer la longueur de ligne optimale
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5 : Optez pour des polices de caract\u00e8res qui fonctionnent bien dans diff\u00e9rentes tailles
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6 : Faites des choix de couleurs intelligents
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7 : N’exp\u00e9rimentez pas la hauteur de ligne
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n