Meilleures polices pour un site web. Beau c’est bien, rapide c’est mieux !

Quelles sont les meilleures polices pour un site web très rapide, avec un bon rendu et optimisé pour le SEO ?

Nous ici notre spécialité, c’est la création de sites rapides, efficaces, conçus pour l’optimisation des conversions : trafic, ventes, génération de lead. Chaque dixième de seconde de plus pour le chargement de votre site, ce sont des milliers d’euros qui s’envolent. Si votre site ne se charge pas en moins de 3 secondes 40% des utilisateurs partent.

Les polices de caractère que vous utilisez jouent sur la vitesse de votre site. Si les polices que vous avez choisi ne sont pas sur la machine de l’utilisateur, son navigateur devra d’abord les télécharger, se qui fera perdre quelques secondes ou dixièmes de seconde au chargement de votre page. Et c’est une excellente chose. Car près de 70 % des consommateurs affirment que la vitesse des pages influence leurs décisions d’achat.

C’est pour cela que pour optimiser la vitesse de votre site Web vous devez utiliser des polices Web sécurisées.

Que sont les polices Web sécurisées (Web safe fonts) ?

Une police sécurisée (ou sûre) pour le web est une police qui est installée par défaut sur pratiquement tous les ordinateurs ou appareils mobiles.

C’est ce qui les rend sûres. Où que se soit la personne dans le monde et quel que soit l’appareil qu’elle utilise, une police sûre pour le web se chargera et s’affichera toujours correctement.

Les polices adaptées au Web sont souvent comparées aux polices en ligne telles que Google Fonts, mais elles sont différentes. Les polices en ligne nécessitent le chargement d’un fichier supplémentaire lors de la visite de la page. Elles ne sont presque jamais installées en mode natif sur un appareil.

Les polices Google Fonts sont elles sécurisées ?

Google Fonts est un répertoire gigantesque de polices libres d’utilisation. Les fontes sont les déclinaisons des caractère au sein de sa famille ou police. Lorsque vous utilisez une de ces polices, si elle n’est pas présente sur la machine (ordi, tablette, smartphone) du visiteur elle devra être téléchargée et installée.

Par défaut les polices Google ne sont pas prises en charge par la machine qui visite la page. Par définition, il ne s’agit donc pas de polices sécurisées pour le Web. En revanche, étant donné que Google, un tiers, les héberge, une police Google est appelée une police Web. Nous savons que cela prête à confusion, mais la différence réside dans le fait que votre navigateur doit charger un fichier avant de pouvoir afficher les polices Google.

Même si la grande majorité des utilisateurs utilisent désormais Google Chrome, tant sur mobile que sur ordinateur cela ne signifie pas que les polices sûres pour le Web appartiennent au passé en 2021.

En fait, les polices prises en charge varient en fonction des systèmes d’exploitation, y compris de la version actuelle dont dispose l’utilisateur. Ainsi, si vous concevez un site Web avec une police prise en charge uniquement 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 sûres pour le Web peut accélérer votre site Web.

Si je devais nuancer, les polices web ont déjà présentes sur la majorité des appareils. Si le design prime, vous pouvez utiliser les polices Google en toute sécurité pour améliorer la conception de votre site Web. Le prix à payer est un léger ralentissement. Mais les requêtes HTTP supplémentaires adressées à un serveur externe peuvent ralentir la vitesse de chargement de votre page. Pour en mesure l’impact, vous pouvez utiliser le service de test de rapidité de google.

En CSS, il est également possible de spécifier une pile de polices (font stacks) qui donne au navigateur une liste ordonnée de polices à utiliser. Si la police A n’est pas présente, utiliser la police B, si la police B n’est pas présente utiliser la police C. Vous trouverez plus de détail dans cet article.

Pro Tip : Si vous utilisez un CDN (tel qu’Ezoic) la police est mise en cache et peut donc être utilisée sur n’importe quel autre site Web utilisant la même police. Vous économisez également un peu de bande passante, puisque vous n’hébergez pas les fichiers de police.

Résumé rapide en vidéo

Beau ou rapide ?

Dilemme ? Dans certains cas le design est primordial dans d’autres c’est la rapidité. Plus de 60% des internautes naviguent via leur smartphone (cela a été démontré même pendant le confinement !). Alors si vous n’avez pas d’impératif artistiques, faites comme le gouvernement, privilégiez le fonctionnel.

