À l’occasion du 450e anniversaire de la mort de Claude Garamont, célèbre graveur de caractères français, le Ministère de la Culture et de la Communication rend hommage à la création typographique en créant un site multimédia dédié au caractère Garamond. Beau travail, réalisé en collaboration avec l’Imprimerie nationale, le site est agréable et richement documenté. Allez vous y rincer l’œil et vous édifier !
Mais si les photos sont remarquables, le rendu textuel n’est pas à la hauteur. Il peut s’avérer désastreux si l’on s’aventure à consulter ce site avec autre chose que le matos haut de gamme des graphistes qui l’ont conçu. Ceux-ci ne sont pas assez préoccupés de partager leur passion typographique avec le plus grand nombre : que du @font-face bien lourd, sans aucune police de substitution !
C’est ainsi que le copain auquel j’ai passé l’URL du site n’a pas compris pourquoi je m’extasiais. Voici ce qu’il voyait [1] : une page plutôt ordinaire, un peu cassée aux entournures et typographiquement moche, pour ne pas dire massacrée… Pourquoi ?
Parce que la technique retenue pour l’affichage des polices, la règle CSS @font-face, n’est pas à toute épreuve, contrairement à ce qu’on aimerait croire. Charger les polices n’en garantit pas le rendu, qui diffère, parfois sensiblement, en fonction du navigateur et du système d’exploitation. Il arrive aussi que la font ne soit pas chargée, cas que ce site néglige de prévoir.
Dommage pour un site dédié à la typographie !
Peut mieux faire !
N’oubliez pas les polices de substitution !
Il aurait au moins fallu prévoir des polices de substitution, c’est le b.a.-ba de la typo sur le Web. Ainsi, pour les jolies exergues, qui sont en Garamond, celui de Stempel pour être précis, il faudrait remplacer cette déclaration CSS trop sûre d’elle :
font-family: 'StempelGaramondW01-Ital';par une font stack complète, par exemple :
font-family: 'StempelGaramondW01-Ital', Garamond, serif;sans quoi on prend le risque d’un rendu de ce type, avec la police par défaut du navigateur, ici sans empattement, ailleurs en affreux Times aliasé :
Remarquons en passant que les jolis guillemets français sont orphelins : il leur manque une espace insécable. Il faudrait compléter ce code généré :
<p>Il est désormais d’usage d’écrire « Garamond » pour désigner une police de caractère, et « Garamont » pour citer le graveur.</p>par des entités HTML, notamment « » :
<p>Il est désormais d´usage d´écrire « Garamond » pour désigner une police de caractère, et « Garamont » pour citer le graveur.</p>Je vous l’accorde, c’est du charabia et il n’est pas humain d’avoir à écrire cela. Mais quand on se préoccupe de typo, on choisit un outil de publication respectueux de la typographie, qui encode correctement. De tels outils existent, depuis des années, comme SPIP et Dotclear qui guillemettent pour vous, en respect des règles typographiques de chaque langue. Amis esthètes, cessez de chouiner que le Web est méchant avec vous et daignez plutôt vous renseigner sur les possibilités, les outils et vous équiper un minimum !
Si les @font-face sont très correctement déclarées, avec le coup du point d’interrogation à la fin de l’adresse de la fonte EOT, pas moins de dix polices sont appelées dans les feuilles de style [2], juste pour afficher le site en Avenir avec un soupçon de Garamond !
Ça reste étonnamment supportable, mais c’est inutilement lourd, puisque ça multiplie le temps de chargement de la page par 2, alors que c’est très facilement optimisable : en évitant de charger des polices en double, en supprimant celles qui ne sont pas utilisées, etc.
Presque chacune des fontes chargées est utilisée au moins une fois dans les feuilles de style, mais sans jamais d’alternative. Elles sont affectées de telle sorte qu’on perd le gras ou l’italique lorsque la font n’est pas chargée, comme on peut le remarquer ci-dessus sur les exergues. Il aurait fallu utiliser les propriétés font-weight et font-style dans les déclarations de @font-face. Par exemple, pour que les exergues ne perdent pas leur italique, il faudrait déclarer quelque chose comme ça :
@font-face {
font-family: 'StempelGaramond;
src: url('fonts/StempelGaramondW01-Roma.eot');
src: url('fonts/StempelGaramondW01-Roma.eot?') format('eot'),
url('fonts/StempelGaramondW01-Roma.woff') format('woff'),
url('fonts/StempelGaramondW01-Roma.svg') format('svg'),
url('fonts/StempelGaramondW01-Roma.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
@font-face {
font-family: 'StempelGaramond;
src: url('fonts/StempelGaramondW01-Ital.eot');
src: url('fonts/StempelGaramondW01-Ital.eot?') format('eot'),
url('fonts/StempelGaramondW01-Ital.woff') format('woff'),
url('fonts/StempelGaramondW01-Ital.svg') format('svg'),
url('fonts/StempelGaramondW01-Ital.ttf') format('truetype');
font-style: italic;
}Accessoirement je me demande si le Ministère de la Culture s’est acquitté des droits de reproduction des polices, dont la belle « Avenir® Next » vendue sur linotype.com, en promo, à 1 188,81 €, pour une utilisation simultanément sur cinq (5) ordinateurs (postes de travail) au maximum
d’après les conditions d’utilisation. Sans oublier la Garamond, combien coûte le droit de charger ces polices chez tous les internautes visitant le site ? Car c’est ce que fait la règle CSS @font-face… Ce faisant, l’État distribue généreusement ces typos d’Adobe Linotype en TTF !
On comprendrait mieux que le site soit truffé d’images, pour les titres et les exergues, pour « montrer » la belle typographie avec respect, tant du rendu, que des droits.
Mais que fait la police ?
Cette police de caractère devenue symbole de l’élégance typographique, le Garamond, né avec la révolution de l’imprimerie, est toujours présent à l’heure de la révolution numérique
dit le communiqué de presse du Ministère de la Culture.
Quel dommage que la typo ne soit pas traitée avec plus de soin sur ce site, qui ne fait pas le minimum, comme par ignorance du support. Ça passerait encore sur n’importe quelle autre publication, mais ici, sur un site dédié à la typographie, c’est trop la honte !
Dans tout cet aréopage d’experts et de passionnés, ne s’en trouve-t-il aucun qui se soit soucié du rendu typographique à l’écran ? Cette négligence m’attriste. Et me fâche. Plus que de l’ignorance, c’est du mépris. Mépris du support, le Web, mais aussi de ses utilisateurs, les internautes, nous. Car, comme le montre cet article, ce n’est pas si compliqué de mieux faire, quand on s’intéresse au métier.
Ça fait des années que des gens s’esquintent à essayer de bien faire les choses sur le Web, à améliorer la typo et le rendu sur ce média encore tout nouveau, mais on continue de nous servir des sites conçus par des espèces de créas qui se la pètent « digital » ou « interactive » alors qu’ils ne savent toujours pas faire le minimum sur le Web !
Vos commentaires
1. Le 21 octobre 2011 à 12:41, par Philippe
En réponse à : Le site Garamond massacre la typo
« Ce faisant, l’état distribue généreusement ces typos d’Adobe Linotype en TTF ! »
Je me suis fait la même réflexion : le Ministère de la Culture met à disposition des œuvres protégées par un Droit Commercial (malgré eux).
Mais que fait l’Hadopi !? ;-)
PS : « État » plutôt non ?
2. Le 21 octobre 2011 à 12:50, par Uxlco
En réponse à : Le site Garamond massacre la typo
Nous on utilise ça comme webservice pour l’utilisation des fonts : http://webfonts.fonts.com/en-us/Project/Choosefonts#keyword%3Davenir%20next%26page%3D1
En gros on paye 100$ par mois pour 2,5 millions de chargement par mois. Et on a l’Avenir Next.
3. Le 21 octobre 2011 à 22:03, par Romain
En réponse à : Le site Garamond massacre la typo
Bonjour,
En tant qu’intervenant sur le projet, votre article a attiré mon attention.
Merci pour l’intérêt que vous portez à ce site, et particulièrement à la partie technique le concernant.
Avant toute chose, je tiens à préciser que vous ne possédez pas le cahier des charges, et que par conséquent certaines contraintes liées au développement de ce site vous échappent. Ces contraintes sont d’autant plus marquées qu’elles concernent un site lié à un ministère (les administrations, tout ça...).
En revanche, vos remarques concernant les polices de substitution et le poids des fichiers de police sont fondées. Elles ont donc été intégrées rapidement afin d’améliorer la qualité et la navigation du site. De même, nous allons améliorer la gestion des entités HTML (notamment en ce qui concerne les espaces insécables).
Pour le reste de vos notes, leur pertinence est discutable.
Il est évident que le Ministère de la Culture paye ses licences pour les typographies. Et vous vous doutez bien qu’à partir du moment où celles-ci sont affichées par votre navigateur, elles sont copiables et réutilisables par la suite.
A titre de comparaison, ce n’est pas parce que l’on bloque l’utilisation du clic-droit de votre souris dans un site, que les images affichées ne peuvent être copiées. Après, tout est question de motivation, et surtout de niveau technique.
Le commentaire d’Uxlco ci-dessus est du même ordre. Pensez-vous réellement qu’il est impossible de récupérer les polices depuis le service de fonts.com ?
Nous devons donc mettre des bâtons dans les roues (comme sur fonts.com), juste parce que certains développeurs ou graphistes n’ont pas d’éthique.
Mais bon, cela fais parti du jeu, et Internet est comme ça.
Ici donc, ceux qui ne respectent pas les licences ne sont pas ceux que l’on croit.
Les polices sont chargées une fois, et une seule, malgré leur utilisation répétées. Votre navigateur est fait comme ça, et c’est bien heureux.
De même, les polices non utilisées, malgré leur déclaration, ne sont pas téléchargées.
Nous aurions aimé utiliser la méthode que vous décrivez pour les déclinaisons de style. Mais je vous invite à relire l’article sur typographisme.net qui indique bien que « cette méthode est encore très buggée dans la plupart des navigateurs et pas du tout supportée par Internet Explorer ». Les joies du métier !
Après c’est sûr, on aurait pu revenir à des techniques d’un autre temps : mettre les textes en image, et puis voilà ! Ou encore un site full-flash avec les typos embarquées…
Plus aucun problème pour le rendu, et bonne chance pour avoir un référencement facile, sans parler des soucis d’accessibilité.
Pour votre ami qui utilise NoScript, je ne peux hélas pas faire grand chose. Libre à lui de voir le web qu’il souhaite, et de se contraindre à ne pas avoir accès à certaines fonctionnalités.
Dans ce cas là, police de substitution ou non, le rendu graphique sera forcément dégradé par rapport au résultat attendu.
Le débat est le même que pour le support de Flash sur certains périphériques mobiles.
Je profite de cette réponse pour vous signaler que les liens hypertextes sortants de votre domaine n’ouvrent pas dans une nouvelle fenêtre (absence de « target _blank »), faisant perde le fil de lecture de vos articles.
Ne prenez pas ça comme une vague tentative d’attaque, ce qui serait vraiment de bas niveau, mais bien plus comme une occasion d’améliorer votre site, comme votre article permet d’améliorer celui célébrant le travail de Claude Garamond.
4. Le 21 octobre 2011 à 22:55, par Thomas Linard
En réponse à : Le site Garamond massacre la typo
Petite remarque : il n’est absolument pas obligé d’utiliser une entité comme é pour écrire « é » en HTML (et ´ pour l’apostrophe ne serait de toute façon pas très heureux), il suffit de déclarer correctement le codage de caractères en en-tête du fichier HTML ou dans les réglages du serveur Web.
5. Le 23 octobre 2011 à 14:09, par Nicolas Friedli
En réponse à : Le site Garamond massacre la typo
Le Ministère de la Culture vient donc de m’offrir légalement toutes les polices utilisées sur son site ? En tant que citoyen suisse, je vous remercie vivement pour ce cadeau...
6. Le 24 octobre 2011 à 11:32, par Uxlco
En réponse à : Le site Garamond maltraite la typo
Au sujet de WebFonts c’est bien entendu possible de récupérer les fonts. Mais à vos risques et périls sachant que l’appel ce fait de manière externe ils auront très vite de se rendre compte qu’une de leurs fonts est appelée sur un site non déclaré.
Et à vous le procès.
7. Le 24 octobre 2011 à 11:43, par Uxlco
En réponse à : Le site Garamond maltraite la typo
Ceci est absolument pas une bonne pratique !
Je vous invite d’ailleurs à vous renseigner à ce sujet :
https://checklists.opquast.com/11/criteria/696/
et le critère d’Accessiweb thématique Consultation* :
8. Le 24 octobre 2011 à 12:44, par Romain
En réponse à : Le site Garamond maltraite la typo
Bonjour à tous.
@Thomas Linard :
Effectivement, et notre priorité porte avant tout sur une bonne utilisation des espaces insécables liés aux guillemets, qui posent des soucis de mise en page.
@Nicolas Friedli :
C’est absurde, le ministère ne met pas à disposition gratuitement les polices d’écriture, et comme il a été dit, il paye bien les licences correspondantes.
En revanche vous, si vous les réutilisez pour votre usage, enfreignez ces licences.
Je pense que vous avez mal interprété mes propos. Laissez-moi les compléter : vous vous doutez bien qu’à partir du moment où celles-ci sont affichées par votre navigateur, il est techniquement possible de les copier et de les réutiliser par la suite. Par contre, d’un point de vue légal, c’est totalement répréhensible à moins de posséder les licences.
Quand vous me dites que le ministère offre légalement ces polices, vous jouez donc avec les mots à votre avantage.
Si je suis votre logique, pourquoi attendre la sortie d’un site sur Garamond pour récupérer ces polices (tant convoitées semble t-il), alors qu’il suffit de trouver n’importe quel site les utilisant (directement ou via un webservice type fonts.com par exemple).
En définitive ce que vous venez de faire ressemble ni plus ni moins à du vol à l’étalage. Rien ne vous empêche de voler une pomme sur un étal du marché, rien à part la loi...
C’est bien vous qui vous mettez dans l’illégalité. Vous en vanter publiquement est-il bien prudent ?
Quand je parle de manque d’éthique, le souci est bien là. Aucune méthode technique, aussi poussée soit-elle, ne pourra vous empêcher de les copier. Libre à vous d’user de vos compétences pour les récupérer. Mais si vous en faites l’usage, la question de l’éthique, non seulement vis à vis des licences, mais aussi envers vos clients, devrait bien plus vous interpeler.
@Uxlco :
Cliquer sur un lien est pourtant bien une action utilisateur. Vous souhaitiez peut-être faire l’analogie avec les pop-up automatiques.
Dans les bonnes pratiques d’Accessiweb, l’ouverture d’une nouvelle fenêtre se doit d’être explicitée (par un pictogramme par exemple).
Je sais que les développeurs de SPIP ne sont pas très attachés aux liens ouvrants de nouvelles fenêtres.
De mon point de vue, cela me semble plus cohérant d’ouvrir une nouvelle fenêtre lorsque le lien quitte le domaine courant. Ceci afin de ne pas perdre le fil de lecture de l’article, tout en complétant celui-ci au passage. Si vous me trouvez des détails sur la question, je suis preneur (dans la documentation WCAG ou normes du même ordre).
Je vous renvoie au lien fourni dans votre commentaire, et vous invite à regarder la cible et le comportement du lien intitulé « VPTCS » dans cette page.
@Romy :
Je remarque à l’instant que vous avez changé le titre de votre article, et vous en remercie. Cela me semble plus raisonnable et constructif que de parler de massacre. Vos remarques continuent de m’intéresser. Je suis à votre écoute si vous notez d’autres choses altérant la qualité du site.
Petit aparté pour notre culture personnelle : un autre intervenant me fait remarquer qu’avec le navigateur natif à Android, les codes HTML « avant/après encodage des entités » s’affichent de la même manière (les entités HTML sont traitées au moins deux fois par ce navigateur visiblement).
9. Le 24 octobre 2011 à 16:11, par Romy Têtue
En réponse à : Le site Garamond maltraite la typo
@Romain : bravo pour la réactivité et merci pour votre réponse précise et éclairée, qui vous distingue de l’amalgame que je me permettais en conclusion. Respect et mes excuses !
Réflexion faite, je pense que j’aurais fait un choix technique différent pour un tel site, évitant la règle CSS
@font-face, pour préférer exceptionnellement des images typo, de façon à m’assurer du rendu en toutes circonstances, identique — car la nécessité de montrer prime ici —, tout en limitant la reproduction. Des images dûment pourvues dealt, sur les titres et exergues : ça reste accessible et ça ne saurait être plus lourd que le chargement des fontes via CSS. Évidemment, mon choix est influencé par SPIP, qui fait cela très bien, générant ces images typographiques à la volée, à partir de textes qui restent éditables via interface utilisateur. Mais comme vous le faites remarquer : je ne connais pas le cahier des charges, ni le commanditaire.Par contre, je ne suis pas (du tout) d’accord avec l’aveu d’impuissance face à l’utilisation du plugin NoScript :
Quant à l’ouverture de nouvelles fenêtres, ne pas les forcer vous rend l’usage des fonctionnalités de votre navigateur. Mais pour ne pas mélanger les sujets je vous invite à poursuivre par là : Liens ouvrant une nouvelle fenêtre.
@Thomas Linard : oui, j’avoue avoir un peu forcé le trait, faisant appel à mes souvenirs de saisie, qui datent de... 1999 !
10. Le 25 octobre 2011 à 11:12, par baroug
En réponse à : Le site Garamond maltraite la typo
Le souci dans l’utilisation d’images typo plutôt que de @font-face, c’est qu’avec les premières, seule l’apparence des caractères est conservée : le kerning, notamment, est irrémédiablement perdu. Or, il joue tout de mêle un rôle important dans l’aspect de la police au sens global. Par ailleurs, la possibilité du zoom est tout de même intéressante pour pouvoir observer en détails les spécificités d’un caractère.
Par ailleurs, pour le temps de chargement, normalement, une fois que le navigateur a chargé les polices utilisées, c’est fini, alors que les images doivent être chargées individuellement sur chaque page du site.
11. Le 27 octobre 2011 à 17:46, par Nicolas Friedli
En réponse à : Le site Garamond maltraite la typo
@Romain
Je trouve étonnant de m’entendre dire que vous jouez donc avec les mots à votre avantage. L’extrait de texte que j’ai cité dans mon premier commentaire peut vraiment être mal compris sans être de mauvaise foi. J’essayais d’attrirer l’attention sur ce passage problématique.
Vos deux phrases suivantes (En définitive ce que vous venez de faire... ; C’est bien vous qui vous mettez dans l’illégalité) sont insensées, puisque je n’ai rien fait, sinon (essayé de) vous signaler le double sens de votre propos.
Mais, visiblement, l’ironie s’arrête aux portes des ministères. Particulièrement triste lorsqu’on se heurte à celles de celui de la Culture. Moi qui trouvais le point d’ironie inutile... Sans rancune.
12. Le 30 octobre 2011 à 18:27, par @Oliv06
En réponse à : Le site Garamond maltraite la typo
Je me régale ! Merci Romy, tu as bien fais de rédiger cet article car son contenu et les commentaires qui le suivent sont très intéressants.
Merci aussi @>Romain de jouer le jeu et de répondre de manière aussi constructive et simple aux « critiques » et d’améliorer votre site par la même occasion.
Un bel échange, et un bel exemple de dialogue constructif et pédagogique.
Répondre à cet article
Suivre les commentaires :
| 