Étiquettes : accessibilité, expérience utilisateur, lisibilité, ressources

Les services de web fonts sont aujourd’hui des incontournables pour avoir de belles typos sur le web. Mais se suffisent-ils à eux même?

Peut-on vraiment se passer des services de web fonts? Une question que nous avons soulevée la semaine passée à l’occasion du plantage de Typekit. Les avantages du recours au service de web fonts sont assez évidents. Si Google Web Font remporte la palme de la facilité et de l’accessibilité, Typekit se distingue vraiment par une qualité supérieure des fonts proposées dans sa bibliothèque. Côté inconvénients: la dépendance (bien que relative) à un service tiers et certaines lenteurs (relatives aussi) de chargement.

Si les services de web fonts sont aujourd’hui incontournables et il faut bien le dire performants, sont-il pour autant la réponse à toutes les situations typo sur le web?

Polices web safe et fonts stacking: retour aux basiques?

[pullquote]Si les services de web fonts sont aujourd’hui incontournables et il faut bien le dire performants, sont-il pour autant la réponse à toutes les situations typo sur le web?[/pullquote]

Traditionnellement, on reconnaît une liste assez restreinte de familles typographiques qui sont considérées comme « web safe »: c’est-à-dire que l’on peut utiliser sans trop de risque et qui auront un rendu assez similaire sur la majorité des OS et navigateurs récents sans impliquer de chargement de fichier pour visionner la page web. En clair: les polices web safe sont normalement déjà installées sur le système d’exploitation de votre utilisateur.

Que vous ayez recours uniquement à ces polices ou que vous utilisiez des polices embarquées, vous devez toujours spécifier ce qu’on appelle un empilement de fonts ou « fonts stacking » en anglais qui consiste à spécifier un certain nombre de solutions de repli en fonction de la bibliothèque dont dispose votre visiteur sur sa machine.

Avec ce système d’empilement de polices, la majorité de vos utilisateurs verront votre premier choix, quelques autres un compromis raisonnable et une infime minorité une police (tout moche mais lisible) par défaut. Dans tous les cas, c’est vous qui décidez de la hiérarchie.

Une ligne de, ça ressemble à ça:


p {
font-family: "Times New Roman", Times, serif;
}


Et avec une police embarquée:


p {
font-family: 'Roboto', Helvetica, "Helvetica Neue", Arial, sans-serif;
}


Aujourd’hui, les polices web safe seules se révèlent être un système assez peu satisfaisant puisqu’il limite fortement les fonts et que le résultat est assez variable. Mais en empilement après votre choix de font embarquée, elles se révèlent être un bon et indispensable système de back-up. Quoiqu’il arrive, plantage de Typekit y compris, votre utilisateur ne se retrouve pas avec des hiéroglyphes!

Les polices auto-hébergées: jamais mieux servi que par soi-même?

Pour personnaliser votre typo sur le web, une alternative aux services courants de web fonts comme Typekit ou Google Web Fonts, ce sont les polices auto-hébergées sur votre serveur web. Largement sous-estimé, ce système vous permet un plus grand contrôle sur les sous-ensembles de police: vous pouvez supprimer les glyphes inutiles (via des outils en ligne comme FontForge ou FontLab Studio) afin d’alléger le fichier et d’accélérer le temps de téléchargement final de votre page.

Attention que si les supports pour les fichiers au format .ttf et .otf sont très assez bien répandus dans tous les navigateurs modernes… ce n’est pas le cas pour IE (même la dernière version) ni pour certains navigateurs mobiles (y compris les versions héritées d’iOS Safari). Pour augmenter la couverture de prise en charge votre font, vous devrez donc créer des formats supplémentaires .eot, .woff et .svg (une manipulation assez simple via des outils comme celui de Font Squirrel’s).

Oui mais. C’est là que le bât blesse. L’inconvénient avec ce type de conversion de polices bureau pour une utilisation en ligne est double: tout d’abord, vous n’êtes généralement pas autorisé à le faire; et d’autre part, les polices bureau sont presque toujours optimisées pour l’impression et leur rendu n’est pas toujours à la hauteur sur écran.

Une typographie (vraiment) pro sur le web, c’est possible

La bonne nouvelle, c’est que les créateurs de fonts travaillent de plus en plus à une version optimisée pour le web et des licences d’utilisation étendues. Si vous disposez des formats requis, du contrôle de qualité réalisé sur écran et de fichiers prêts à être téléchargés sur le serveur, alors c’est le jackpot: vous n’êtes pas tributaire d’un service tiers et vous pouvez tailler votre fichier au scalpel en élimant ce dont vous n’avez pas besoin. Résultat: des fonts light et super pro dont vous disposez complètement.

Attention toutefois au coût parfois élevé pour des sets de polices complets. Les sites de référence pour acheter des web fonts sont FontShop.com et MyFonts.com. Ma ressource préférée: Typewolf.com. Vous y trouver des guides de correspondance de polices ainsi qu’une sélection pointue de belles réalisations typo sur le web.

En conclusion: tout dépend de votre projet

Bien-sûr, votre choix dépendra toujours de la nature de votre projet… et de votre budget. Mais dans tous les cas, commencez par un empilage de polices web safe en CSS: un geste indispensable pour contrer les indisponibilités et les lenteurs éventuelles des polices hébergées. Ensuite, vérifiez la disponibilité de la police de votre choix sur Google Web Fonts ou mieux (pour une question de qualité) sur Typekit si vous avez un abonnement Adobe.

Enfin, si vous avez le budget, vous pouvez attaquer les choses sérieuses en achetant une police web professionnelle: rendu nickel et possibilités de minifier votre fichier pour une vitesse éclaire et une intégration clean. Vous ne serez pas déçu par votre investissement!

Et vous, c’est quoi votre option typo sur le web?

---