Cela ne veut pas dire que votre site Web ne sera pas agréable et joli-à-l’oeil.

Vous n’avez pas besoin de milliers de polices pour créer un site Web de qualité. En typographie, les règles de l’art, sont de se limiter à 3 ou 3 polices. Le choix d’une typographie dépend de l’utilisateur avec qui vous souhaitez communiquer.

Vous devez vous assurer que les polices que vous utilisez sont visibles par tous ceux qui visitent votre site. C’est là qu’interviennent les polices sécurisées pour le Web. L’idéal est de trouver :a) dont l’utilisation est 100 % gratuite et b) qui n’ont pas besoin d’être hébergées ailleurs pour que vos visiteurs puissent les voir.

Les polices sécurisées pour le web résolvent ce problème et constituent désormais une norme en matière de conception web. En choisissant une police sûre pour le Web, vous pouvez être sûr que votre texte apparaîtra toujours comme prévu et que votre site sera rapide.

Quels sont les différents types de polices Web ?

Pour les polices sûres pour le Web, vous pouvez utiliser des polices avec empattement (sérif), sans empattement sans-sérif), monospace, cursive, fantaisie et MS.

• Les polices avec empattement (sérif) contiennent des empattements, de petits traits décoratifs qui dépassent du corps principal de la lettre. Les polices avec empattement sont plus faciles à lire dans les formats physiques, imprimés, car les empattements guident les yeux du lecteur d’un caractère à l’autre. La police Times New Roman est une police à empattement.
• Les polices sans empattement (sans sérif) n’ont pas d’empattement. Les polices sans empattement sont plus faciles à lire sur les écrans et sont donc beaucoup plus courantes dans les textes des sites Web. L’Arial est une police sans empattement.
• Les polices monospaces sont des polices dont l’espacement entre les caractères est égal. Courier est une police monospace.
• Les polices cursive ou script sont des polices qui ressemblent à une écriture manuscrite. Brush Script MT est une police cursive.
• Les Fantaisie désigne les polices décoratives hautement stylisées. Luminari est une police fantaisie.
• Le MS signifie Microsoft et indique que la police a été créée par Microsoft pour les appareils numériques. Trebuchet MS en est un exemple.

Les 28 polices rapides pour votre site

Nous allons présenter les 28 plus belles polices sécurisées pour le web que vous pouvez utiliser dans votre site WordPress. Sur mobile pensez à agrandir l’écran pour voir les détails des polices.

Sans sérif

• Arial (sans-serif). Arial est sans doutes l’une des plus célèbre police sans empatement, adaptée aux paragraphes et aux titres. Elle a longtemps été un élément de base de la conception de sites Web.
  Déclinaisons d’Arial : Arial Black, Arial Narrow, Arial Rounded MT Bold

• Calibri : Calibri est la police sans empattement standard de Microsoft, depuis sa sortie avec Microsoft Office 2007. Elle a un aspect doux et moderne, avec des bords arrondis qui rehaussent l’aspect typique de la police sans empattement, la rendant plus chaleureuse que robotique.

• Geneva : Geneva est une police sans-serif néo-grotesque ou « industrielle » conçu par Susan Kare pour Apple. C’est l’une des plus anciennes polices livrées avec les systèmes d’exploitation Macintosh. La version originale était une police bitmap, mais les versions ultérieures ont été converties en TrueType lorsque cette technologie est devenue disponible sur la plate-forme Mac.

• Gill Sans : Gill Sans est une police sans empattement, avec des lignes nettes et claires qui lui donnent un aspect moderne. Pour le texte de paragraphe elle n’est pas idéale en raison de son manque de contraste entre les lettres et de son espacement serré. Mais comme vous pouvez le voir dans le texte de l’exemple, elle permet d’obtenir un superbe titre. La plupart des appareils fonctionnant sous iOS, macOS et Windows le prennent en charge.

• Helvetica : l’Helvetica est peut-être la police la plus célèbre de tous les temps. Il s’agit d’une police moderne sans empattement, inspirée par d’autres polices modernes suisses et allemandes 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. Cela en fait l’une des rares polices convenant à la fois au corps du texte et aux titres. Tous les appareils Apple incluent les polices Helvetica, tandis que Microsoft utilise par défaut Arial, son équivalent MS.

