De nouvelles fontes sur Gastero Prod.
Navigant régulièrement avec une connexion de piètre qualité, j’en ai un peu marre de voir de nombreux sites me présenter juste des éléments d’interface en attendant le chargement des fichiers de fontes utilisées par @font-face. Du coup, vu que ce site n’a pas spécialement d’enjeu graphique particulier, j’ai décidé de me passer des deux fontes que j’imposais depuis la refonte récente. L’occasion de me replonger dans l’enfer des font stacks web safe…
Pourquoi changer ?
Avant de parler des fontes retenues voici une illustration de ce problème que posent les fontes chargées via @font-face aux utilisateurs à faible bande passante.
Le site de Smashing Magazine utilise deux fontes différentes pour la titraille et le corps de texte, chacune étant définie avec une instruction @font-face et nécessitant donc le téléchargement des ressources correspondantes. Ces fontes font partie des éléments importants du récent redesign du site, et participent à sa qualité visuelle, ce serait dommage de s’en priver :
Mais si on va sur le site avec une connexion pas géniale, on obtient très rapidement certains éléments graphiques, et beaucoup moins vite les fichiers des fontes, d’où un affichage assez étonnant :
On constate assez simplement d’où vient le problème :
Nous sommes donc en attente des fichiers des deux fontes, et pendant ce temps là le navigateur ne peut pas afficher le texte.
Quand @font-face a commencé à être largement implémenté dans les navigateurs, ils ne se comportaient pas de la même façon. Firefox par exemple présentait d’abord les textes avec des fontes web safe présentes sur le poste client, avant de redessiner les textes avec les bonnes fontes une fois celles-ci téléchargées. Cela donnait un effet très pénible bien décrit dans le billet de référence sur le sujet, Fighting the @font-face FOUT par Paul Irish. Aujourd’hui, le comportement des navigateurs est plus homogène, ils attendent tous quelques secondes sans rien afficher avant de se rabattre sur le fallback si nécessaire. Il faut donc que les fichiers de fontes soient téléchargés le plus vite possible par le navigateur pour réduire la durée de non affichage.
Dans le cas de Smashing Magazine illustré ici et de tant d’autres sites, une difficulté supplémentaire s’ajoute. Le service Fontdeck que l’on voit dans la base de tâche ci-dessus fait partie des leaders des solutions SaaS de fourniture de fontes, avec notamment Typekit maintenant dans le giron d’Adobe, et Google Web Fonts en alternative gratuite.
Quand un site utilise ce type de service, le navigateur demande les fichiers de fonte à un autre serveur que celui du site, ce qui ajoute un petit délai supplémentaire pour la requête DNS. Les fichiers de fontes arrivent donc plus lentement, pénalisant un peu plus l’Internaute.
Que de points qui peuvent paraître bien négatifs, mais il faut avouer que la richesse offerte par la multitude de fontes maintenant disponibles pour le web permet de développer une grande créativité qui fait beaucoup de bien au Web.
Sauf que mon pauvre blog n’a rien d’un site professionnel dont le design1 nécessite l’usage de telles fontes. Il doit bien y avoir dans les fontes web safe, c’est à dire ne nécessitant pas de chargement supplémentaire avec @font-face, de quoi proposer quelque chose de suffisamment « joli » — à mon goût en tout cas — et original.
En quête donc…
Mes choix de fontes
Ayant lu et entendu depuis quelque temps que les fontes à empattements ne posent plus de problèmes avec les écrans modernes, voire même améliorent la lisibilité des corps de textes, j’ai décidé de me jeter à l’eau.
Histoire de faire un peu original et éviter les classiques, j’ai cherché un peu ce qui pourrait être disponible suffisamment largement, mais essayer de trouver un ensemble cohérent dans une liste telle que ces most common fonts on all systems to 5 April 2012 n’est clairement pas à ma portée de béotien de la typo. Heureusement, un peu aidé par une recherche sur Google, je suis retombé sur ce billet Revised Font Stack de Amrinder Sandhu qui avait pas mal circulé il y a 3 ans, et je suis immédiatement tombé sous le charme de la font stack issue de Sushi & Robots, battis sur une base de fonte « Hoefler Text »
-
- Un aperçu de la fonte Hoefler Text
Côté titraille, je voulais du coup une fonte linéale pour contraster avec la sérif du corps de texte.
C’est en parcourant la liste des fontes ajoutées à iOS 6 que j’ai découvert la famille de fontes Avenir conçue par Adrian Frutiger pour Linotype, et déclinée en 2003 en Avenir Next. Cette fonte est arrivée ensuite sur Mac OS X avec Moutain Lion puis sur iOS avec la version 6.0.
-
- Un aperçu de la fonte Avenir
Un extrait de la page Wikipedia présentant Adrian Frutiger présente ainsi la famille Avenir (l’emphase est de moi) :
C’est en 1988 qu’il présente le caractère Avenir (dont le nom est un clin d’œil au Futura), le juste milieu entre une Linéale indéniablement géométrique et une Grotesque humaniste, dont l’harmonie des formes génère l’équilibre optique. Avenir s’impose naturellement comme une alternative de qualité au Futura et à l’Avant-Garde, il est moins radical et abrupt, plus chaleureux et avec plus de personnalité. Son utilisation en capitales, que l’on réservera aux titrages, donne beaucoup de stabilité à la composition et également de la classe, grâce à la rigueur de la structure des lettres ; il évoque une certaine prestance, la stabilité et le professionnalisme, la beauté et la féminité. Ses bas de casse possèdent les avantages des Linéales géométriques classiques sans leurs inconvénients : plus faciles à lire, ils peuvent s’utiliser pour des articles de presse ou des rapports relativement courts.
Comment hésiter plus longtemps ?
Les nouvelles font stacks
Du coup, avec ces deux fontes de base qui sont essentiellement présentes sur Mac, le choix des font stacks complètes n’a pas été très simple, mais voici la conclusion :
Pour la titraille :
Pour le corps de texte :
Voilà ce que ça donne sur Mac :
Je suis preneur de retours d’utilisateurs de Windows et Linux, en espérant que la théorie des fallbacks s’applique pas trop mal…
Et maintenant ?
Je l’avoue bien volontiers, je suis complètement ignare en termes de typographie. J’ai par exemple beaucoup appris en terminologie avec la conférence « La typographie comme outil de design » de David Rault à Paris Web en 2010.
Il est donc probable que la démarche que j’ai suivie, ainsi que le résultat, ont de quoi faire hurler d’horreur les spécialistes du domaine. Mais tant pis pour eux, je suis plutôt satisfait du résultat, jusqu’à ma prochaine remise en question…
MAJ du 10 juillet 2013 :
Voilà ce que ça donne sur Windows 7 avec Chrome :
-
- Gastero Prod. sur Windows 7 avec Chrome
Merci @mariejulien :
@nhoizey Chez moi ça donne ça : http://t.co/qkiSCz4TcW (win7 + chrome)
— Marie & Julien (@mariejulien) July 10, 2013
Notes
1Quel design ?
Vos commentaires
1. Le 11 février 2013 à 09:58, par STPo
En réponse à : De nouvelles fontes sur Gastero Prod.
Moi cette histoire de FOUT je trouve ça hyper pourri (pourquoi avoir décrété que c’était mieux de ne RIEN avoir avant d’avoir chargé la fonte ??), j’aimerais faire l’inverse de Paul Irish (afficher tout de suite le contenu texte et appliquer seulement quand elle est chargée la @font-face) parce que c’est insupportable d’avoir une page toute vide. Mais j’aime pas les solutions pleines de JS à la Web Font Loader...
2. Le 11 février 2013 à 09:58, par Stéphane Deschamps
En réponse à : De nouvelles fontes sur Gastero Prod.
Donc tu t’appuies entièrement sur le font-stack de l’utilisateur ?
J’avoue comme toi est agacé par le FOUT (j’apprends le néologisme ;)) mais je me dis qu’un moyen de limiter les dégâts est d’avoir la police stockée sur le site, pour au moins ne plus dépendre de services tiers (une de mes marottes), et de n’avoir par exemple qu’une webfont pour les titres, le reste du contenu s’appuyant sur un font-stack plus classique.
3. Le 11 février 2013 à 09:59, par Stéphane Deschamps
En réponse à : De nouvelles fontes sur Gastero Prod.
s/est/être/
Nos lecteurs ont rectifié d’eux-mêmes. :)
4. Le 11 février 2013 à 10:24, par Luc Poupard
En réponse à : De nouvelles fontes sur Gastero Prod.
Je crois que Smashing Mag est le pire site que j’ai eu la chance de croiser. J’ai droit à l’effet de page blanche pendant court temps même sans avoir un faible débit (13Mbits descendant et l’effet est visible...)
Personnellement pour les fonts je privilégie le stockage sur son propre serveur. Si ça n’enlève pas le fait que les fichiers mettront du temps à charger, je rejoins totalement Stéphane sur l’indépendance vis-à-vis de tiers.
Pour moi les gains potentiels en performance ne vaut pas la peine face aux risques potentiel que le service tiers tombe ou ne connaisse ne serait-ce que des ralentissements (ce qui annule voire empire le problème initial de performance...)
Je ne m’interdis donc pas d’utiliser @font-face, mais je n’utilise jamais de services tiers. Et d’ordre général j’évite dans tous les cas d’utiliser des services tiers :o)
5. Le 11 février 2013 à 10:33, par Luc Poupard
En réponse à : De nouvelles fontes sur Gastero Prod.
Décidément, heureusement qu’on se relit...
"les gains potentiels en performance ne valent pas la peine face aux risques potentiels"
Sinon, je suis sur Win7 et les fonts me conviennent :) (Aperçu du site sur Win7 / Firefox)
6. Le 11 février 2013 à 14:41, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@STPo : Avoir d’abord un rendu en fonte de fallback avant d’avoir la fonte chargée, ça donne des trucs tout aussi pénibles en fait, avec un reflow pas du tout agréable à l’œil. Et sinon, les trucs en JS ne permettent pas de charger la fonte plus vite, de toute façon…
@Stéphane : C’est vrai que j’aurais pu adopter une démarche intermédiaire en ne virant que la fonte spécifique du corps de texte et en gardant celle de la titraille, mais tant qu’à faire, je suis allé plus loin… ;-)
@Stéphane, @Luc : Avoir le(s) fichier(s) de fonte sur son propre serveur, c’est incontournable pour la perf, c’est clair, c’est ce que j’avais.
@Luc : Merci pour le screenshot ! Par contre, je vois que tu n’as pas de typo « condensed » sur la titraille, c’est pas cool. Tu saurais me dire quelle fonte est utilisée ?
7. Le 11 février 2013 à 14:57, par Luc Poupard
En réponse à : De nouvelles fontes sur Gastero Prod.
C’est Calibri qui est appliquée sur les titres :-o D’après ce topic (en anglais), ça vient de Firefox qui ne prend pas l’Arial Narrow.
J’ai regardé sous Chrome et je confirme ! C’est l’Arial Narrow qui est utilisée.
C’est magnifique :o)
8. Le 11 février 2013 à 15:46, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@Luc : C’est quand même dommage pour Firefox, ce comportement « normal » mais différent de tous les autres : https://bugzilla.mozilla.org/show_bug.cgi?id=644385
J’ai ajouté ceci selon leur recommandation :
9. Le 11 février 2013 à 23:02, par Stéphane Deschamps
En réponse à : De nouvelles fontes sur Gastero Prod.
C’est curieux votre discussion, je ne la regarde que de loin (pardon) mais je viens de tester ça :
body { font-family: sans-serif; }.narrow { font-family:'Arial Narrow'; }
.normal { font-family:'Arial Narrow',Arial; }
Et la
class="normal"affiche autant l’Arial Narrow que laclass="narrow"avec Firefox 18 / Ubuntu.10. Le 11 février 2013 à 23:04, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@Stéphane : le problème de Firefox avec Arial Narrow ne se pose à priori que sur Windows, si j’ai bien compris ce qui est écrit dans ce modèle de simplicité et lisibilité qu’est Bugzilla… oups, j’ai trollé…
11. Le 12 février 2013 à 13:47, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
J’ai ajouté un bout de screenshot montrant le rendu sur mon Mac, pour référence…
12. Le 13 février 2013 à 00:21, par Emmanuel
En réponse à : De nouvelles fontes sur Gastero Prod.
Je lis cet (excellent) article, confortablement installé, avec Firefox sur mon netbook pédalant avec Win 7. Les titres sont en "DejaVu Sans Condensed" (il faut croire que j’ai dû installer la police autrefois) et le corps de texte est en Constancia. Le rendu de la DejaVu est quasi sans lissage ce qui lui donne un mauvais aspect.
Au bureau, sur ma machine j’ai Win XP et de nombreuses polices installées. De mémoire je vois les titres (bien lissés cette fois-ci) en "Open Sans" ou "DejaVu Sans Condensed" (?). C’était pour la partie technique :-)
Maintenant j’avoue que je ne serais pas allé jusqu’à définir une font-stack aussi fouillée, en raison des choix relativement "typés" des polices qui engendrent potentiellement de nombreux couples titre-texte à vérifier. J’ai tendance à donner 2 polices et basculer en serif / sans-serif et basta, et tant mieux si l’utilisateur a modifié soigneusement ses polices par défaut d’ailleurs :-)
Une seconde remarque plus esthétique cette fois, est que je trouve que le couple condensed (en titre) et Constancia (qui chasse plus fortement et/ou qui a un œil plus grand que la moyenne) en texte courant (du moins sur le rendu que j’ai) crée une "tension" trop importante. Cette tension est moins visible dans ta copie d’écran. L’une serrée et verticale, l’autre plus ramassée et horizontale. Le couple Calibri-Constancia fonctionne par exemple mieux je trouve.
Enfin, je me demande aussi à quoi ressemble le lecteur de ton blog. Je présume qu’il a de fortes chances de bosser dans le web et a peut-être plus de polices installés que la moyenne. Difficile de présumer, mais je me dis que cela peut possiblement agir sur la définition de font-stack.
13. Le 13 février 2013 à 00:37, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@Emmanuel : merci pour ce long commentaire. Côté technique, j’avoue avoir beaucoup tâtonné, et n’être toujours pas certain de mes choix. Si tu peux me fournir des screenshots de ce que tu voies, ça m’intéresse. Côté esthétique, je n’ai pas du tout de culture typographique et je trouve mes choix sympathiques, je ne note pas de « tension » particulière. Mais tu n’es pas le premier à me le dire :
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>14. Le 13 février 2013 à 00:38, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@Emmanuel : merci pour ce long commentaire.
Côté technique, j’avoue avoir beaucoup tâtonné, et n’être toujours pas certain de mes choix. Si tu peux me fournir des screenshots de ce que tu voies, ça m’intéresse.
Côté esthétique, je n’ai pas du tout de culture typographique et je trouve mes choix sympathiques, je ne note pas de « tension » particulière. Mais tu n’es pas le premier à me le dire :
https://twitter.com/fvsch/status/299614357246074881
15. Le 15 février 2013 à 19:44, par Mat
En réponse à : De nouvelles fontes sur Gastero Prod.
Une solution rigolote pour rétablir l’ancien effet "FOUT" serait d’avoir la font-face dans sa CSS, de l’appliquer sur un élément planqué, de vérifier sa taille pour savoir quand la police est chargée, et de l’appliquer sur le reste du document à ce moment la et pas avant.
(Dommage qu’il n’y ait pas d’événement DOM envoyé quand une police est chargée à la manière de l’événement transitionEnd qui est balancé quand une transition CSS se finit, ça permettrait d’implémenter cette idée un peu plus proprement)
16. Le 17 avril 2013 à 23:26, par tetue
En réponse à : De nouvelles fontes sur Gastero Prod.
Sympa cette refonte de ton blog, ça m’avait échappé ! De mon côté, sur mon Mac, j’ai bien :
Comme dit Emmanuel, j’aurais allégé les font stack : .
Autant que possible, j’évite aussi de charger des polices exotiques via
@font-faceà cause du FOUT et de leur poids. Mais j’expérimente quand même une font stack avec@font-facesur mon blog, mais bizarrement, puisqu’en 4e alternative (cf. : I love Century Gothic), en me demandant soudain si ça ne merdoie pas trop…17. Le 18 avril 2013 à 10:55, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@tetue tu trouves que c’est trop petit même en 16px ?
Quel est l’intérêt d’ « alléger les font stacks » si elles permettent de trouver des alternatives intéressantes pour tout le monde ?
Je viens de découvrir ton billet sur Century Gothic, et j’y ai du coup répondu… ;-)
18. Le 18 avril 2013 à 15:58, par tetue
En réponse à : De nouvelles fontes sur Gastero Prod.
Oui, ta Hoefler Text 16px m’apparaît sensiblement plus petite que, par exemple, la Lucida de mon blog qui n’est qu’à 14px ; c’est la différence native de taille des caractères qui joue ;)
C’est pas si facile de construire une bonne font stack, de trouver une alternative pour tous les cas. Il me semble suffisant de décider de deux polices, une idéale et son alternative, qui couvriront la majorité des cas (pour Mac, Windows et Linux), et de laisser le « par défaut » de l’utilisateur prendre le relais.
19. Le 18 avril 2013 à 16:13, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@tetue c’est vrai que même avec mes 18px de base ce n’est pas si grand qu’ailleurs… ;-)
Pour moi les alternatives de la font-stack doivent me permettre de montrer aux lecteurs la fonte que j’ai choisie, donc en avoir pour un maximum d’environnements me semble préférable.
Et qu’il y ait 2 ou 10 familles dans la font-stack n’a aucun impact de perf puisque le navigateur s’arrête sur la première qu’il connait…
20. Le 6 janvier 2014 à 11:38, par Nico
En réponse à : De nouvelles fontes sur Gastero Prod.
Je suis totalement adepte de stocker les webfonts sur le serveur du site, et de ne pas dépendre d’un service tiers : trop de problèmes, les loaders fournis sont foireux.
Si tu n’es pas à l’aise avec la typo, tu devrais lire Typo et web http://www.nicolas-hoffmann.net/source/1599-Note-de-lecture-Typo-et-Web.html ;)
21. Le 6 janvier 2014 à 12:16, par Nicolas Hoizey
En réponse à : De nouvelles fontes sur Gastero Prod.
@Nico : ah mais je suis tout à fait d’accord, l’auto hébergement de webfonts est clairement nécessaire. Ce billet tentait plutôt de montrer que les webfonts n’étaient peut-être pas nécessaires, du tout. Je commence à douter, il y a tant de belles possibilités…