Votre guide complet des polices HTML (ou polices web)

S’il y a une chose qui est la plus importante pour l’image de marque et l’apparence de votre site web, c’est bien les polices de caractères. Une police de caractères soigneusement choisie peut transmettre une personnalité, rendre de longs passages de texte plus lisibles et consolider votre marque dans l’esprit des gens.

Mais vous ne pouvez pas télécharger n’importe quelle vieille police et l’utiliser sur votre site web. Il faut d’abord prendre en compte un certain nombre d’éléments.

Où trouver des polices web, quelles polices sont compatibles avec le langage HTML et lesquelles sont sûres pour le web (web safe) et peuvent être utilisées sur n’importe quel site web ? Nous allons les explorer dans cet article.

C’est parti !

Polices HTML : Que sont les polices web ?

Les caractères ont une histoire riche, mais les polices de caractères, telles que nous les connaissons aujourd’hui, ont été largement utilisées avec l’essor des ordinateurs et de l’internet. Les polices numériques nécessitaient un traitement spécial pour s’afficher sur les écrans. Et lorsque les différentes tailles d’écran et les différents appareils sont entrés en jeu, les choses se sont compliquées.

Il existe plusieurs types de polices numériques. Certaines polices sont principalement destinées à l’impression et à la conception graphique. Elles ont tendance à être grandes et ne conviennent pas aux sites web, mais sont parfaites pour créer des graphiques. Il existe également des polices sûres pour le web (web safe), que l’on trouve sur la majorité des machines.

Mais pour la conception de sites web, vous devez rechercher des polices web, des caractères spécialement conçus pour un rendu parfait sur le web et sur divers appareils. Vous pouvez également utiliser des polices web dans les e-mails ou d’autres services en ligne.

Les polices web diffèrent des polices standards d’ordinateur de bureau téléchargeables pour un certain nombre de raisons. D’abord, elles ne peuvent souvent pas être utilisées avec des programmes sur votre ordinateur; elles doivent être téléchargées sur un serveur et utilisées sur le web.

Elles sont également conçues pour être lisibles sur différents écrans et pour différentes tailles. Elles peuvent être stylisées à l’aide de feuilles de style en cascade (par exemple en appliquant du gras ou de l’italique, des couleurs et d’autres attributs) et prennent en charge d’autres conditions telles que le rendu de droite à gauche.

Bien que les polices web ne soient pas installées sur vos appareils ou ceux de vos visiteurs, il existe des moyens spéciaux de les afficher afin que toute personne qui visite votre site puisse les voir.

Vous pouvez soit télécharger ces polices comme d’habitude et les charger sur votre serveur, soit utiliser un service spécial d’hébergement de polices web qui les intègre à votre site sans nécessiter de téléchargement.

Quelles polices pouvez-vous utiliser en HTML ?

Certaines polices ne sont pas destinées à être utilisées sur le web, mais lesquelles peuvent être insérées dans votre site HTML ?

Essentiellement, vous pouvez utiliser n’importe quelle police téléchargeable sur votre site. Il vous suffit de la téléverser et de la configurer correctement, et elle devrait s’afficher sur votre site web.

Mais si vous pouvez techniquement utiliser n’importe quelle police sur votre site, ce n’est pas toujours la meilleure idée. Vous devez rechercher spécifiquement des polices pour le web, et non des polices destinées à être utilisées pour l’impression ou la conception graphique. Certaines polices sont tellement stylisées ou destinées à des tailles de texte tellement grandes qu’elles ne s’afficheront pas correctement sur votre site. Avec une police web, ce n’est pas un problème.

L’utilisation de polices d’ordinateur sur votre site (ou de polices web pour la conception d’imprimés) soulève également des problèmes de licence. L’utilisation d’une police sur un support différent de celui pour lequel vous l’avez achetée peut vous attirer des ennuis. Veillez à lire attentivement la licence de votre police avant de l’acheter.

Vous pouvez également rechercher certains hébergeurs qui vous permettent d’utiliser un simple appel dans le HTML pour rendre leurs polices sur votre propre site web, par le biais de plans gratuits ou payants.

Dans tous les cas, il faut que la police utilisée soit correctement téléversée et qu’elle ait le bon type de fichier :

• TTF
• OTF
• WOFF/WOFF2
• SVG
• EOT

Grâce à ces types de fichiers de polices, vous pourrez ensuite les utiliser sur l’ensemble de votre site et les styliser avec HTML et CSS.

