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.
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.