• Impact : Impact est une police sans empattement, avec un aspect gras très épais par défaut pour tout le texte, en majuscules comme en minuscules. L’aspect gras permet de se démarquer du texte normal et la rend parfaite pour les titres ou les CTA (appels à l’action), mais elle n’est pas idéale pour le corps du texte.
  Elle faisait partie des premières polices de base pour le Web en 1998. Aujourd’hui encore, elle est largement incluse et prise en charge par les ordinateurs et les téléphones Apple et Windows.

• Lucida Grande : Lucida est une famille étendue de police de caractères optimisée pour l’écran et l’impression, à la lisibilité remarquable. Elle a été conçue en 1985 par Charles Bigelow et Kris Holmes, à une époque où les imprimantes et photocopieuses de qualité assez médiocre, et les écrans en basse définition, nécessitaient des caractères assez marqués, sans détails trop fins qui disparaitraient dans la grille.
  C’est pour cela que cette police est optimisée pour l’affichage à l’écran et l’impression numérique.

• Optima : Optima est une police sans-serif conçu par Hermann Zapf en 1952. Bien que classée comme un sans-serif, Optima a un subtil gonflement aux extrémités suggérant un serif glyphique. Optima s’inspire de la taille de pierre romaine et italienne.
  C’est une police unique et élégante.

• Tahoma : Tahoma est une autre police sans empattement développée par Microsoft. Ses lettres sont légèrement plus audacieuses que celles de Segoe UI et elle utilise des points carrés pour les minuscules, les points et les autres marques.
  Il s’agit d’une police propre et uniforme, qui ne serait pas déplacée dans du contenu ou des titres. Elle est incluse dans tous les appareils Microsoft et pratiquement tous les appareils Apple.

• Trebuchet MS : Trebuchet MS est une autre police sans empattement développée par Microsoft. C’était l’une des polices originales incluses dans le paquet de polices de base pour le web de Microsoft.
  Elle est toujours prise en charge par pratiquement tous les appareils Microsoft et Apple. Les lettres sont plus fines que celles de nombreuses autres polices sans empattement, ce qui en fait une option pour les paragraphes et le corps du texte.

• Verdana : Verdana, une police sans empattement, est un autre élément essentiel de Microsoft qui existe depuis 1996. Le poids des traits est assez faible pour une police sans empattement, ce qui donne des lettres minces et faciles à lire. Vous pouvez l’utiliser sans problème pour les paragraphes et les titres. Elle est prise en charge par pratiquement tous les appareils Apple et Windows.

Sérif

• Baskerville : Baskerville est une police à empattement conçu en 1757 par John Baskerville, en Angleterre. Baskerville est classé comme une police de transition, conçue comme un raffinement de ce que l’on appelle aujourd’hui les caractères de style ancien.

• Big Caslon : Benjamin Franklin aimait tellement les polices Caslon qu’il les a utilisées pour la Déclaration d’indépendance et la Constitution des États-Unis. Cette police à empattement de style ancien a définitivement gagné ses galons grâce à ses formes magnifiques et ses caractères facilement identifiables.

• Bodoni MT : Bodoni MT est une police à empattement, 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 plus anciennes. Bodoni 72 est inclus dans macOS Sierra et les versions plus récentes.

• Cambria : 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 haut niveau de lisibilité sur les écrans.

• Didot : Didot est une police inspirée des caractères Didot originaux, utilisés par la famille Didot, imprimeur français du 19ème siècle. C’est un pilier d’Apple, supporté par la majorité de leurs systèmes d’exploitation et de leurs appareils.

• Georgia : proche parente de Garamond, Georgia est une autre police à empattement avec des bords généralement arrondis et un toucher assez chaleureux. Elle a été développée pour Microsoft en 1996 et reste l’une des polices MS les plus répandues. Elle est prise en charge par pratiquement toutes les versions de Windows et de macOS.

• Hoefler Text