Il existe également des polices sûres pour le web qui fonctionnent généralement de manière universelle sur tous les navigateurs et programmes.

Que sont les polices sûres pour le web ?

Le problème avec la plupart des polices web est qu’il n’y a aucune garantie qu’elles s’afficheront correctement sur votre site. Contrairement à la conception graphique, où il suffit de créer une image dans un programme et de l’imprimer pour la distribuer, un navigateur doit rendre les polices web chaque fois que quelqu’un ouvre la page. Si vos polices ne se chargent pas, vous risquez de vous retrouver avec un site web vide et défectueux.

C’est pourquoi certains propriétaires de sites web choisissent de ne recourir qu’à des polices web safe. Ces polices sont préinstallées sur la plupart des systèmes, ce qui garantit leur affichage correct sur tous les appareils, sauf les plus obscurs. Elles ont également tendance à se charger beaucoup plus rapidement que les polices web, qui peuvent être lentes à s’afficher.

Si tout ce qui vous préoccupe est d’optimiser les performances et de vous assurer que votre site affiche correctement les polices, les polices web safe sont faites pour vous.

Voici une liste de polices sûres pour le web, que vous pouvez généralement utiliser sans problème.

• Arial
• Brush Script MT
• Comic Sans
• Courier New
• Garamond
• Georgia
• Helvetica
• Impact
• Lucida Console
• Palatino
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Il existe également des dizaines d’autres polices sûres pour le web, mais celles-ci sont les plus répandues sur les appareils.

Parmi toutes ces polices, Arial, Times New Roman, Helvetica et Courier New sont les plus sûres. Bien qu’elles soient considérées comme sûres pour le web, certaines des autres ne fonctionnent pas sur certains systèmes d’exploitation.

Le problème est que, à moins que vous ne gériez un site gouvernemental ou un simple site d’information, cela ne vaut pas la peine de sacrifier votre image de marque en évitant une majorité de polices. Les polices sûres pour le web sont lisibles, mais elles sont aussi trop génériques et trop utilisées.

Il vaut mieux choisir un jeu de polices plus joli et plus unique pour votre site, d’autant plus qu’il existe une solution au problème des polices web qui ne se chargent pas : les polices de secours.

Une note sur les polices de secours

Les piles de polices (font stacks), également appelées polices de secours (fallback fonts), sont la seule raison d’utiliser des polices web audacieuses et créatives.

Peu importe ce que vous faites ou les précautions que vous prenez, il y a toujours quelqu’un qui ne pourra pas charger vos polices. Peut-être que le Javascript est désactivé et que vos polices hébergées ne s’affichent pas correctement, ou que quelque chose ne va pas dans le code et empêche les polices que vous avez téléversées de s’afficher. Ou peut-être qu’une certaine police n’est pas compatible avec l’appareil d’une personne.

Grâce aux polices de secours, il est facile de charger une police sûre pour le web si quelque chose ne va pas. Cela fonctionne en sélectionnant une police que l’utilisateur a installée sur la base de la famille de polices :

• Les polices avec empattements (serif) sont définies par de petits traits attachés aux extrémités des lignes de lettres. Ces polices sont considérées comme élégantes et lisibles.
• Les polices sans empattements (sans serif) sont conçues de la même manière que les polices avec empattement, mais sans traits. Elles sont plus simples et plus lisibles.
• Les polices monospace sont uniformément espacées entre chaque lettre, ce qui leur donne un aspect distinct.
• Les polices cursives (ou polices Script) représentent des lettres formelles, écrites à la main. Elles ne sont pas très lisibles et conviennent mieux aux titres ou à la conception graphique.
• Les polices fantaisie (ou polices décoratives) sont très stylisées et, comme les polices cursives, ne conviennent pas pour le corps du texte.

N’oubliez pas que les piles de polices sont effectivement une « pile » ; il est tout à fait possible d’avoir plusieurs polices de secours en séquence. Veillez simplement à toujours disposer d’une police sûre pour le web à la fin de la pile, et vous aurez toujours la possibilité de faire passer votre image de marque avec une police similaire si la police principale fait défaut.

Comment ajouter des polices avec HTML

Si vous souhaitez ajouter une police web à votre site, vous avez plusieurs possibilités.

Pour les utilisateurs de WordPress, le moyen le plus simple d’intégrer des polices sur votre site est d’utiliser une extension. Les deux plus populaires sont Easy Google Fonts et Use Any Font. La première simplifie le processus d’ajout de polices Google Fonts à votre site web, tandis qu’UAF vous permet de téléverser directement des polices sur votre site.

