Il y a un million de choses à prendre en compte pour créer le site web parfait : créer du contenu visuel, choisir des couleurs, etc. Mais s’il y a bien une chose que tout le monde sous-estime, ce sont les polices de caractères. Ne tombez pas dans le piège. Le choix des polices peut avoir une grande influence sur l’esthétique finale de votre site. Cela peut paraître minime, mais elles ont pourtant le pouvoir d’apporter un grand plus à votre site internet, et dans cet article, nous allons vous montrer comment. Nous verrons également les petites choses auxquelles faire attention pour choisir les bonnes polices pour son site web.

Vous avez un guide de style pour votre marque ? Consultez-le.

Civil Pour web design
Réalisé par Deni K pour Civil Pour

Votre guide de style définit les éléments qui constituent votre marque. Ce sont des informations essentielles pour communiquer et rester cohérent dans votre stratégie de branding. Il existe plusieurs règles pour vous aider, vous et votre graphiste, à créer une identité de marque cohérente, et notamment à définir vos couleurs, votre logo, et bien sûr, votre typographie.

Si vous avez déjà un guide de style pour votre marque, faites bien attention à vous y tenir lorsque vous vous lancerez dans le processus de création de votre site web. Si vous n’avez pas encore de guide de marque, lisez cet article pour savoir comment en créer un.

L’importance de la cohérence

Vous serez peut-être tenté d’essayer de nouvelles polices sur votre site web. Mais ne succombez pas ! Chaque fois que vous donnez votre carte de visite à quelqu’un ou que l’un de vos clients potentiels se rend sur votre site web, c’est un aperçu de l’ADN de votre identité visuelle qu’il voit. Ces différents aperçus de votre marque doivent absolument créer une image claire et cohérente, sans quoi votre marque aura l’air désorganisée et ne restera pas dans l’esprit des consommateurs. C’est pour cela qu’il est crucial de rester bien cohérent sur toutes les plateformes digitales ainsi que sur vos supports papier. Les couleurs, le style et, vous l’aurez deviné, la typographie, font toute la différence.

Prenez en compte vos autres polices

Nordkern web design
Réalisé par FuturisticBug pour Nordkern

Le guide de style de votre marque devrait contenir des familles de typographies, des polices, leurs tailles, leur hiérarchie et la manière dont elles doivent être utilisées, de façon à ce que vous puissiez les intégrer à votre site web directement. Mais si vous ne connaissez pas le nom des polices de votre marque, servez-vous d’outils tels que le WhatTheFont de Myfonts.com pour identifier le nom des polices en question.

S’il s’agit de polices créées sur mesure, votre graphiste essaiera de trouver une police similaire pour votre site web. Étant donné qu’il existe plusieurs navigateurs web, les typographies réalisées sur mesure peuvent changer d’apparence en fonction de celui que vous utilisez utilisé, c’est pourquoi de nombreux designers web utilisent l’outil Google Font pour recréer votre identité sur le web de la manière la plus juste possible.

Vous n’avez pas encore de police attitrée ou de guide de marque ?

Vous n’avez pas encore choisi de polices pour votre identité ? Voici quelques critères à prendre en compte pour choisir une police pour son site web :

Définissez la personnalité de votre marque

Pour que votre design soit efficace, la police que vous choisissez doit représenter la personnalité de votre marque. Votre entreprise est-elle plutôt traditionnelle, moderne, ou complètement décalée ? Décririez-vous votre entreprise comme rétro, classique, ou funky ? Lisez cet article pour découvrir comment trouver la personnalité unique de votre marque.

Naturbit web design
Réalisé par Lucadia
Réalisé par KR Designs

Une fois que vous aurez répondu à toutes ces questions, vous aurez une bonne compréhension de la personnalité de votre marque et de l’esthétique que vous essaierez d’atteindre pour votre design web. Vous pouvez maintenant choisir les bonnes polices de caractères pour votre marque, en vous basant sur votre identité.

Choisissez des polices qui correspondent à votre marque

Admettons que vous ayez un magasin plutôt cool et moderne, et que vous y vendiez des vêtements vintages. Vous pourriez associer une police rétro pour les gros titres à une police sans sérif plus classique pour les textes. Vous pourriez utiliser par exemple Arvo pour vos titres et Open Sans, connue pour sa lisibilité, pour vos textes. Cela donnera un certain équilibre à votre design et correspondra bien à votre identité de marque à la fois moderne et vintage.

Ou encore, si vous êtes à la tête d’un cabinet d’avocats ou d’une célèbre marque de produits de cosmétique de luxe, et que vous souhaitez que votre police communique votre fiabilité et votre professionnalisme avec une touche de classe et d’élégance, tournez-vous vers des sérifs comme Frank Ruhl Libre ou Playfair Display. Pour en apprendre davantage sur les polices et ce qu’elles communiquent, nous vous recommandons de lire l’article de Venngage sur la psychologie des polices de caractères.

Killahora Cidery web design
Réalisé par gotza

Quel que soit le type de police que vous utiliserez pour refléter au mieux l’identité de votre marque, assurez-vous bien qu’elle soit appropriée pour une utilisation web, et ce, sur tous les navigateurs. Vous vous demandez ce qu’est une police adaptée pour une utilisation web ? C’est ce que nous allons voir maintenant.

Qu’est-ce qu’une police adaptée pour le web ?

Une police adaptée pour le web est une police qui n’oblige pas vos visiteurs à avoir une police spécifique déjà installée sur leur ordinateur pour pouvoir visualiser votre site web correctement. À l’époque, il y a une dizaine d’années, il existait environ 13 familles de polices, et les designers web devaient se cantonner à n’utiliser que celles-ci de façon à ce que leur travail puisse être lu à partir de la plupart des systèmes d’exploitation. De nos jours, les Google Fonts sont devenues la norme, car elles sont parfaitement adaptées à n’importe quel navigateur web.

