Quelle police pour un site web ? Le guide qui vous explique tout

Quelle police pour un site web ? C’est peut-être la question que vous vous poser dans votre projet de création de site internet. Et oui, 100% des sites internet utilise une police de caractère. En effet, dès lors que votre site possède du texte à afficher, il utilisera une police de caractère pour permettre la visualisation des mots. 

Pour le design de votre site web, les polices utilisées seront très importantes. Elles ne sont pas seulement un détail dans votre design, mais affecte directement la lisibilité de votre site. Un bon choix de police pour site web rendra le design de votre site internet plus travaillé et sera en cohérence avec l’image que vous souhaitez transmettre.

Mettre en place une ligne graphique qui correspond à votre produit ou service est une clé essentielle pour transmettre l’image de votre marque et vos valeurs à votre cible. Les polices de caractère font partie intégrante de votre identité graphique et de votre marque, minimiser leur impact lors de la création de votre site web serait une erreur. N’oubliez pas, les internautes jugent d’abord votre site web par son aspect visuel. 

Définitions des termes

On nous parle de police d’écriture, de police de caractères ou de police tout court, et même de fontes, de typographies, mais à quoi ces termes font références ?

La typographie :

Ce terme en provenance du grec, signifie le type d’écriture. C’est terme général permet de désigner l’ensemble des techniques de reproduction d’un texte par l’impression, c’est également la manière dont un texte est imprimé (type de caractère, mise en page…). On utilisera donc le terme typographie pour faire référence au style de caractère. On peut les classer en 5 grandes catégories. 

• Police Serif : ce sont les polices avec empattements, on les utilise pour donner un style traditionnel, classique et sérieux. 
• Police Sans Serif : ce sont les polices sans empattements, elles donnent un style moderne, minimaliste, épuré à vos designs. 
• Police Cursive (ou script) : ces polices tendent vers l’écriture à la main, et permette de d’adopter un style élégant et créatif. 
• Police Décorative/fantaisie : ce sont des polices plus exotiques et décoratives, qu’on utilisera avec parcimonie pour un style amusant, expressif (elles donnent un ton assez clair). 
• Police Monospace : ce sont les polices à chasse fixe, où chaque caractère à la même largeur, habituellement utilisé pour les machines à écrire ou les codes informatiques. 

Les polices d’écriture ou de caractères :

Plus couramment appeler police, ces termes désignent la même chose, c’est-à-dire l’ensemble des caractères et glyphes de tous corps, graisses et styles. Une police forme donc une famille. Pour citer un exemple, ‘Arial’ est une police d’écriture avec un style typographique sans serif. 

La fonte :

C’est une version d’une police d’écriture, avec une taille, une graisse et un style spécifique. Une police d’écriture est donc composé de nombreuses fontes aux caractéristiques spécifiques.

Pour reprendre notre exemple, les fontes ‘Arial Bold 16pt’ et ‘Arial Light 12px’ font parties de la police d’écriture ‘Arial’. 

Pour les anglophones, on utilisera le terme typeface pour parler de police et de font pour parler de fonte. Cependant, il est courant de voir l’utilisation du mot font pour parler de police. 

Quelques conseils pour bien choisir sa police

Choisir la police d’écriture de son site web n’est pas toujours évident, alors voici quelques informations pour vous aider de votre choix.

Il est important de choisir une police avec une écriture lisible. Vos visiteurs ont besoin de lire facilement le contenu de votre site. Des polices difficiles à lire vont fatiguer vos lecteurs plus rapidement. 

Le choix d’une certaine police n’est pas anodin, elles transmettent des sentiments, émotions, des idées spécifiques qui ajoute du sens à ce que l’on peut lire. 

Utilisez un maximum de 3 polices sur votre site web. Généralement 2 ou 3 polices différentes vont être suffisantes pour créer de la hiérarchie dans votre contenu. Il faudra également jouer avec le corps, la graisse et le style d’une même police en fonction de l’utilisation de celle-ci. 

Plusieurs aspects sont modifiables lorsque nous utilisons une police. On retrouve la taille de la police, sa graisse (light, regular, bold, etc.), sa casse (minuscule ou majuscule), l’alignement (droit, centré, gauche ou justifié), l’interlignage (l’espace entre chaque ligne d’un paragraphe) et les marges (espace entre les paragraphes). Il faudra trouver un équilibre entre tous ces paramètres pour avoir une lisibilité optimale par le lecteur tout en ayant le style graphique que souhaiter pour votre société et votre site. 

Les spécificités du web

