![Plus de 30 des meilleures polices de caractères web safe (HTML) pour votre prochain design en [year]](https://kinsta.com/fr/wp-content/uploads/sites/4/2020/09/polices-caracteres-web-safe-1024x512.jpg)
Vous n’avez pas besoin de milliers de polices de caractères pour créer un site web de qualité. Mais vous devez vous assurer que les polices que vous utilisez sont visibles par tous ceux qui visitent votre site web. Et c’est là qu’interviennent les polices web safe.
Et si vous pouviez trouver des polices web safe qui sont a) 100% gratuites à utiliser et b) n’ont pas besoin d’être hébergées ailleurs pour que vos visiteurs les voient, ce serait un homerun pour vous.
C’est exactement pour cela que cet article a été écrit : nous allons couvrir les 31 plus belles polices de caractères web safe et vous montrer exactement comment les implémenter dans votre site WordPress.
Utilisez les liens sur le côté pour naviguer vers la section qui vous intéresse le plus, ou accédez directement à notre liste de polices de caractères web safe.
Quelles sont les polices de caractères web safe ?
Si l’on tient compte des variations, plus de 650 000 polices différentes sont disponibles en ligne. Les polices de caractères qui sont prises en charge par la majorité des navigateurs web et des systèmes d’exploitation sont considérées comme web safe. Le système d’exploitation inclut automatiquement les fichiers de polices, de sorte que les visiteurs n’ont pas à télécharger les polices depuis vos serveurs.
Un exemple en est l’omniprésente police Arial qui a donné naissance à des milliers de « spin-offs ».
Les polices web safe sont-elles nécessaires en 2024?
Bien sûr, la grande majorité des utilisateurs utilisent maintenant Google Chrome, à la fois sur leur mobile et sur leur ordinateur de bureau. Mais cela ne signifie pas pour autant que les polices de caractères web safe appartiennent au passé.
En fait, les polices supportées varient en fonction des systèmes d’exploitation, y compris la version actuelle dont dispose un utilisateur. Ainsi, si vous concevez un site web avec une police uniquement prise en charge par la dernière version de Windows 10, la plupart des utilisateurs verront autre chose.
En outre, si vous choisissez d’utiliser et d’héberger une police locale personnalisée ou une police hébergée par un tiers, cela peut ralentir votre site web. Ainsi, le passage à des polices web safe peut accélérer votre site web. Et c’est une excellente chose. En effet, près de 70 % des consommateurs affirment que la vitesse des pages influence leurs décisions d’achat.
Les polices de Google sont-elles web safe ?
Les polices de Google ne sont pas intrinsèquement prises en charge par votre système d’exploitation, donc par définition, ce ne sont pas des polices web safe. Au contraire, puisque Google, un tiers, les héberge, une police Google est appelée une police web. C’est déroutant, nous le savons, mais la différence est que votre navigateur doit charger un fichier avant de pouvoir afficher les polices Google.
Les polices web safe sont déjà prêtes sur la plupart des appareils. Mais ne vous inquiétez pas de l’absence du mot « safe ». Les polices Google sont totalement sûres à utiliser pour améliorer la conception de votre site web. Mais les requêtes HTTP supplémentaires vers un serveur extérieur pourraient ralentir la vitesse de chargement de votre page.
Plus de 31 des meilleures polices de caractères web safe
Nous avons dressé une liste de plus de trente polices web safe différentes, très esthétiques, que vous pouvez utiliser pour concevoir votre site web.
Allons droit au but.
1. Arial
Arial est une police de caractères classique sans empattement (sans serif), qui convient aussi bien aux paragraphes qu’aux titres. Elle a longtemps été un élément essentiel de la conception de sites web. Bien que ces dernières années, elle est souvent utilisée comme solution de repli dans une font stack (pile de polices), plutôt que comme police principale.
Font stack recommandée
Font-family: Arial, Helvetica Neue, Helvetica, sans-serif.
2. Baskerville
Baskerville est une police à empattements (serif) relativement épaisse, développée à l’origine comme police de caractères par John Baskerville en 1750. La conception est bien équilibrée, utilisant un mélange de traits épais et fins pour adoucir les bords durs d’une police à empattements typique. Elle est bien prise en charge par les nouvelles versions des systèmes d’exploitation d’Apple et de Microsoft.
Font stack recommandée
Font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif.
3. Bodoni MT / Bodoni 72
Bodoni MT est une police à empattements, comme Times New Roman, plus adaptée au texte des paragraphes qu’aux titres de la plupart des sites web. Bodoni MT est disponible par défaut avec Microsoft 10 et certaines versions antérieures. Bodoni 72 est incluse avec macOS Sierra et les versions plus récentes.
Font stack recommandée
Font-family: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif.
4. Calibri
Calibri est la police standard sans empattement de Microsoft, et ce depuis sa sortie avec Microsoft Office 2007. Elle a un aspect doux et moderne, avec des bords arrondis pour rehausser la sensation typique du sans serif, ce qui la rend plus chaude que robotisée.
Font stack recommandée
Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif.
5. Calisto MT
Calisto MT est une police à empattements légèrement plus douce et moins prononcée que la plupart des polices de caractères similaires. C’est une police standard de Microsoft, incluse dans la plupart des nouvelles versions de Windows. L’équivalent de macOS ou iOS est la police Bookman Old Style.
Font stack recommandée
Font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif.
6. Cambria
Cambria est une police à empattements encore plus doux, avec, dans de nombreux cas, des empattements à peine perceptibles, même pour les majuscules. Cela lui donne un aspect plus moderne et lui permet de conserver un niveau de lisibilité élevé sur les écrans.
Font stack recommandée
Font-family: Cambria, Georgia, serif.
7. Candara
Candara est une police de caractères sans empattement. Elle fait partie de la collection de polices ClearType de Microsoft. L’équivalent de macOS et iOS est Optima Regular. Les poids inégaux des traits lui donnent un aspect un peu moins moderne et corporatif que les autres polices sans empattement.
Font stack recommandée
Font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif.
8. Century Gothic
Century Gothic est une police de caractères géométrique sans empattement, à l’aspect très net et équilibré. C’est une excellente police pour le web, en particulier pour les titres et les sous-titres. Elle a été conçue à l’origine pour concurrencer la police Futura. Elle est incluse dans la plupart des systèmes d’exploitation Microsoft et Apple.
Font stack recommandée
Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif.
9. Consolas
Consolas est une police de caractères sans empattement, avec une approche unique du design. Tous les caractères ont la même largeur, c’est pourquoi elle utilise des empattements uniquement pour la lettre « I » et le « l » minuscule. Elle fait partie de la collection ClearType.
Font stack recommandée
Font-family: Consolas, monaco, monospace.
10. Copperplate Gothic
Copperplate Gothic est une police de caractères d’inspiration gothique, avec de légers empattements glyphiques sur certaines lettres. Comme elle est inspirée des runes gothiques, il n’y a pas minuscules dans cette police.
Font stack recommandée
Font-family: Copperplate, Copperplate Gothic Light, fantasy.
11. Courier New
Courier New est une police à empattement monospace, avec un texte normal beaucoup plus fin que la plupart des autres polices à empattement et sans empattement. Elle est presque parfaitement couverte par Microsoft et Apple, tant sur les ordinateurs que sur les appareils mobiles.
Font stack recommandée
Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.
12. Dejavu Sans
Dejavu Sans est une police sans empattement avec des lignes droites et nettes, c’est presque un retour aux polices sans empattement classiques comme Arial et Verdana.
Font stack recommandée
Font-family: Dejavu Sans, Arial, Verdana, sans-serif.
13. Didot
Didot est une police de caractères inspirée des caractères originaux Didot, utilisés par l’imprimerie française du XIXe siècle, la famille Didot. C’est un pilier d’Apple, soutenu par la majorité de leurs systèmes d’exploitation et de leurs appareils.
Font stack recommandée
Font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif.
14. Franklin Gothic
Franklin Gothic est une police sans empattement avec des lettres inhabituellement épaisses, presque comme si c’était la version en gras d’une autre police. La police de caractères originale a été développée au début du 20e siècle par les American Type Founders. C’est un bon choix de police pour les titres, mais pas forcément pour le corps du texte.
Font stack recommandée
Font-family: Franklin Gothic, Arial Bold.
15. Garamond
Garamond est une police à empattements, inspirée des caractères du graveur parisien Claude Garamond du XVIe siècle. Elle a des bords plus doux et plus ronds que certaines polices à empattements plus standard, comme Times New Roman. Les versions modernes de Microsoft et d’Apple OS comprennent leurs propres versions de la police Garamond.
Font stack recommandée
Font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif.
16. Georgia
Un proche parent de Garamond, Georgia, est une autre police à empattements avec des bords arrondis et un ressenti assez chaud. Elle a été développée pour Microsoft en 1996 et est toujours l’une des polices MS les plus répandues. Elle est prise en charge par pratiquement toutes les versions de Windows et de MacOS.
Font stack recommandée
Font-family: Georgia, Times, Times New Roman, serif.
17. Gill Sans
Gill Sans est une police de caractères sans empattement, avec des lignes nettes et propres qui lui donnent un aspect moderne. Elle n’est pas idéale pour le texte de paragraphe, en raison du manque de contraste entre les lettres et de l’espacement serré. Mais comme vous pouvez le voir dans l’exemple de texte, elle fait un titre très attrayant. La plupart des appareils fonctionnant sous iOS, macOS et Windows la prennent en charge.
Font stack recommandée
Font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif.
18. Goudy Old Style
Goudy Old Style est une police de caractères à empattements doux, à l’ancienne, avec des empattements forts et un aspect et un ressenti à l’ancienne. Les points sont en forme de diamant plutôt que des cercles normaux et parfaits de la plupart des polices à empattements. Elle est incluse dans la plupart des versions récentes de Windows.
Font stack recommandée
Font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif.
19. Helvetica
Helvetica est peut-être la police la plus célèbre de tous les temps, et certainement l’une des seules polices à avoir son propre documentaire dédié. C’est une police moderne sans empattement, inspirée d’autres polices suisses et allemandes modernes de la fin du XIXe et du début du XXe siècle.
Plutôt qu’un design doux, arrondi et chaleureux, elle est équilibrée et axée sur des lignes et des formes épurées. C’est l’une des rares polices qui conviennent à la fois pour le corps de texte et les titres. Tous les appareils Apple sont équipés de la police Helvetica, tandis que Microsoft utilise par défaut la police Arial, son équivalent MS.
Font stack recommandée
Font-family: Helvetica Neue, Helvetica, Arial, sans-serif.
20. Impact
Impact est une police réaliste sans empattement, avec un aspect gras très épais par défaut pour tous les textes, qu’ils soient en majuscules ou en minuscules. Son audace la distingue du texte ordinaire et la rend parfaite pour les titres ou les CTA (appels à l’action), mais elle n’est pas idéale pour le corps de texte.
Elle faisait partie des polices de base originales du paquet web en 1998. Aujourd’hui encore, elle est largement incluse et supportée par les ordinateurs et les téléphones Apple et Windows.
Font stack recommandée
Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif.
21. Lucida Bright
Lucida Bright est la police à empattements de la gamme de polices Lucida de Microsoft, développée pour MS en 1991. Elle se distingue notamment par l’utilisation d’empattements plus carrés et plus robustes, par exemple sur le « T » et le « L » majuscules. Elle est incluse par défaut dans la plupart des versions récentes de Windows, alors que MacOS n’inclut généralement que la police sans empattement Lucida Grande, ce qui fait de Georgia une police de repli logique.
Font stack recommandée
Font-family: Lucida Bright, Géorgie, serif.
22. Lucida Sans
Lucida Sans est une police humaniste sans empattement, conçue spécialement pour compléter les polices à empattement de la gamme Lucida. Le poids du trait varie davantage que dans les polices sans empattement plus nettes comme Helvetica ou Arial. Cela donne une impression moins futuriste ou robotisée, et plus ludique. C’est une police idéale pour les titres et les CTA.
Font stack recommandée
Font-family: Lucida Sans, Helvetica, Arial, sans-serif.
23. Microsoft Sans Serif
Microsoft Sans Serif est une police sans serif introduite pour la première fois avec Windows 2000. C’est le successeur de la police MS Sans Serif, qui était également connue sous le nom de Helv (abréviation de Helvetica). Elle est inspirée et basée sur Helvetica, la principale police de caractères sans empattement des temps modernes.
Il s’agit d’une police de caractères propre, avec un poids de trait uniforme, ce qui lui donne un aspect professionnel et propre. Elle est parfaite pour les titres et les sites web d’entreprises. Elle a été incluse comme l’une des polices originales pour le web et est toujours standard pour tous les appareils Microsoft.
Font stack recommandée
Font-family: MS Sans Serif, sans-serif.
24. Optima
Optima est une police humaniste sans empattement, avec un poids de trait variable et une symétrie variable. Elle semble donc presque faite à la main, ce qui combat le ressenti typique d’une police sans empattement. C’est l’une des polices sans empattement standard d’Apple et elle est prise en charge par la plupart des appareils iOS et macOS. L’équivalent de Microsoft est Segoe.
Font stack recommandée
Font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif.
25. Palatino
Palatino est un autre serif à l’ancienne et se sentirait à l’aise dans n’importe quel journal ou magazine en ligne. Mais elle est moins uniforme que quelque chose comme Georgia ou Times New Roman, avec des poids et des formes de traits variables.
L’approche de conception permet d’adoucir les lettres nettes comme k, l, x, y et z. Elle est également légèrement plus grasse que les autres polices à empattements. Ces deux facteurs l’aident à être un peu plus chaleureuse. Palatino est incluse dans la majorité des appareils Windows et Apple.
Font stack recommandée
Font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif.
26. Perpetua
Perpetua est une police à empattements au design unique, créée à l’origine par le sculpteur anglais Eric Gill. Il y a un fort contraste dans le poids du trait, par exemple, regardez le « e » minuscule ou le chiffre « 3 ». Cela donne à la police une qualité créative, presque ludique. Il s’agit généralement d’une police Windows, mais Baskerville, un proche parent, est standard sur la plupart des appareils Apple.
Font stack recommandée
Font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif.
27. Rockwell
Rockwell est une police à empattement carré ou dalle avec un lettrage très audacieux, de presque un huitième de hauteur. Elle convient aux titres ou aux CTA, mais le poids de la police n’est pas idéal pour le corps du texte. Elle est incluse dans la plupart des nouvelles versions de MS Windows.
Font stack recommandée
Font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif.
28. Segoe UI
Segoe UI est la principale police sans empattement de la famille de polices Segoe. Microsoft l’utilise non seulement dans de nombreuses applications, mais aussi dans divers supports commerciaux pour ses produits.
C’est une police moderne, avec des lettres symétriques et peu de variation dans le poids du trait. La police n’est pas fournie avec les ordinateurs Apple, mais l’équivalent Helvetica Neue est similaire dans son aspect et son resssenti.
Font stack recommandée
Font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif.
29. Tahoma
Tahoma est une autre police sans empattement développée par Microsoft. Elle a des lettres légèrement plus grasses que Segoe UI et utilise des points carrés pour ses lettres minuscules, ses points et autres marques.
C’est une police de caractères propre et uniforme, qui ne serait pas mal placée dans le contenu ou les titres. Elle est présente sur tous les appareils Microsoft et pratiquement tous les appareils Apple.
Font stack recommandée
Font-family: Tahoma, Verdana, Segoe, sans-serif.
30. Trebuchet MS
Trebuchet MS est une autre police sans empattement développée par Microsoft. C’est l’une des polices originales incluses dans les polices de base pour le paquet web de Microsoft. Elle est toujours supportée par la quasi-totalité des appareils Microsoft et Apple. Les lettres sont plus fines que beaucoup d’autres polices sans empattement, ce qui en fait une option pour les paragraphes et le corps du texte.
Font stack recommandée
Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif.
31. Verdana
Verdana, une police de caractères sans empattement, est un autre produit de base de Microsoft qui existe depuis 1996. Le poids du trait est assez faible pour une police sans empattement, ce qui donne des lettres minces et faciles à lire. Vous pouvez l’utiliser pour le texte des paragraphes et les titres sans problème. Elle est prise en charge par la quasi-totalité des appareils Apple et Windows.
Font stack recommandée
Font-family: Verdana, Geneva, sans-serif.
Polices cursives web Safe
Si vous souhaitez utiliser une police de caractères cursive web safe, vous n’avez pas trop de choix. Plus précisément :
- Segoe script
- Rage
- Script MT
- Snell Roundhand
- Lucida Handwriting
Il n’y a pas de polices cursives qui soient universellement supportées par les appareils Apple et Microsoft. Vous devez considérer que l’utilisation d’une police cursive pour le corps de votre texte n’est pas une bonne idée, car la lisibilité est une partie importante de la convivialité d’un site web.
Vous devez toujours utiliser un texte très lisible pour vos paragraphes, sinon les visiteurs malvoyants auront du mal à lire le texte de votre site. Cela peut entraîner des taux de rebond élevés et un manque général d’engagement vis-à-vis de votre contenu.
Polices web safe sans serif
Sans serif signifie essentiellement « sans empattement ». Un empattement est une ligne ou un trait ajouté à un trait plus long dans une lettre. Par exemple, les petits traits verticaux sous le trait supérieur d’un « T » majuscule, courants dans les titres des journaux ou des magazines. Les polices sans empattement sont les plus courantes et les plus populaires sur le web, vous avez donc le choix entre de nombreuses options :
- Arial
- Calibri
- Candara
- Century Gothic
- Consolas
- Dejavu Sans
- Franklin Gothic
- Gill Sans
- Helvetica
- Lucida Sans
- MS Sans Serif
- Neue Helvetica
- Optima
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
Où télécharger des polices Web Safe ?
L’avantage des polices de caractères web safe est que vous n’avez pas à vous soucier de les télécharger. Elles sont déjà prises en charge par le système d’exploitation de chaque visiteur, il vous suffit donc de les coder avec du CSS. Si vous ne connaissez rien au HTML et au CSS ou au codage pour le web, cela peut vous sembler un peu écrasant.
Mais croyez-nous, ce n’est pas aussi difficile que vous pourriez le penser. Nous vous guidons pas à pas dans notre prochaine section.
Comment ajouter des polices web safe à votre site WordPress
Si vous avez un site WordPress avec le dernier thème Twenty Twenty, vous pouvez modifier les polices HTML en ajoutant des CSS personnalisés dans l’outil de personnalisation de WordPress.
Pour y accéder, cliquez sur le lien Apparence > Personnaliser dans le menu, puis développez l’onglet CSS additionnel.
Ensuite, vous devez utiliser les Outils de développement de Chrome (ou un outil similaire pour un autre navigateur) pour identifier les sélecteurs du texte que vous voulez modifier.
Par exemple, vous pouvez consulter le titre de votre article de blog :
On peut voir que le thème utilise le sélecteur standard « entry-title » pour le titre. Vous pouvez également rechercher l’attribut « font-family » pour voir comment le thème stylise le texte, et à quel niveau.
Comme Twenty Twenty n’utilise pas de police spécifique pour les titres, vous pouvez facilement modifier la police du titre en ciblant le sélecteur « font-family ».
Par exemple, si nous voulons changer le titre pour la police Impact, nous pouvons utiliser le code suivant :
h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }Il suffit de l’ajouter au CSS additionnel et de cliquer sur « Publier » pour que vos modifications soient prises en compte en direct.
Nous abordons ce sujet et bien d’autres encore dans notre guide sur la manière de changer les polices de caractères dans WordPress. Si vous avez construit votre site web en utilisant HTML et CSS, vous pouvez modifier la police directement dans le code source.
Par exemple, si vous utilisez la balise de style dans les documents HTML pour appliquer le code CSS à chaque page, vous pouvez y modifier l’attribut font-family.
Si vous voulez changer la police de tous les textes de la page, vous devez cibler le sélecteur « body ». Si vous voulez changer la police pour un texte spécifique, vous devez utiliser un sélecteur spécifique.
Si vous avez utilisé un modèle pour construire votre site web, votre CSS se trouve très probablement dans une feuille de style séparée. C’est très bien, car cela signifie que vous pouvez modifier la police de l’ensemble de votre site en modifiant un seul fichier.
Dans ce cas, vous devez trouver votre fichier de feuille de style (généralement appelé style.css ou une variante). Ensuite, vous devez trouver la section qui contrôle les polices et les caractères de votre site.
Généralement, cela se fait vers le haut. Sinon, vous pouvez rechercher « font-family » en utilisant l’éditeur de code de votre choix.
Résumé
Tout comme pour les thèmes et les extensions, les options ne manquent pas pour vous en ce qui concerne les idées de polices.
Avec une variété de polices avec ou sans serif, monospace, et même cursives disponibles gratuitement, les polices web safe sont un excellent point de départ pour créer un site.
Les polices de caractères parfaites font ressortir votre marque, améliorent la lisibilité et soutiennent votre message. Choisissez judicieusement !
Si vous avez aimé cet article, consultez notre guide des 50 meilleures polices rétro pour donner une touche nostalgique à votre site web ou à votre projet de conception graphique.
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire