Élément incontournable du web design, le choix des polices d’écriture - ou fontes - d’un site n’est pas une mince affaire. La typographie, c’est un art : tout est question d’équilibre entre lisibilité, contraste des titres et des blocs de texte, originalité du design et image de marque de l’ensemble (insérer une blague sur Comic Sans ici).
Si on veut que le design de nos textes se démarque, les services de fontes en ligne sont de véritables mines d’or : l’exemple le plus parlant reste probablement Google Fonts, qui permet d’intégrer d’un simple copier/coller n’importe quelle police parmi près d’un millier d’options.
Cependant, utiliser une police de caractère originale n’est pas sans inconvénients, notamment en ce qui concerne le SEO, et, plus important pour nous, l’éco-conception web. La bonne pratique en la matière est donc d’utiliser des polices natives dans le design d’un site.
Qu’est-ce qu’une police native ?
Les polices natives, ou polices système, sont tout simplement les polices de caractères installées par défaut sur le système d’exploitation de votre appareil. Vous connaissez sûrement :
- Arial
- Times New Roman
- Garamond
- Courier New
- Verdana
Si - au contraire de l’auteure de cet article - vous n’avez pas installé de police supplémentaire depuis la mise en route de votre ordinateur, vous pouvez aller dans Ordinateur > Disque C: > Windows > Fonts sous Windows, ou Finder/Livre des polices/Bibliothèque/Ordinateur sous IOS pour avoir la liste des polices natives à votre machine.
Ces polices de caractères étant pré-installées sur le système d’exploitation de l’utilisateur, il n’y aura pas besoin de requête auprès du serveur pour les afficher si elles sont utilisées sur un site web. Ces polices s’afficheront donc correctement et quasi instantanément pour l’internaute : on parle alors de Web Safe Fonts. Ce sont ces polices qui sont à privilégier en éco-conception web.
Attention cependant : selon les systèmes d’exploitation, les polices natives peuvent être différentes. Pour vous assurer que le design de votre site s’affiche correctement pour tous les utilisateurs, il faudra prévoir une collection de polices, c’est-à-dire donner une liste de polices utilisables par priorité décroissante pour afficher le texte.
Par exemple :
Ici, le navigateur va donc d’abord essayer d’afficher Helvetica, puis Segoe UI, etc… pour se rabattre finalement sur une police sans serif, générique, si aucune autre option n’est valide.
Outil utile, le site cssfontstack propose une liste des Web Safe Fonts, ainsi que leur pourcentage d’utilisation selon les systèmes d’exploitation.
Les avantages des polices natives sur les polices customisées
Intégrer une police de caractères customisée n’est pas difficile aujourd’hui : pour trouver la police parfaite, originale et design, on peut utiliser des bibliothèques de fontes, comme Font Squirrel, ou des services de fontes en ligne, comme Google Fonts. Cette pratique n’est cependant pas sans défauts, en particulier en matière d’éco-conception web.
Dans le cas d’une bibliothèque de fontes, il est nécessaire de télécharger la police, la ranger avec vos fichiers HTML et CSS, puis de l’intégrer à ces derniers avec la règle @font-face. Les services en ligne permettent d’utiliser une fonte en copiant simplement une ligne de code en Javascript puis en le collant dans l’en-tête de votre fichier HTML : la fonte est déjà hébergée sur un serveur.
Pour s’afficher, une page web utilisant des polices customisées va devoir générer des requêtes html : puisqu’elle est customisée, l’utilisateur ne possède probablement pas la famille de police sur son système d’exploitation et la requête sera donc faite auprès du serveur où est hébergé le site.
Or, un des principes, si ce n’est LE principe, de l’éco-conception web, est de limiter au maximum les requêtes auprès du serveur. Avec moins de requêtes, un site web est plus optimisé et plus rapide à charger : il consomme donc moins d’énergie. Ainsi, utiliser une famille de police native pour le design de son site web est bien plus respectueux de l’environnement.
Les polices de caractères customisées présentent également certains désavantages :
- Elles ne sont pas toutes gratuites : s’il existe un large choix de polices customisées gratuites sur internet, ce n’est pas le cas de toutes ! Certaines fontes sont payantes, d’autres gratuites mais non destinées à un usage commercial, certaines demandent de créditer l’auteur pour pouvoir les utiliser, etc… Il faut donc bien s’assurer de ne pas voler la police !
- Elles ne sont pas toujours adaptées à la langue utilisée : certaines polices de caractères sont conçues pour une langue en particulier, et ne peuvent pas afficher des caractères spécifiques à d’autres langues. Rien qu’avec ses accents é à è ù ou le ç, la langue française limite le choix de fonte !
- Elles peuvent avoir des problèmes d’affichage : tout utilisateur ne possède pas la meilleure connexion, ni la dernière version de tous les navigateurs, ce qui peut altérer l’affichage et le temps de chargement d’une police customisée. Il faut également penser à l’affichage sur téléphone : la police customisée est-elle aussi lisible sur ordinateur que sur mobile ? S’adapte-t-elle bien au design responsive du site ? Va-t-elle charger aussi vite sur la connexion limitée d’un téléphone ?
- Elles ajoutent du poids à votre site : pour s’afficher sur l’écran de l’utilisateur, une police de caractères customisée doit être hébergée sur un serveur. Les fontes ne pèsent aujourd’hui que quelques octets, mais c’est toujours ça de gagné quand on cherche à alléger son site !
Tous ces paramètres vont avoir un impact direct sur le design, l’Expérience Utilisateur et le SEO d’un site : des textes qui mettent du temps à charger, qui sont illisibles sur téléphone, dont certains caractères ne s’affichent pas… c’est la recette d’un taux de rebond élevé.
Police de caractères, éco-conception et impression
Le choix d’une police de caractères a aussi un impact écologique dans le domaine de l’impression ! En revanche, ici il s’agit davantage de la consommation d’encre de la police que de sa provenance : native ou customisée, l’utilisateur qui consulte un document imprimé ne va pas avoir à télécharger quoi que ce soit pour lire le texte.
Pour l’impression, il vaut donc mieux privilégier :
- Une police de caractères lisible à petite taille : par exemple, la police Garamond est plus petite que la plupart des autres fontes pour une même taille de texte. Courier New, une police conçue à l’origine pour les machines à écrire, reste très lisible une fois sa taille réduite.
- Une police fine, pour éviter de mettre des blocs entiers en gras : Century Gothic et Courier New sont deux excellents choix sur ce critère.
- Une police spécialement pensée pour être eco-friendly : ces polices customisées possèdent un design spécialement conçu pour utiliser le moins d’encre possible. Grossies à l’écran, on peut voir qu’elles sont criblées de trous ou de lignes blanches, qui seront comblés à l’impression par l’absorption de l’encre sur le papier. Un exemple serait la police Ryman Eco, créée en 2014 par Ryman Stationary.
- La concision dans ses textes ! Un papier trop chargé en encre se recycle plus difficilement : si on réduit le volume de texte global, en plus de choisir avec soin sa police, on consomme moins de papier !
Choisir une police native, plus “basique”, est un réel avantage pour le design de votre site, en particulier sur mobile. Cela permet d’avoir un design général des textes certes plus simple, mais sans temps de chargement et sans bugs d’affichage ruinant l’expérience utilisateur. Entre les différentes familles de polices de caractères, la taille, l’empattement, la graisse et l’espacement entre les lettres et les lignes, il est possible de réaliser un design original et percutant avec une police native.
L’éco-conception web ne se limite pas à simplement changer de police d’écriture. Si vous aussi vous voulez que votre site soit plus respectueux de l’environnement, nous pouvons vous assister dans cette démarche.