Au début du web, l’utilisation des polices était limités, avec seulement un choix entre quelques polices présentes sur tous les terminaux. Aujourd’hui, il est possible d’ajouter ses propres polices sur son site web ou bien d’utiliser des polices hébergées par des services tiers qui permettra de contourner cette limite. On vous explique en détails. 

Les polices Web Safe

Tout d’abord, les Web Safe Fonts, sont les polices préinstallées sur les périphériques ou système d’exploitation, elles n’ont donc pas besoin d’être chargées par le navigateur. En les utilisant, vous êtes sûr que l’internaute aura cette police d’écriture et que votre contenu s’affichera correctement. Cette liste est composée de 10 polices web.

Les polices Web

Si vous souhaitez utiliser une autre police qui n’est pas préinstallé, vous pouvez utiliser des Web Fonts. Ces polices sont chargées par le navigateur pour être affichées sur votre site. Elles peuvent être hébergées par votre propre serveur local ou chargé depuis des serveurs externes. 

Plusieurs plateformes se sont imposées au fil des années proposant un large catalogue de Web Fonts, on peut citer notamment Google Fonts (gratuit), Adobe Fonts (premium). Ces plateformes hébergent sur leur serveur les fichiers de police, et vous fournissent quelques lignes de code à copier sur votre site afin d’utiliser la police souhaitée. 

Les avantages des serveurs externes :

• La police peut déjà être chargée en cache sur le navigateur, car l’internaute aura visité un site utilisant cette même police. Ainsi, vos visiteurs n’auront pas besoin de recharger les fichiers de police, ce qui accélèrera la vitesse d’affichage de votre site. 
• Les polices ont souvent une compatibilité plus élevée
• Avec les quelques lignes de code à copier, les polices sont plus rapides à intégrer à votre site

Ces plateformes offrent un large choix de polices, mais c’est également possible de choisir une police plus spécifique et de l’intégrer sur son site. Cela demandera plus de temps et de réflexion sur l’intégration et la compatibilité de votre police sur tous les navigateurs. 

Les avantages d’héberger ses polices : 

• Vous aurez accès à une sélection plus larges pour vos polices
• Sans service tiers, vous n’êtes pas dépendant des potentiels pannes qui pourrait les impacter. 

Aujourd’hui, les Web Fonts sont communément utilisés, les navigateurs intègrent de mieux en mieux ces polices. Il ne faut cependant toujours penser à ajouter des polices de substitutions en Web Safe Fonts pour que votre texte soit affiché de manière contrôlée si les navigateurs ne parviennent pas à charger ou afficher les polices.

Quelques ressources pour vos polices

Comme cité précédemment, la plateforme Google Fonts regorge de police Web Font que vous pouvez utiliser sur votre site. L’avantage de cette plateforme ? Vous pourrez choisir une police pour site web gratuit, elles le sont toutes. La plateforme premium Adobe Fonts propose pareillement de nombreuses polices utilisables sur le web, mais cette fois de manière payante.

D’autres sites existent pour trouver des polices gratuites, mais ne proposeront pas d’héberger vos polices pour votre site web. Vous devrez alors les charger sur vos propres serveurs. On retrouve pour les plus connus, les sites DaFont et Font Squirrel. 

Pour vous aider dans la recherche de polices pour site web, certains outils de font pairing sont disponibles en ligne. N’hésitez pas à aller faire un tour sur Fontpair ou bien Fontjoy. 

Il est possible d’installer un plugin pour votre navigateur qui permet de détecter quelle police est utilisé sur les sites consultés. On peut vous présenter par exemple le célèbre plugin WhatFont pour Google Chrome. D’un simple clic sur le texte d’un site web, vous allez pouvoir connaitre la police utilisé, son style, sa graisse, sa taille, sa couleur, etc.

À éviter

Certaines polices d’écriture sont à bannir de votre site web, car elles sont largement controversées. C’est notamment le cas de la police ‘Comic Sans’ qui a même eu le droit à un article à son sujet dans Le Monde.

Il est également important d’éviter d’utiliser des polices avec des caractères manquant (ce sont principalement les lettres avec des accents ou des caractères spéciaux qui peuvent manquer à l’appel), ou des polices ayant un nombre de déclinaisons très limité. Privilégiez les polices complètes possèdent au minimum les graisses et styles les plus utilisés : regular, italic, light, light italic, bold et bold italic. 

Les polices pour site web ne sont pas un détail insignifiant, le choix et leurs utilisations vont influencer les visiteurs de votre site. Les polices font parties de votre identité et incarne l’image et les valeurs de votre produit ou service.

Faites confiance à Webalia pour vous accompagner dans la création de votre site internet.