Si vous n’utilisez pas WordPress, ou si vous ne voulez pas vous appuyer sur une extension, le processus nécessitera un peu de bricolage manuel.

Tout d’abord, vous pouvez utiliser des polices hébergées ailleurs, par exemple avec Google Fonts. Les instructions dépendent ici du service que vous choisissez. Avec Google Fonts, vous devrez intégrer la police que vous souhaitez utiliser dans votre <head>, puis faire appel à elle lorsque vous voudrez l’utiliser.

Vous pouvez également héberger localement sur votre site les polices que vous avez téléchargées sur Internet. Cela peut être préférable car vous n’aurez pas besoin de faire appel à des services tiers.

Heureusement, c’est très facile à faire, pour autant que vous disposiez d’une police web correctement configurée. Il suffit de téléverser les fichiers sur votre serveur, puis d’utiliser la règle @font-face dans votre feuille de style pour la définir. Par exemple :

@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Vous pouvez ensuite utiliser la balise font-family pour faire appel à votre police là où vous le souhaitez dans le document HTML.

Stylisation des polices avec HTML et CSS

Une fois votre police téléversée en toute sécurité sur votre site web, vous pouvez maintenant la styliser à l’aide de HTML et de CSS. Même si vous avez très peu de connaissances en programmation, il est assez facile de styliser une police. Vous pouvez modifier la couleur du texte, la couleur d’arrière-plan, la taille, le style ou le poids.

Note : si vous avez travaillé avec des versions HTML plus anciennes, vous vous souvenez peut-être de la balise <font>. Celle-ci n’est plus prise en charge et ne doit pas être utilisée. À la place, vous pouvez donner un style au texte à l’aide de CSS ou d’un élément de style HTML.

Tout d’abord, vous pouvez modifier la police à l’aide de codes de couleur. Vous pouvez utiliser un nom de couleur comme « red », un code RVB ou une valeur HEX. Cette dernière est définie avec la propriété color comme suit :

p {

color: blue;

}

Ou dans un élément de style HTML individuel :

<p style="color:blue;">Text.</p>

La couleur d’arrière-plan est la même, mais elle utilise l’attribut background-color.

p {

background-color: blue;

}

Vient ensuite la taille de la police. Il peut s’agir de pixels, de pourcentages ou en ems (qui sont utiles pour la conception de sites responsives).

 p {

font-size: 16px;

}

Ou :

<p style="font-size:200%;">Text.</p>

Enfin, il y a le style de la police et le poids, ou l’italique et le gras. Pour un texte incliné, utilisez la balise « italic ».

.italic {

font-style: italic;

}

And for bold: 

.bold {

font-weight: bold;

}

Vous pouvez également utiliser les balises HTML à la place. Pour l’italique, vous pouvez utiliser :

<em>

pour un texte qui exprime l’emphase, ou utiliser :

 <i> 

pour un texte qui doit être visuellement distinct.

Et pour le gras, utilisez :

<b> or <strong>

Par exemple :

<b>Bold Text</b>

ou

<strong>I'm of special importance.</strong>

Où trouver des polices HTML ?

Que vous souhaitiez utiliser un hébergeur de polices tiers ou les télécharger, vous devez savoir où se trouvent les meilleurs endroits pour trouver des polices. Il existe des centaines de distributeurs, mais une bonne poignée d’entre eux sont connus pour être des sources fiables d’obtention de polices. En voici quelques-uns :

• Google Fonts est l’un des meilleurs endroits pour obtenir des polices. Pourquoi ? Vous pouvez facilement les intégrer à votre site sans en télécharger aucune, sa sélection est vaste et belle, et surtout, elle est entièrement gratuite. Les serveurs de Google sont toujours rapides, vous pouvez donc leur faire confiance pour livrer les polices avec le moins de retard possible.

