Les meil­leures webfonts : voici pourquoi les web safe fonts sont si im­por­tants

En tant que con­cep­teur de sites Web, il n’a jamais été aussi facile de trouver des polices de ca­rac­tères pour un site Web de qualité. Grâce aux webfonts modernes, il n’y a pra­ti­que­ment aucune limite à votre créa­ti­vité. Avec la bonne com­bi­nai­son de polices qui reflètent le caractère de votre site et ap­par­tien­nent à ce que l’on appelle les web safe fonts, vous laisserez une im­pres­sion positive à vos lecteurs. Nous vous ex­pli­quons ce que sont les web safe fonts et pourquoi elles sont si im­por­tantes.

Les webfonts sont des polices di­gi­ta­li­sées qui peuvent être con­ver­ties par les na­vi­ga­teurs courants en un style de police. Ces polices sont prin­ci­pa­le­ment destinées à être utilisées dans des documents HMTL ou XHTML, c’est-à-dire à être utilisées sur le Web. Les webfonts se ca­rac­té­ri­sent par le fait qu’elles fonc­tion­nent in­dé­pen­dam­ment du système d’ex­ploi­ta­tion utilisé, car elles ne sont pas chargées à partir des col­lec­tions de polices locales lorsqu’un site Web est appelé, mais à partir d’un serveur Web externe. Pour cela, il suffit d’intégrer les polices Web sou­hai­tées à l’aide de la règle CSS @font-face et de les spécifier dans le Font Stack (pile de polices de ca­rac­tères du Web).

Depuis l’in­tro­duc­tion de @font-face dans CSS2, toutes les polices peuvent être intégrées dans les projets Web d’un point de vue technique. Au­pa­ra­vant, les con­cep­teurs de sites Web n’avaient à leur dis­po­si­tion qu’une petite sélection de polices standard comme Arial ou Times New Roman. Dans ce contexte, l’ex­pres­sion « web safe fonts » (que l’on pourrait traduire par « polices de ca­rac­tères sûres pour le Web ») a été inventée pour décrire ces polices standard in­dis­pen­sables pour une pré­sen­ta­tion fluide sur le Web.

Grâce à l’immense choix de web safe fonts, il est aujourd’hui beaucoup plus facile pour les con­cep­teurs de sites Web de répondre aux exigences des en­tre­prises en matière de design. Les web safe fonts sont donc l’une des bases les plus im­por­tantes pour la mise en œuvre de stra­té­gies marketing globales, ce qui les rend presque in­dis­pen­sables aux nom­breuses en­tre­prises qui con­nais­sent un succès re­ten­tis­sant sur le Web.

La page What Font Is ré­per­to­rie plus de 800 000 polices à utiliser sur le Web. Toute personne sou­hai­tant concevoir un projet Web aujourd’hui et re­cher­chant des polices de ca­rac­tères adaptées peut, en principe, se servir librement dans cet immense réservoir. Les res­tric­tions po­ten­tielles en termes d’affichage des polices sont désormais ex­clu­si­ve­ment dues à des formats de fichiers de webfonts ou à des versions de na­vi­ga­teurs trop anciens. Le tableau suivant résume les quatre prin­ci­paux formats de police pour les sites Web et leur prise en charge par les na­vi­ga­teurs :

La vue d’ensemble montre clai­re­ment que le choix du format approprié joue un rôle important, car aucun format ne garantit à 100 % que les webfonts sou­hai­tées fonc­tion­ne­ront sur l’appareil de l’uti­li­sa­teur. Les appareils mobiles dotés d’anciennes versions de na­vi­ga­teur, par exemple, ne prennent pas en charge le format normalisé WOFF (Web Open Font Format) et son suc­ces­seur WOFF2.

C’est encore plus pro­blé­ma­tique si les uti­li­sa­teurs tra­vail­lent encore avec Internet Explorer. Les dif­fé­rentes versions du na­vi­ga­teur Microsoft prennent notamment en charge le format EOT (Embedded OpenType), qui n’est lui-même pris en charge par aucun autre na­vi­ga­teur Internet.

Le support le plus large est offert par les deux formats TTF (TrueType Format) et OTF (OpenType Format).

Le terme police de ca­rac­tères est utilisé pour désigner tous les ca­rac­tères qui ont été conçus selon un concept de design identique. S’il existe plusieurs variantes d’une telle police, qui diffèrent en termes de largeur de trait ou d’es­pa­ce­ment des lettres, par exemple, on parle alors de famille de polices. Par exemple, les polices Segoe UI, Segoe Light et Segoe Semibold ap­par­tien­nent à une famille de polices.

Les dif­fé­rents web safe fonts con­vien­nent à dif­fé­rentes ap­pli­ca­tions. Lorsque vous choi­sis­sez une police, vous devez prêter attention à deux choses en par­ti­cu­lier : la li­si­bi­lité de la police et son impact émo­tion­nel. Le support joue également un rôle important. Dans les polices dites à em­pat­te­ment, les lettres in­di­vi­duelles ont de petits traits ho­ri­zon­taux à l’extrémité des barres de lettres, ce qui facilite la lecture fluide des textes en petits ca­rac­tères. Toutefois, cette police de ca­rac­tères n’est pas toujours idéale pour la lecture sur un écran.

Les pro­prié­tés des dif­fé­rentes ca­té­go­ries de webfont énumérées ici sont générales. Dans la pratique, l’uti­li­sa­tion de polices inat­ten­dues est souvent un moyen efficace pour se démarquer de la con­cur­rence. Pour trouver les bons webfonts, suivez les conseils suivants :

