Une typographie bien pensée et bien choisie est essentielle pour obtenir un site Web esthétique et, surtout, facilement lisible. Mais savez-vous comment rendre le texte du site web clair et cohérent avec l'identité de votre marque ?
Ne vous inquiétez pas. J'ai rassemblé les 8 règles de typographie les plus cruciales qui rendront l'ensemble du processus de création de la typographie parfaite pour votre site Web simple et efficace. Assurez-vous de suivre toutes les règles et vous serez récompensé par un système de typographie transparent qui donnera à votre projet un aspect professionnel et améliorera son UX.
8 principes de typographie à suivre
1. Choisissez la bonne police
Le plus important est que votre typographie reflète la vraie nature de votre industrie. Par conséquent, choisir la bonne typographie de site Web ne peut pas être une question de hasard. Ce n'est pas parce qu'une police est populaire et que vous l'aimez qu'elle conviendra à votre marque. Faites attention à ce que la police communique et si elle correspond au style de votre marque.
Faites attention à ce que la police communique et si elle correspond au style de votre marque. Si vous dirigez un magasin pour enfants, vous n'utiliserez pas de polices professionnelles simples et élégantes et vice versa. Associez toujours les polices à la communication de votre marque pour être cohérent avec celle-ci.
Si vous souhaitez savoir ce qu'il faut rechercher lors du choix de la meilleure police pour votre site Web , consultez notre article sur les polices de site Web .
2. Sélectionnez la taille de la police
La taille de la police sur la page est importante ! Si vous choisissez une police ni trop petite ni trop grande, vous faciliterez grandement la lecture de vos utilisateurs. Une unité spéciale utilisée par les typographes pour décrire les polices est "pt" ou "point".
La plage préférée de tailles de police standard pour les sites Web se situe entre 14 et 25 points. Des polices plus grandes peuvent être réservées pour les titres - 20 pt et plus , et pour le texte brut, la meilleure plage est de 14 à 18 pt.
Quelle que soit la taille de police que vous choisissez, assurez-vous que la taille de police :
a) rend le texte lisible - une taille de police de 12 points et moins peut nuire considérablement à la lisibilité ;
b) correspond à la police de caractères - par exemple, pour sa police système Roboto Google recommande un minimum de 16 pt. D'autre part, San Francisco - la police utilisée, entre autres, dans les appareils Apple, devrait avoir une taille d'au moins 18 points ;
c) reflète l' objectif du site Web - si la page n'est pas dominée par le texte mais par la conception, vous pouvez utiliser une police plus petite. Aussi dans le cas de pages interactives incitant l'utilisateur à cliquer à chaque étape, cette solution peut être envisagée. Si, en revanche, vous avez affaire à un site Web où le texte domine et où la tâche principale de l'utilisateur est la lecture (par exemple, zone de blog, portail d'informations), il est préférable de choisir une police légèrement plus grande.
Comment choisir la taille de l'en-tête ?
Vous avez décidé de la taille de la police de votre corps de texte mais vous ne savez pas comment conserver la taille des titres proportionnellement au reste du contenu ? Il existe plusieurs bonnes pratiques pour cela :
a) L'en-tête H1 doit correspondre à 300 % de la taille de police utilisée dans le corps du texte. Par exemple, si votre site Web utilise une police de 18 points pour votre corps de texte, la taille optimale pour vos en-têtes est de 54 points.
b) L'en-tête H2 doit correspondre à 200 % de la taille de police du corps du texte. Dans ce cas, avec une taille de police de base de 18 pt, le titre H2 idéal serait de 36 pt.
Pour les rubriques successives, vous pouvez diminuer progressivement le pourcentage ; par exemple, pour l'en-tête H4, vous pouvez multiplier la taille de la police principale par 130-150 %.
Polices dans la version mobile
Lors du choix de la taille de la police, vous devez répondre à la question sur quels appareils le texte sera affiché. La taille de la police sera différente sur les moniteurs d'ordinateurs portables que sur les appareils mobiles. Si vous préférez vous concentrer sur l'apparence du site Web sur les appareils mobiles, rappelez-vous ces deux règles importantes :
a) Sur les écrans de smartphone, une grande police n'aura pas l'air sympa,
b) Les titres ne doivent pas dépasser deux lignes.
Par conséquent, lors de la conception d'un site Web mobile, il convient de vérifier l'apparence du texte et de s'assurer que la police n'est pas trop grande.
Lors de la création d'un site Web dans le constructeur BOWWE , il est automatiquement responsive. Cela signifie que, tout d'abord, vous n'avez pas besoin de créer un site Web séparé adapté aux appareils mobiles. Deuxièmement, l'édition du site Web peut basculer entre l'aperçu du bureau et l'aperçu mobile en quelques secondes. Grâce à cela, vous pouvez très facilement contrôler le comportement de la police de votre choix sur les appareils mobiles.
3. Utilisez le principe : moins c'est plus
Lors de la conception de sites Web, il est préférable de suivre le principe du minimalisme. L'utilisation de plus de deux types de polices dans un projet peut perturber l'esthétique du projet. La solution la plus sûre consiste à choisir deux types de police : titres et texte brut.
Tuttavia, devi anche tenere a mente il contrasto. Se utilizzi due font troppo simili, non attireranno completamente l'attenzione degli utenti. Cerca di non scegliere due font Sans Serif ma scegli invece una combinazione di Serif e Sans Serif, rendendo il tuo contenuto ancora più attraente.
N'oubliez pas non plus que toutes les polices ne peuvent pas fonctionner ensemble. Il existe des paires de polices qui s'aiment mieux, et certaines sont incompatibles. Cela vaut la peine de les connaître avant de faire votre choix définitif !
Si vous voulez être sûr à 100% de choisir le meilleur appariement de polices, vous pouvez toujours vous inspirer de l'appariement de polices sur fontpair.co .
4. Développer la structure du contenu
Un aspect tout aussi important de la typographie que le choix de la police est la mise en page et la structure de tout le contenu de la page. Peu importe qu'il s'agisse d'une brève description de votre entreprise ou d'un article détaillé dans la section blog - la structure de chaque type de contenu a un impact considérable sur la perception que les utilisateurs ont de votre site Web. Quelles sont les règles de typographie pour une meilleure lisibilité ?
Hauteur de ligne ou interlignage
suffisante hauteur de ligne et l'espace entre les lignes est essentiel. Une distance trop courte fera pratiquement se chevaucher les lignes de texte. En revanche, un lecteur trop haut sera "explosé". Il est donc préférable de trouver un nombre d'or.
Paragraphes et longueur de ligne
On sait depuis longtemps que les fragments de texte courts sont beaucoup mieux lus. Des lignes ou des paragraphes trop longs peuvent fatiguer les yeux et perturber le rythme de lecture. La longueur de la ligne doit être d'environ 50 à 75 caractères pour ne pas épuiser l'utilisateur. Il en va de même pour les paragraphes - ils facilitent la lecture des textes plus longs.
Alignement
En typographie, l'alignement est le positionnement du texte par rapport à une marge, au bord d'une page ou à un autre point de référence.
Bien qu'il semble pratique d'aligner tous les bords du texte, nous vous déconseillons de justifier finalement le contenu de la page. Les lecteurs justifiés sur Internet n'ont tout simplement pas l'air bien et, contrairement aux apparences, interfèrent avec la lisibilité. Lorsqu'il est aligné sur le bord gauche, vous pouvez déplacer les mots qui ne tiennent pas sur la ligne suivante tout en conservant le même espacement. Ceci est plus naturel à l'œil et donne le bon rythme de lecture.
5. Faites correspondre les couleurs
La couleur de la police est un élément de typographie étroitement lié à l'identité visuelle de votre marque sur Internet. Cependant, comme pour la combinaison de polices, vous devez également faire attention lors du choix de leurs couleurs. Voici les normes les plus essentielles pour la couleur de police :
Sélectionnez un maximum de 3 couleurs
Vous savez déjà qu'il vaut mieux suivre le minimalisme en typographie. Il en va de même pour les couleurs. Essayez de ne pas utiliser plus de trois couleurs dans le texte, car plus de couleurs peuvent semer le chaos sur le site Web et lui donner un aspect infantile.
Soignez le contraste
Le texte doit présenter un contraste adéquat avec l'arrière-plan. Bien sûr, la combinaison la plus sûre est la couleur de police noire sur un fond blanc ou gris clair. C'est la combinaison de couleurs la plus naturelle et ne fatigue pas les yeux de l'utilisateur lors de la lecture.
Faites correspondre uniquement les couleurs assorties
N'oubliez pas que certaines couleurs, comme le rouge et le vert, ne vont pas ensemble. Rompre les schémas de couleurs dans le cas des polices ne fonctionne généralement pas.
Pour sélectionner la couleur de la police plus rapidement et plus efficacement, vous pouvez utiliser l' outil Couleur de material.io . Grâce à cela, vous pourrez voir si la couleur de police sélectionnée s'accordera bien avec, par exemple, la couleur d'arrière-plan de votre site Web.
6. Démarquez-vous
COMMENCEZ MAINTENANT
Avec une hiérarchie d'importance dans votre texte, vous pouvez souligner qu'un mot est plus important qu'un autre. Par conséquent, les mots les plus critiques de votre site Web doivent être mis en évidence. Vous pouvez les agrandir, les colorer ou utiliser des caractères gras ou italiques.
La mise en évidence de mots ou de fragments de texte plus essentiels est très importante dans le cas de documents de blog. Une telle procédure les rend plus lisibles et plus faciles à retenir. Il vaut également la peine de les mettre en gras pour les mots-clés nécessaires au positionnement élevé du site Web dans les résultats de recherche.
7. Créez votre échelle de police
l'échelle des polices est le processus d'augmentation ou de diminution de la taille du texte sur un site Web.
Vous souhaiterez peut-être créer une échelle de police pour plusieurs raisons. L'une des raisons est de s'assurer que tout le texte de votre page a la même taille. Cela peut être important pour la convivialité, principalement si vous utilisez du texte pour transmettre des informations importantes à vos visiteurs. Cela peut également rendre votre page plus uniforme et professionnelle.
Une autre raison d'utiliser une échelle de police est de rendre le texte plus facile à lire. Vous pouvez constater que certaines polices sont trop petites ou trop grandes lorsque vous les affichez à leur taille par défaut. En redimensionnant le texte, vous pouvez le rendre plus confortable à lire.
Il y a quelques points à retenir lors de la création d'une échelle de police.
a) Assurez-vous que tout le texte de votre page est de la même taille. Cela inclut à la fois le corps du texte et tous les titres ou autres éléments de texte.
b) Choisissez une taille de police confortable et facile à lire. Vous devrez peut-être essayer différentes tailles de police pour trouver celle qui vous convient. Certaines polices peuvent sembler bonnes à grande taille mais deviennent difficiles à lire lorsqu'elles sont réduites.
Il existe de nombreux outils en ligne gratuits avec lesquels vous pouvez facilement créer une échelle de police. L'un d'eux est type-scale.com .
8. Faites des recherches et cherchez l'inspiration
Trouvez les meilleures conceptions de sites Web avec des exemples de typographie passionnante. Sur des sites comme Dribbble , vous pouvez trouver des tonnes d'inspiration. Vous pouvez également utiliser des plateformes comme Pinterest qui vous permettent de créer des soi-disant tableaux où vous pouvez collecter tout ce qui vous inspire et le partager avec vos amis ou collègues.
Cela vaut également la peine de faire des recherches parmi des sites Web similaires au vôtre ou à ceux de vos concurrents. Ensuite, vous apprendrez comment les autres mettent en œuvre les meilleurs principes de typographie et comment vous pouvez le faire aussi !
Meilleures règles de typographie - résumé
N'oubliez pas que la typographie est la clé du succès de toute conception de site Web réussie. En suivant les principes de la typographie , vous pouvez être sûr que le texte sera non seulement lisible mais surtout qu'il créera la bonne ambiance et reflétera fidèlement le style de votre marque.
En suivant les meilleures pratiques de bonne typographie trouvées dans cet article, vous pouvez rapidement améliorer l'apparence de votre site Web et, surtout, l'expérience utilisateur.
Karol est un entrepreneur en série, conférencier e-commerce m.in pour la Banque mondiale et fondateur de 3 startups, dans le cadre desquelles il a conseillé plusieurs centaines d'entreprises. Il était également responsable des projets des plus grandes institutions financières d'Europe, d'une valeur de plus de 50 millions d'euros.
Il est titulaire de deux masters, l'un en informatique et l'autre en marketing management, obtenus lors de ses études en Pologne et au Portugal. Il a acquis de l'expérience dans la Silicon Valley et en dirigeant des entreprises dans de nombreux pays, dont la Pologne, le Portugal, les États-Unis et la Grande-Bretagne. Depuis plus de dix ans, il aide les startups, les institutions financières, les petites et moyennes entreprises à améliorer leur fonctionnement grâce à la digitalisation.