Sachez que de nombreuses marques utilisent des polices réalisées sur mesure ou des polices qui ne sont pas adaptées au web. Dans ces cas-là, les développeurs peuvent avoir recours à des logiciels permettant de convertir n’importe quelle police en “police web”. Mais cela n’offre malheureusement pas toujours la garantie que le résultat soit de bonne qualité une fois sur les écrans. C’est pourquoi les graphistes doivent souvent redoubler d’efforts pour trouver une police de caractères libre de droit, adaptée au web et quasiment identique à la police initialement utilisée par la marque.

Quelles sont les polices adaptées au web et pourquoi c’est important ?

google fonts
via Google Fonts.

Le meilleur moyen de procéder, si vous êtes à la recherche d’une police pour votre site, est de parcourir la bibliothèque des Google Fonts, dans laquelle vous avez de grandes chances de trouver votre bonheur. Le catalogue comprend plus de 800 polices de caractères libres de droit et conçues pour le web. Si vous intégrez ces polices aux éléments de base de votre identité, vous pouvez être certain que tout le monde verra votre site comme vous le souhaitez. Parce que cette bibliothèque de polices est hébergée sur un service web, les visiteurs du monde entier verront tous votre site web avec exactement la même police. De plus, cela garantit une certaine uniformité, quel que soit l’écran à partir duquel vos visiteurs consultent votre site web (ordinateur, mobile, tablette).

Comment combiner différentes polices sur un même site web ?

Vous aurez très probablement besoin de plusieurs polices de caractères pour créer un site web. Il y a trois règles de base à respecter pour associer plusieurs polices sur un même site :

tout d’abord, ne jamais utiliser plus de trois polices sur un même design. Ensuite, s’assurer que ses polices se marient bien les unes avec les autres. Et enfin, il est essentiel de définir une hiérarchie entre toutes ses polices et de s’y tenir.

web design combining different fonts
Réalisé par MarkoSimić.

Voici à quoi cela  peut ressembler une fois implémenté : tout d’abord, définissez une police de caractères principale, qui sera la plus proéminente et sera utilisée pour les titres. Astuce : pensez à choisir ici une police qui se marie bien avec votre logo. Il est généralement conseillé de choisir une police qui attire le regard comme police principale. Pensez aux polices grasses comme Rubic Black, ou à une police légèrement arrondie comme Nunito. Mais la police que vous choisirez dépendra entièrement de votre entreprise et de votre branding. Choisissez ensuite une deuxième police qui sera utilisée pour les textes. Celle-ci doit être facilement lisible (vous avez déjà essayé de lire un long texte sur un tout petit écran de téléphone ?), comme c’est le cas de Noto Sans par exemple. Enfin, vous pouvez choisir une troisième police, pour les boutons et les calls to action par exemple, ou encore pour accentuer certaines parties de votre texte et attirer ainsi davantage l’attention de vos visiteurs. Une police comme Monserrat irait bien avec nos exemples pour les première et deuxième catégories.

Comment les différents types de polices affectent votre design

Comme Vincent van Gogh le disait si bien, “les bonnes choses ne sont pas le fruit d’une impulsion, mais d’une série de petites choses accumulées les unes aux autres”. Choisissez donc vos polices avec précaution. Une bonne combinaison aura une influence non négligeable sur le design de votre site web.

Coffee And Chokes BJJ web design
Réalisé par LoudFrog pour Coffee And Chokes BJJ

Regardez comment le graphiste a utilisé une police script unique dans l’exemple ci-dessus, pour faire davantage ressortir le thème des arts martiaux, et créer une connection culturelle. Le reste du texte est les calls to action sont rédigés avec une police sobre, facilement lisible, contenant des éléments de différentes tailles ainsi que des majuscules, ce qui permet de cadrer la police principale et la fait ressortir du même coup. Le design final est bien équilibré et attire l’attention aux bons endroits.

Satoshi Nation website design
Réalisé par Fenixo pour Satoshi Nation
wallenford website design
Réalisé par Aneley

Vous voyez comment les deux designs ci-dessus cherchent à s’appuyer sur deux aspects complètement différents ? Le design du site de Satoshi Nation, une entreprise de service financier, est moderne et épuré, avec une police sans sérif légèrement angulaire. En comparaison, le design de Wallenford, une marque de café de luxe, a choisi une élégante police sérif pour accentuer l’aspect haut de gamme de sa marque. Dans les deux cas, les polices se marient naturellement avec le reste du design et reflètent très bien les valeurs des marques qu’elles représentent. C’est là tout le pouvoir de la typographie.

Dites le avec une police

Choisir la bonne police de caractères pour votre site web dépend entièrement de votre objectif. Vous devez avoir un but précis et savoir comment  vous souhaitez être perçu lorsque vous réfléchissez au style de votre site web et au design que vous voulez créer. Les polices de caractères sont de très bons outils pour exprimer votre style et vos envies. Vous voulez être élégant, sérieux, et traditionnel ? Optez pour une police sérif. Vous voulez paraître moderne et minimaliste ? Choisissez une police sans sérif. Associez plusieurs polices pour créer n’importe quel style. En d’autres termes, les polices que vous sélectionnez en disent long sur votre entreprise, prenez donc le temps de bien faire votre choix !

Besoin de l'aide d'un expert pour le design de votre site web?
Faites appel à nos talentueux graphistes pour créer un design vraiment unique.