• Tenez compte du thème et du groupe cible lors du choix : une jolie com­bi­nai­son de web safe fonts est inutile si elle ne cor­res­pond pas au thème du site Web. Une com­bi­nai­son de polices Serif et Sans Serif est la meilleure façon de trans­mettre l’ob­jec­ti­vité. Les polices d’écriture attirent davantage l’attention et semblent plus vivantes.
• Plus votre page contient de texte, plus vous devez mettre l’accent sur la fonc­tion­na­lité. En plus d’une bonne li­si­bi­lité, vous devez également tenir compte du fait que les uti­li­sa­teurs d’appareils mobiles accèdent à votre page par défaut via la trans­mis­sion de données mobiles. Les webfonts trop spéciaux et peu utilisées aug­men­tent inu­ti­le­ment le temps de char­ge­ment.
• Limitez le nombre de web safe fonts utilisées. En règle générale, l’uti­li­sa­tion de deux polices dif­fé­rentes a fait ses preuves, l’une étant utilisée pour le corps du texte et l’autre pour les titres et les textes spéciaux.
• Re­cher­chez des polices de ca­rac­tères dif­fé­rentes qui créent un bon contraste. L’in­te­rac­tion entre les polices Serif et Sans Serif en est un bon exemple. Toutefois, gardez un équilibre sain : si les webfonts choisies sont trop éloignées sur le plan sty­lis­tique, cela va créer une tension qui n’échappera pas au visiteur du site Web. L’ex­pé­rience a montré que deux polices trop si­mi­laires ont également un effet négatif.

Au­pa­ra­vant, la dif­fi­culté con­sis­tait à proposer des offres Web créatives malgré le choix très limité de polices. Mais les con­cep­teurs d’aujourd’hui sont con­fron­tés à un tout autre défi : ils doivent se tenir au courant des nom­breuses web safe fonts pour pouvoir choisir une ou plusieurs polices qui cor­res­pon­dent à leur propre projet.

C’est pourquoi nous avons compilé ci-dessous quelques-unes des web safe fonts les plus po­pu­laires.

La police sans em­pat­te­ment Arial est l’une des polices standard fournies avec les systèmes d’ex­ploi­ta­tion Microsoft depuis Windows 3.1. En tant que webfont, Arial est donc utilisée depuis le début, tant dans les titres que dans les pa­ra­graphes. Cependant, cette police classique est de plus en plus con­si­dé­rée comme une solution de secours dans le Font Stack.

Options de té­lé­char­ge­ment :

• fonts­for­web.com
• fontsfree.pro

Comme Arial pour les systèmes d’ex­ploi­ta­tion Windows, Helvetica (Neue Haas Grotesk) a été pendant longtemps la police de caractère pri­vi­lé­giée pour les systèmes d’ex­ploi­ta­tion des appareils Apple. Des lignes et des formes claires ca­rac­té­ri­sent cette police sans em­pat­te­ment, qui a longtemps été le choix standard dans de nom­breuses autres en­tre­prises. À l’occasion de son 50e an­ni­ver­saire, le cinéaste et artiste Gary Hustwit a rendu hommage à la police dans le film do­cu­men­taire éponyme « Helvetica ».

Options de té­lé­char­ge­ment :

• da­font­free.io
• boldfonts.com

Palatino est une police avec em­pat­te­ment dans le style ancien, connu surtout de l’im­pres­sion ty­po­gra­phique. Cependant, cette webfont légère et ouverte est également une option in­té­res­sante pour les textes de blog et les magazines en ligne. La police, qui a été publiée en 1948, a été nommée d’après le cal­li­graphe italien Giam­bat­tista Palatino.

Options de té­lé­char­ge­ment :

• da­font­free.io
• da­font­fa­mi­liy.com

La famille de webfont Bas­ker­ville a vu le jour en 1754 et se ca­rac­té­rise par son ins­pi­ra­tion baroque. Son créateur était le ty­po­graphe anglais John Bas­ker­ville. Le mélange de forts con­trastes de traits, d’axes d’ombres verticaux et d’em­pat­te­ments accentués ho­ri­zon­ta­le­ment a été considéré comme un exploit technique et a été fré­quem­ment imité du vivant de Bas­ker­ville, comme beaucoup de ses autres ca­rac­tères.

Options de té­lé­char­ge­ment :

• fonts­for­web.com
• free­fonts­fa­mily.com

La web safe font Consolas a été in­tro­duite en 2007 avec Windows Vista. Elle est conçue pour les en­vi­ron­ne­ments de dé­ve­lop­pe­ment et autres si­tua­tions où une police non pro­por­tion­nelle, c’est-à-dire une police avec une largeur de caractère fixe, est né­ces­saire. Dans les projets Web, Consolas est parfaite pour afficher des extraits de code, par exemple.

Options de té­lé­char­ge­ment :

• bestfonts.pro
• download-free-fonts.com

La famille de polices Garamond est utilisée depuis le 16e siècle. En raison de son ex­cel­lente li­si­bi­lité, cette police avec em­pat­te­ment est une des plus im­por­tantes et des plus fré­quem­ment utilisées en ty­po­gra­phie. Avec ses bords plus doux et plus arrondis, Garamond se présente comme une webfont al­ter­na­tive aux autres polices avec em­pat­te­ment standard comme Times New Roman.

Options de té­lé­char­ge­ment :

• cu­fon­fonts.com
• fonts­for­web.com

La police pro­por­tion­nelle Georgia a été conçue par Matthew Carter pour Microsoft en 1996. Dès le départ, son objectif était d’obtenir l’affichage le plus clair possible et une li­si­bi­lité optimale sur les écrans d’or­di­na­teur. Avec la po­pu­la­rité crois­sante des blogs, cette web safe font a trouvé sa place sur Internet une dizaine d’années plus tard.

Options de té­lé­char­ge­ment :

• down­load­fonts.io
• cu­fon­fonts.com