• Adobe Fonts propose des milliers de polices avec tout abonnement à Creative Cloud. Avec d’autres services (qui ne s’appuient pas sur des polices open source comme Google Fonts, du moins), vous devez souvent vous préoccuper des licences. Ces polices sont autorisées à être utilisées dans tout projet, qu’il soit personnel ou commercial.
• Fonts.com propose un large choix de polices de caractères pour l’ordinateur et le web. Ils vous fournissent le code dont vous avez besoin pour les intégrer à votre site. Le problème, c’est qu’il existe plusieurs licences différentes, ce qui peut prêter à confusion. Le paiement est basé sur une redevance unique ou un modèle de paiement à l’utilisation.
• TypeNetwork propose des polices de haute qualité pour les projets sérieux avec une variété d’options de licence. Achetez des polices pour l’ordinateur, le web, les applications ou l’ePub. Les polices web sont également proposées avec une option supplémentaire : hébergée ou auto-hébergée.
• Avant que Google Fonts n’existe, Font Squirrel était l’endroit où trouver des polices gratuites, sous licence commerciale, à utiliser dans n’importe quel projet. Le site dispose d’un grand choix de polices, mais il n’offre malheureusement pas d’option d’hébergement. Vous devrez télécharger les polices et les téléverser manuellement sur votre site. Toutes les polices ne sont pas non plus optimisées pour le web, mais vous pouvez essayer Webfont Generator.

Le top 10 des polices HTML

Il existe des milliers de polices pour le web, mais par où commencer ? Voici dix polices HTML simples qui s’intègrent parfaitement à tout site web. Elles sont toutes web safe et devraient donc fonctionner sur presque tous les appareils. Elles constituent également d’excellentes polices de secours.

Si vous avez besoin de quelque chose d’un peu plus excitant, nous avons de nombreux articles sur les polices cursives, les polices de calligraphie et les polices modernes.

1. Arial

Arial est la plus connue de toutes les polices de caractères. Ce n’est pas la plus belle, mais elle est simple et utile dans de nombreuses situations.

2. Times New Roman

Times New Roman est également une police extrêmement courante. Elle est idéale si vous gérez un site plus formel. Cette police à empattement n’est pas particulièrement excitante, mais elle n’est pas non plus distrayante.

3. Palatino

Palatino vous est peut-être familière, car elle est souvent utilisée pour l’impression de livres. Aujourd’hui, il s’agit d’une élégante police de caractères numérique incluse par défaut sur de nombreux appareils.

4. Verdana

Verdana est connue pour être très facile à lire, et elle continue d’être très belle, même en grande taille. Cette police sans serif est une bonne alternative à Arial.

5. Courier New

Rappelant le texte des vieilles machines à écrire, Courier New est un excellent design monospace pour les sites qui veulent un look démodé mais lisible.

6. Calibri

Calibri est une police sans empattement simple et agréable, fournie en standard avec des programmes tels que Microsoft Office. Toutefois, il s’agit d’une police propriétaire, qui n’est souvent prise en charge que par les systèmes d’exploitation Windows.

7. Georgia

Cette police à empattement arrondi est inspirée de la police Garamond, une police similaire sûre pour le web. Si vous avez besoin d’une police formelle, mais pas aussi sérieuse que Times New Roman, c’est un bon choix.

8. Garamond

Tout comme Palatino, Garamond est une police classique souvent utilisée pour l’impression de livres. Bien qu’elle ait été mise à jour pour les systèmes d’exploitation modernes, elle reste assez démodée.

9. Didot

L’espacement minimal des lettres de cette police à empattement lui donne un aspect et une sensation uniques. Vous pouvez la trouver sur la plupart des appareils Apple.

10. Tahoma

Cette police propre a servi de police par défaut pour les anciens systèmes d’exploitation Windows. Son aspect plus audacieux lui permet de se démarquer suffisamment sans être distrayant.

Résumé

Il est important de choisir des polices web qui auront un bel aspect sur votre site web, seront lisibles et personnifieront votre marque. Il existe plusieurs sites où vous pouvez installer des polices gratuites ou télécharger des polices sous licence payantes. Nous vous proposons quelques exemples de bonnes polices pour commencer.

Vous n’êtes pas obligé de vous en tenir aux polices ennuyeuses et sûres que vous voyez partout sur Internet depuis des décennies. Grâce aux polices de secours, vous pouvez choisir la typographie que vous aimez et définir une police de secours à utiliser si elle ne se charge pas.

Que vous utilisiez ces polices HTML sur votre site web, dans des e-mails ou sur votre logo, veillez à effectuer de nombreux tests pour que votre site reste lisible et que la typographie s’intègre bien au reste de votre design.

Brenda Barron

Brenda Barron est une journaliste et rédactrice publicitaire originaire de Californie. Elle contribue à des sites tels que WPMU DEV, Envato et Torque.

• Site Web
• LinkedIn
• Twitter