Le design est très important pour votre site, peu importe votre activité : selon plusieurs études, 90% des internautes jugent un site en premier lieu pour son aspect visuel. Et parmi les composantes les plus importantes dans le webdesign, il y a les polices de caractères.
La police de caractère, police d’écriture ou font en anglais, définit l’apparence de tous vos textes sur votre site : titres, paragraphes, boutons, menus, textes dans les images… C’est pour cette raison que les polices d’écriture de votre site doivent être lisibles, agréables, mettant en valeur votre contenu tout en affirmant une identité visuelle.
Si vous n’avez pas encore d’identité visuelle ni de moyens d’en faire définir une par un professionnel, il est difficile de choisir quelle police utiliser pour son site internet. Voici quelques informations et quelques conseils pour choisir une police pour votre site.
1-Les types de polices
Pour commencer, il faut savoir qu’il existe plusieurs types de polices de caractères, dont cinq principales catégories, normalisées par le W3C :
les polices Serif : elles ont ce qu’on appelle des « empattements », ces petits ornements qui rendent les lettres plus élégantes. Elles sont surtout utilisées dans la presse papier et les médias traditionnels, mais peuvent véhiculer une image un peu vieille.
les polices Sans Serif : à l’inverse, les sans-serif n’ont pas d’empattement et sont donc plus classiques. C’est le type de police privilégié pour tout ce qui touche au web, car plus lisibles et adaptables aux différents écrans.
les polices Cursives : parfois appelées polices script, les polices cursives simulent l’écriture à la main, avec des formes arrondies. Elles évoquent les écritures scolaires ou enfantines, tout en véhiculant une image plus décontractée, pas très professionnelle.
les polices Fantaisies : les polices fantaisy sont plus décoratives, et sont à proscrire pour autre chose qu’un titre, un logo ou une utilisation dans une image promotionnelle.
les polices Monospace : les polices monospace n’ont qu’une seule largeur de caractère, pour faciliter leur traitement, elles ressemblent en général aux polices des machines à écrire ou des terminaux d’ordinateur. Elles sont plus sobres et parfois jugées un peu strictes, mais sont de plus en plus utilisées, notamment pour des sites liés à l’informatique et aux nouvelles technologies.
Il existe d’autres types de polices qui ne bénéficient pas de la norme de police générique W3C, mais qui sont beaucoup utilisées sur les plateformes de polices. Par exemple les polices manuscrites, qui évoquent un texte manuscrit « bâton », avec des lettres détachées les unes des autres, pouvant servir pour un blog ou une communication plus proche de son audience (beaucoup utilisés par les sites lifestyle, voyage, cuisine…).
De manière générale, pour la majorité de vos textes, nous vous conseillons de vous en tenir à des polices modernes, lisibles sur tout support et donc adaptées au web, donc plutôt des polices Sans Serif (Arial, Roboto, Helvetica…). Pour des titres ou des types de textes moins fréquents (citation, code, article de blog…), vous pouvez envisager des polices plus décoratives ou adaptées au contenu que vous voulez présenter.
2- Les critères à prendre en compte pour choisir une police adaptée à votre site
Une fois que vous avez compris les différents types de polices, vient le moment de choisir celle qui collera à votre site et votre activité. Voici les principaux critères à prendre en compte :
Votre identité de marque : Votre identité de marque c’est ce qu’est votre entreprise, l’image qu’elle donne et ce qu’elle véhicule. Si vous êtes un e-commerçant B2B au contenu plutôt sérieux, privilégiez des polices classiques et sobres (Serif ou Sans-Serif par exemple). A l’inverse, si votre site est plus léger, ou plus artistique, vous pouvez vous accorder plus de libertés.
Votre cible : Cela va de pair, mais vous devez aussi adopter vos polices à votre audience. Par exemple pour un public plutôt jeune et/ou connecté, privilégiez des polices web modernes.
Vos objectifs : Il faut aussi parfois choisir des polices différentes selon ce que vous voulez faire avec le texte en question. Un bouton call-to-action sur une landing page promotionnelle peut nécessiter une police plus lisible, plus épaisse et sans-serif.
Quel que soit votre choix, gardez à l’esprit que les typographies qui fonctionnent en print (support physiques, imprimés, comme des catalogues, des prospectus…) fonctionnent rarement sur le web.
3- Le nombre de polices à choisir
Sachez avant toute chose que vous n’aurez probablement pas une seule police pour tout votre site. Comme dit précédemment, votre site comporte plusieurs types de texte, dont au moins les titres et le contenu. En général, on en utilise une pour le titre et une pour le contenu, mais jamais plus de 3 polices de caractères sur un site web.
Mais certaines polices peuvent être utilisées pour des textes plus rares et plus spécifiques, comme des citations, des extraits de code, des emphases, un bouton call-to-action, une bannière promotionnelle… Attention cependant à rester cohérent et éviter de multiplier les polices sans raison.
Pensez à bien combiner la typographie des titres avec celle du contenu pour harmoniser la conception graphique. Testez différentes associations de polices, essayez d’être original, créatif et élégant.
Pour trouver des bonnes combinaisons de polices et de l’inspiration, il existe des plateformes comme Typespiration, Fontjoy ou Fontpair. Faites des essais, cela peut être payant !
4- Les plateformes en ligne pour choisir ses polices
Google Fonts
Le principal avantage de la plateforme Google Fonts est son approche open source, donc avec des polices utilisables gratuitement. Elles sont aussi parfaitement adaptées pour le web et très utile pour la composition graphique de site.
L’intégration est facilitée puisque les polices restent sur les serveurs Google, il suffit de l’intégrer sur son site via une balise HTML link ou la règle CSS @import. Le premier chargement peut être lent si la police d’écriture n’est pas dans le cache de l’utilisateur, mais après tout est fait pour alléger et accéler le chargement. On peut aussi télécharger la police pour l’utiliser localement ou l’héberger par ses propres moyens.
Google Fonts a été une mini-révolution dans la typographie web et est souvent conseillé, même si les polices proposées manquent parfois de style et d’originalité.
Autres plateformes : Fontsquirrel, Myfonts…
Ces plateformes ont plus de choix et de styles mais dans la majorité des cas il faut prévoir une licence à payer. Cette license est plus ou moins chère, coût à la vue par page en général, mais on peut aussi trouver des licences avec un prix par fontes d’une seule typo : « regular » « bold »…).
En matière d’intégration, cela dépend de la plateforme, mais il y a des méthodes d’intégration similaires à Google Fonts. Il peut donc y avoir des soucis de chargement comme pour Google, il faut aussi être vigilant quant à la compatibilité avec les navigateurs desktop/mobile.
Vous pouvez aussi envisager de faire créer une police chartée spécialement pour votre société, qui sera plus cohérente avec votre charte graphique et renforcera l’image de marque. Cela demande plus de temps, d’argent et de réflexion en terme d’intégration et de compatibilité.
Pour résumer, afin de choisir la ou les meilleures polices pour votre site, vous devez donc :
Définir votre identité, votre cible, ainsi que votre charte graphique.
Définir le nombre de polices dont vous avez besoin.
Choisir votre type de police en fonction de ces critères.
Sélectionner votre police sur l’une des plateformes.
Essayer les polices choisies.
Nos conseils :
Suivez les recommandations UX : choisissez des polices lisibles et adaptées à tous les supports ;
Testez la lecture dans différentes tailles et sur différents supports ;
Vérifiez également que les polices d’écriture aient tous les styles nécessaires : regular/bold/italic au minimum ;
Assurez-vous qu’elles comprennent des accents ;
Evitez les polices exclusivement en capitale, cela peut être vu comme agressif ;
Pas plus de 3 polices par site, et pensez à les harmoniser !
N’hésitez pas à nous proposer vos polices préférées !