• Palatino : Palatino est un autre empattement de style ancien qui serait tout à fait à sa place dans un journal ou un magazine en ligne. Mais elle est moins uniforme que Georgia ou Times New Roman, avec des poids et des formes de traits différents.
  L’approche conceptuelle permet d’adoucir les lettres pointues telles que k, l, x, y et z. Elle est également légèrement plus audacieuse que les autres polices à empattement. Ces deux facteurs contribuent à lui donner un aspect un peu plus chaleureux. Palatino est compatible avec la majorité des appareils Windows et Apple.

• Rockwell : Rockwell est une police à empattement carré ou plat, avec un lettrage très gras, presque monovolume. 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.

• Times New Roman : Times New Roman est la police à empattement par excellence. Elle est extrêmement populaire et constitue la police principale des appareils et applications Windows, comme Microsoft Word. Les navigateurs y reviennent lorsque la police spécifiée ne peut pas être affichée.
  Techniquement, Times New Roman est une version actualisée de la police Times, qui est utilisée dans les journaux imprimés et qui, de ce fait, est l’une des polices les plus reconnaissables au monde.

Monospace

• Andale Mono : les polices monospace ont des lettres qui sont espacées de manière égale, ce qui confère une qualité mécanique au texte.
  L’Andalé Mono est un parfait exemple de police monospace. Cette option sans empattement a été développée par Apple et IBM et a été fréquemment utilisée dans les environnements de développement de logiciels.

• Courier New : Courier New est une police à empattement monospace, avec un texte régulier 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.

• Monaco : Monaco est une police de caractères sans empattement à simple interligne développée par Susan Kare et Kris Holmes. Elle est disponible dans le cadre de macOS ; elle était auparavant disponible avec toutes les versions antérieures au système d’exploitation Mac. Les caractères sont distincts et il est difficile de distinguer entre zéro (chiffre zéro) et O (O majuscule) ainsi que 1 (chiffre un) et ou (barre verticale) et I (I majuscule) et la lettre l (L minuscule).
  La caractéristique distinctive de la police est sa courbe des parenthèses, ainsi que dans la taille des crochets.

Fantasy

• Copperplate : Copperplate a été conçue à l’origine en 1901 (avec la le Copperplate Gothic) au sein d’une famille de polices contenant plusieurs poids et variations condensées. Le nom de la police reflète la popularité de ce style particulier de police de caractères à l’époque où la gravure sur cuivre était une technique populaire de reproduction de matériel illustré, de 1530 environ jusqu’au XIXe siècle.

• Papyrus : Papyrus est une police de caractères manuscrits développée par Chris Costello. en 1982.
  La police Papyrus présente des caractéristiques distinctes, notamment des bords rugueux, des courbures irrégulières, ainsi que des traits plus horizontaux dans la capitale. Il n’existe qu’un seul style, qui peut être décrit comme Papyrus Regular. Le Papyrus est largement utilisé et est connu pour sa police unique.

Script

• Brush Script MT : Brush Script MT est une police script fortement embellie, conçue pour imiter les traits rapides de l’écriture manuelle. Si elle peut évoquer la nostalgie chez certains lecteurs, il est préférable de limiter cette police à des utilisations décoratives, car son style se fait au détriment de la lisibilité.

Tous les extraits sont en corps 22.

Lire aussi

• Police de caractère basque (euska)

Quels sont les différents conseils à connaître afin de maximiser la performance de votre site internet ?

Dans le cas où vous ne sauriez pas quelle police choisir sur votre site en 2022, nous avons essayé de vous apporter les réponses nécessaires pour chasser chacune de vos questions. De ce fait, vous avez pu vous rendre compte qu’il existait plusieurs types de polices, comme par exemple celles avec ou sans empattement, monospaces ou bien encore cursives entre autres. Dans l’éventualité où vous voudriez dans un autre temps améliorer la performance de votre site, vous pouvez pour cela vous rendre sur des sites web qualifiés à ce sujet. Ainsi, en consultant ces plateformes en ligne, vous allez pouvoir découvrir ce qui est considéré comme essentiel pour améliorer la web performance. 

Dans un premier temps, vous devez savoir qu’il est important de ne pas ajouter le service d’hébergement gratuit Google Fonts sur votre site, ceci pourrait rallonger encore plus les temps de chargement de ce dernier. De surcroît, les Core Web Vitals sont indispensables dans le but de proposer à l’internaute une expérience utilisateur de qualité. Ce paramètre va vous permettre de générer un trafic de choix.