Bien choisir les typographies d’un site web
Lors de la création ou de la refonte d’un site Web, il y a beaucoup de choses à garder à l’esprit. Entre la rédaction de votre contenu et le choix des visuels parfaits, certains éléments fondamentaux peuvent être laissés de côté. Et s’il y a une chose à ne pas négliger, ce sont les polices qui apparaitront sur votre site Web. Les typographies d’un site peuvent communiquer davantage sur votre marque que les mots seuls. Les typographies de votre site doivent donc amplifier la voix de votre marque, tout en ayant une apparence nette à l’écran. Dans ce guide, nous allons vous donner quelques conseils afin de choisir les meilleures polices pour votre site Web.
Identifiez la personnalité de votre marque
Votre choix de police doit représenter la personnalité de votre marque pour que le design soit parfait. Êtes-vous une entreprise traditionnelle, minimaliste et moderne ou amusante et originale ? Décririez-vous votre entreprise comme rétro, classique, avant-gardiste, funky ? Une fois que vous aurez répondu à ces principales questions, vous aurez une compréhension de la personnalité de votre marque et de l’apparence que vous devriez viser avec votre conception Web. Sur la base de cette identité, vous pouvez désormais choisir les bonnes typographies pour votre site Internet.
Choisissez des polices qui correspondent à votre marque
Supposons que vous possédiez un magasin de vêtements vintage avec une ambiance cool et moderne. Vous pouvez mélanger une police old-school et groovy pour les en-têtes avec une police classique sans empattement pour le corps du texte. Un exemple : vous utilisez une belle police serif à l’ancienne pour vos titres ? N’hésitez pas à l’associer à une typographie fine et sans-empattement dans le corps de texte. Les typographies du site lui donneront un look équilibré, à la fois intemporel et moderne, et fonctionnant parfaitement avec votre marque cool et rétro.
Assurez-vous que les typographies de votre site soient évolutives
Certaines polices sont facilement visibles lorsqu’elles sont à des tailles plus grandes, tandis que les polices avec des formes de lettres très fines ou des motifs trop ornés peuvent se fissurer avec des paramètres plus petits. S’assurer que vos polices soient évolutives est une étape vitale lors de l’intégration de la typographie dans votre interface utilisateur.
Les polices évolutives, également appelées polices vectorielles, sont des polices qui peuvent être agrandies ou réduites sans distorsion. Le contour de chaque caractère est stocké sous forme de formule mathématique. En plus d’offrir d’innombrables tailles de chaque police, les polices évolutives ont un avantage supplémentaire : elles tirent le meilleur parti de la résolution d’un périphérique (Ordinateur de bureau, smartphone etc.). Plus la résolution d’un moniteur est élevée, meilleure sera l’apparence d’une police évolutive.
Lorsque vous testez l’évolutivité des typographies sur votre site, assurez vous de le faire avec du texte réel plutôt qu’avec un espace réservé de type « Lorem Ipsum ». Cela vous donnera une idée plus réaliste de leur échelle.
Soyez conscient du temps de chargement des polices
Ne négligez jamais le temps de chargement de votre site. Très peu de visiteurs accepteront d’attendre plus de quelques secondes que le site soit chargé. En fait, des temps de chargement longs nuisent à l’expérience utilisateur de votre site. En résulte la perte de potentiels clients, surtout si vous êtes un site e-commerce. Les bibliothèques de polices couramment utilisées, telles que les polices Google, offrent des fichiers de polices Web qui s’affichent parfaitement dans un navigateur. Lors du téléchargement de polices Web, ne téléchargez jamais plus de jeux de caractères, de langues ou de styles que nécessaire. De cette façon, vous éviterez de surcharger votre serveur.
Voici quelques exemples de polices connues pour leur efficacité en termes de performance :
Poppins : Cette police moderne et polyvalente disponible sur Google Fonts est reconnue pour sa légèreté et son efficacité de chargement. Poppins est idéale pour les interfaces modernes, offrant une excellente lisibilité tout en maintenant un chargement rapide.
Roboto : Également disponible sur Google Fonts, Roboto offre un équilibre entre style et performance. Elle a été conçue pour une utilisation sur mobile et desktop, ce qui en fait un excellent choix pour les sites réactifs.
Lato : Lato est une autre police web-safe qui combine style et efficacité. Sa popularité vient de sa versatilité et de sa rapidité de chargement, la rendant adaptée pour un large éventail de sites web.
Montserrat : Appréciée pour son look moderne, Montserrat est une autre option efficace disponible sur Google Fonts. Elle est souvent utilisée pour les titres et les en-têtes sans compromettre les performances du site.
Source Sans Pro : Conçue par Adobe, cette police est une excellente option pour ceux qui cherchent un compromis entre esthétique et vitesse de chargement. Elle est souvent recommandée pour les textes longs et les contenus de lecture.
Police Web et Police Web Safe
Police Web
Les polices Web sont des types de polices spécialement conçues et optimisées pour une utilisation sur Internet. Elles sont généralement légères et conçues pour être lisibles sur différents écrans et appareils. L’utilisation de polices Web garantit une cohérence visuelle et une meilleure expérience utilisateur sur différents navigateurs et appareils.
Police Web Safe
Les polices Web Safe sont un ensemble spécifique de polices qui sont largement reconnues et compatibles avec tous les navigateurs web et systèmes d’exploitation. Leur principal avantage est qu’elles offrent une grande compatibilité, assurant ainsi que le texte s’affiche de manière cohérente pour tous les utilisateurs. Les exemples classiques de polices Web Safe incluent Arial, Times New Roman, et Courier New.
Les différents types de polices
Serif
Les polices Serif sont caractérisées par des petites lignes ou des traits aux extrémités de leurs lettres. Elles sont souvent utilisées pour les textes imprimés tels que les livres et les journaux en raison de leur lisibilité et de leur aspect classique. Exemples : Times New Roman, Georgia.
Sans Serif
Les polices Sans Serif, comme leur nom l’indique, n’ont pas de traits aux extrémités de leurs lettres. Elles offrent un look moderne et minimaliste, ce qui les rend populaires pour les contenus web et les interfaces utilisateur. Exemples : Arial, Helvetica.
Manuscrite
Les polices manuscrites imitent l’écriture manuelle. Elles peuvent varier de l’aspect élégant et formel à un style plus décontracté et informel. Ces polices sont souvent utilisées pour ajouter une touche personnelle ou artistique. Exemples : Brush Script, Pacifico.
Décorative
Les polices décoratives ont des designs uniques et sont souvent utilisées pour attirer l’attention. Elles sont idéales pour les titres, les logos, et les éléments graphiques, mais sont généralement déconseillées pour de longs textes en raison de leur lisibilité parfois limitée. Exemples : Comic Sans, Papyrus.
Outils pour trouver une police
Google Fonts : Google Fonts est une bibliothèque de polices gratuites largement utilisée, offrant une grande variété de styles. Elle permet de prévisualiser et de télécharger facilement des polices pour les utiliser sur des sites Web.
Adobe Fonts : Adobe Fonts (anciennement Typekit) offre une vaste collection de polices de haute qualité. Il est particulièrement utile pour ceux qui utilisent d’autres produits Adobe, car il s’intègre bien dans leur écosystème.
Font Squirrel : Font Squirrel est connu pour sa sélection de polices gratuites et de haute qualité. Le site propose également un outil pratique de génération de kits de polices Web, permettant une intégration facile sur les sites Web.
WhatFont : WhatFont est une extension de navigateur qui permet d’identifier facilement les polices utilisées sur les sites Web. C’est un outil pratique pour les designers et les développeurs qui cherchent à s’inspirer des polices utilisées par d’autres.
Moins, c’est mieux
S’il est tentant d’utiliser plusieurs polices dans un même webdesign, cela peut entraîner une interface surchargée ou encombrée. Nous vous recommandons de commencer par des polices de la même famille (c’est-à-dire une seule police). Les polices de la même famille ont été créées pour fonctionner harmonieusement ensemble. S’en tenir à une police donnera à votre interface un aspect plus cohérent. Vous êtes plus expérimenté dans le domaine de la typographie ? Vous avez à cœur d’avoir plus d’une police de caractères ? Dans ce cas, essayez de vous limiter à trois au maximum.
De nombreuses polices ont encore une plage suffisante pour vous garantir de nombreuses variantes de polices à des fins différentes. Par conséquent, vous en tenir à une ou deux polices devrait être tout à fait suffisant. Par exemple, certaines polices de caractères incluent des fonctionnalités telles que l’italique, les options étendues, gras et condensées, qui permettent des arrangements plus créatifs.
Idéalement, les typographies choisies pour votre site devraient englober une plage suffisante pour vous permettre de choisir vos polices principales, secondaires et tertiaires de la même famille. Examinons de plus près ces trois catégories :
Police principale
Utilisée pour tous les textes plus volumineux, tels que les titres (et même les logos), votre police principale sera la police la plus visible sur votre page. En tant que tel, il est essentiel qu’elle reflète l’identité de la marque, ce qui signifie que vous pouvez être un peu plus créatif et audacieux lorsque vous choisissez votre police principale.
Police secondaire
Votre police secondaire sera utilisée pour le corps de votre texte. Par exemple, toutes les descriptions présentes sur vos pages, seront écrite avec votre police secondaire. Elle doit donc être propre et facilement lisible.
Police tertiaire (accent)
Les polices tertiaires ou d’accentuation sont le plus souvent utilisées pour des éléments de site Web spécifiques, tels qu’un menu de navigation ou un bouton CTA. Elles doivent être suffisamment proéminentes pour attirer l’œil de vos utilisateurs et transmettre des informations importantes, mais suffisamment subtiles pour ne pas nuire à vos polices principales et secondaires, ni les heurter. L’important, mais aussi le plus difficile, est de pouvoir jongler entre ces trois polices tout en gardant l’expérience utilisateur aussi fluide que possible.
5 conseils pour trouver une police
Considérez la lisibilité des polices avant tout
Lors du choix des polices pour votre site web, privilégiez la clarté et la facilité de lecture des caractères. Optez pour des polices web avec un espacement adéquat et une hauteur de ligne qui améliorent la lisibilité du texte. Assurez-vous que la taille de la police est adaptée pour une lecture confortable sur tous les sites internet.
Considérez l’accessibilité de la police
Choisissez des polices pour votre site qui soient accessibles à tous, y compris pour les personnes avec des limitations visuelles. Évitez des styles d’écriture trop complexes, et optez pour des polices avec des empattements clairs et lisibles, assurant que le contenu de votre site est facile à lire.
Équilibrez uniformité et variété dans le design des polices
Sur votre site web, utilisez un nombre limité de styles de polices pour maintenir une uniformité dans le design. Assurez-vous que ces choix de polices se complètent bien et utilisez différents styles (comme le gras ou l’italique) pour structurer le texte, notamment dans les titres et le contenu principal.
Maintenez la cohérence dans la taille des polices sur votre site
Lors de l’utilisation de différentes polices web, comme les polices serif ou sans serif, il est important de conserver une cohérence dans la taille des caractères pour assurer une harmonie visuelle. Ajustez les tailles pour une uniformité visuelle sur votre site, et veillez à ce que cette cohérence soit respectée dans tous les éléments, y compris sur les différents appareils et sites internet.
Adaptez les polices à votre public cible
Comprenez les préférences de votre public cible pour le choix des polices sur votre site. Si votre public est international, choisissez des polices avec une typographie adaptée à différents alphabets. Effectuez des tests A/B pour évaluer l’impact de ces choix de polices sur l’expérience utilisateur de votre site web.
