Typographie du site Advertising Age

Jeremiah Shoaf, responsable de l'indispensable site Typewolf se lance dans une nouvelle série d'articles où il décortique un site du point de vue de sa typographie. Clair, pédagogique et passionnant.

Par

Je suis un grand fan de user onboarding teardowns de Samuel Hulick ( NdT : Samuel décortique la façon dont les sites webs les plus connus “embarquent” leurs utilisateurs) alors j’ai eu envie de proposer quelque chose de similaire sur Typewolf, des articles dans lesquels je décortiquerais la typographie d’un site web connu. Je passerais le design en revue d’un point de vue typographique et je discuterais ce qui fait que la typo fonctionne et ce qui aurait éventuellement pu être mieux fait.

Dans cette première édition, je vais entrer dans les détails de la typographie du site Advertising Age. Mais en préambule, un avertissement.

Avertissement : Le site dont l’analyse va suivre a été créé par des designers bien plus talentueux que moi. Les commentaires ne reflètent que mon opinion sur la typographie et la façon dont, parfois, j’aurais pu avoir une approche différente. En typographie, les règles sont faites pour être brisées.

“Il faut toujours casser les règles, en beauté, de manière délibérée et le bien faire.”
Robert Bringhurst, The Elements of Typographic Style

image
La page d’accueil d’Advertising Age.

Advertising Age est un magazine consacré aux dernières nouveautés de l’industrie de la publicité. Le premier numéro a été publié en 1930 et il continue d’être populaire en version imprimée comme sur le web. Le site a été conçu par AREA 17, une de mes agences interactives préférées (New York & Paris).


image
Les polices de caractères utilisées dans le design.

Le site utilise les polices de caractères Tiempos Headline, Tiempos Text, Gotham et Helvetica ( NdT : et Helvetica Neue). À mon avis, deux sans-serif (polices sans empattement) ne sont sans doute pas nécessaires. Pourquoi utiliser Helvetica si vous chargez déjà la police Gotham ? Choisir une sans-serif unique ajouterait sans doute plus de cohérence au design.

Il est possible que la petite quantité de Gotham qui apparaît dans le design ait été simplement oubliée. Le site n’utilise pas le service Cloud.typography et Hoefler & Co et la police est hébergée.

Tiempos Headline et Tiempos Text sont les deux polices les plus visibles, utilisées respectivement pour les titres et le corps de texte. La famille Tiempos a été conçue par Kris Sowersby de la fonderie néo-zélandaise Klim Type. De manière assez étonnante, Tiempos est inspirée de Times New Roman. J’aime bien cette citation de Sowersby :

“De nos jours, Times New Roman est très décriée. Elle est rejetée de par son ubiquité — ayant été la police par défaut d’une époque noyée dans les profondeurs de la banalité bureaucratique. C’est bien dommage, car s’agissant des deux principes de la typographie journalistique — économie et lisibilité — elle est toujours admirablement performante. Comme Tiempos se devait de répondre aux mêmes principes, nous nous sommes naturellement tournés vers le classique de Morison, un ancêtre des polices de caractères des journaux modernes.”
— Kris Sowerby, designer de Tiempos


image
Tiempos Headline (agrandie pour montrer les détails) présente de forts contrastes de traits et un espacement serré.

Tiempos Headline est une version display de Tiempos, créée spécifiquement pour l’affichage des titres. Elle présente des contrastes forts entre les traits fins et les traits épais et l’espacement entre les caractères est relativement serré. Si l’on utilisait cette police à une petite taille, ces caractéristiques poseraient des problèmes de lisibilité, mais en grand format elles ajoutent raffinement et élégance.


image
Tiempos Text (agrandie pour montrer les détails) offre des traits moins contrastés et un espacement moins serré.

Remarquez comme les traits de Tiempos Text sont plus uniformes en comparaison de Tiempos Headline, et l’espacement moins serré. C’est un peu de l’élégance qui disparaît, mais au profit de la lisibilité au format du corps de texte. Les designers de ce site ont fait un excellent travail dans leur utilisation cohérente de Tiempos Headline et Tiempos Text. On rencontre plus souvent qu’on ne le croit des sites qui utilisent les polices display pour le corps de texte — offrant en général une mauvaise expérience de lecture.


image
La longueur de ligne d’environ 55 caractères et l’interlignage de 1.47 permettent une lecture agréable.

Voici ce à quoi ressemble Tiempos Text dans le corps de texte. Remarquez la longueur de ligne confortable (également appelée mesure) d’environ 55 caractères. Entre 45 et 75 caractères, la longueur de ligne est considérée idéale pour la lecture et le texte de ce site se situe dans ces limites. Il est malheureusement assez courant de trouver sur le web des sites qui excèdent largement ces limites (en particulier lorsqu’ils sont basés sur une mise en page fluide), mais ici le designer a ajouté une largeur maximale de façon à ce que le texte soit facile à lire même sur un écran large.

L’interlignage (la hauteur de ligne) du corps de texte est agréable, à 1.47. Une longueur de ligne plus réduite requiert moins de hauteur de ligne. Pour je ne sais quelle raison, les designers web ont tendance parfois à exagérer avec les réglages de CSS line-height. Le réglage par défaut est peut-être trop serré, mais ça ne veut pas dire qu’on peut faire n’importe quoi. On considère généralement qu’une hauteur de ligne de 1.5 est idéale.


image
Les tirets courts redoublés devraient être remplacés par des tirets cadratins ou demi-cadratins.

Il est étrange que ce site utilise partout des tirets doubles à la place des demi-cadratins (en dashes). Un tiret cadratin (em dash) serait également approprié, selon le style éditorial. Je préfère les tirets demi-cadratins et je suis d’accord avec Robert Bringhurst lorsqu’il dit :

“Le tiret cadratin est la norme au 19e siècle, encore prescrit dans de nombreux livres, mais il est trop long pour être utilisé avec les meilleures polices de texte. Comme l’espace démesuré entre les phrases, il appartient à l’esthétique corsetée et rembourrée de la typographie victorienne.”
–Robert Bringhurst, The Elements of Typographic Style

Pour créer les tirets qui conviennent, il faut utiliser les entités HTML suivantes :

Tiret demi-cadratin : –
Tiret cadratin : —

Les CMS peuvent être réglés de façon à convertir automatiquement les tirets doubles en demi-caratins, il est donc possible que ce comportement étrange soit dû à un CMS récalcitrant.

image
Un titre revu et corrigé pour montrer la différence avec des guillemets élégants et un tiret demi-cadratin.

Des guillemets droits sont utilisés dans tout le site à la place des vrais guillemets (“smart quotes”). Dans le corps de texte, ils ne sont pas trop gênants mais dans les titres il est difficile de ne pas les voir. À certains endroits, ils sont utilisés à bon escient, cela semble indiquer que les designers savaient ce qu’ils faisaient et que le problème est plutôt lié au CMS.

En général, si vos guillemets sont droits, ils sont stupides (dumb). Sils sont en forme de boucle, ils sont malins (smart). La “boucle” variera selon les polices de caractères, mais les vrais guillemets ne pointent jamais tout droit vers le haut ou vers le bas.
NdT : Les guillemets « à la française » sont différents des guillemets américains, toutefois en français non plus il ne faudrait pas utiliser les guillemets droits qui sont un résidu de l’époque où pour gagner de la place sur le clavier de la machine à écrire on a inventé une touche unique servant pour les guillemets ouvrant et fermant.
NdT 2 : La Cascade a adopté les guillemets à l’américaine, en théorie ce n’est pas approprié mais... je les aime comme ça.

Pour créer des guillemets et apostrophes comme il faut, on utilise les entités HTML suivantes :

Guillemet simple ouvrant : ‘ (“left single quote”)
Guillemet simple fermant et apostrophe : ’
Guillemet double ouvrant : “ (“left double quote”)
Guillemet double fermant : ”

Guillemet français ouvrant : «
Guillemet français fermant : »

Pour plus de détails sur la bonne utilisation des guillemets, vous pouvez consulter Butterick’s Practical Typography. Sur Typewolf, j’ai également pas mal de ressources pour l’apprentissage de la typographie si vous voulez vous plonger là-dedans.


image
Est-ce que le titre en majuscules ressort mieux avec un espacement des lettres plus large ? C’est assez subjectif.

Une règle de base de la typographie est que l’on doit toujours ajouter un peu d’espacement entre les lettres lorsqu’elles sont toutes en capitales. Plus la taille de police se réduit, plus l’espacement doit être proportionnellement important, et inversement. Je trouve que cette règle est assez subjective et selon le look que vous recherchez vous voudrez parfois vraiment avoir un texte resserré. Dans cet exemple, je pense qu’ajouter un peu d’espacement entre les lettres améliore la lisbilité mais ça reste une question de goût personnel.


Ce qu’on doit retenir de notre décorticage

  • La combinaison d’une police d’affichage (display) et de sa contrepartie pour le corps de texte, lorsqu’elle existe, est une bonne façon d’assurer à la fois la bonne lisibilité de votre texte et l’élégance de vos titres, mais rappelez-vous de ne jamais utiliser la police d’affichage pour votre corps de texte.
  • Ne mélangez pas deux polices sans serif (sans empattement) si vous n’avez pas une excellente raison de le faire.
  • Une longueur de ligne de 45 à 75 caractères est l’idéal pour une bonne lisibilité — ne laissez pas la ligne de texte s’allonger indéfiniment pour remplir la largeur de la fenêtre.
  • Visez un interlignage de 1.5 — diminuez la hauteur de ligne si la ligne est plus courte et inversement.
  • Utilisez correctement les tirets, apostrophes et guillemets — réglez votre CMS pour qu’il le fasse automatiquement si c’est possible.
  • Ajouter un peu d’espacement à un texte tout en majuscules améliore sa lisibilité.

Pour les autres décorticages, restez branchés sur la Cascade !
Jeremiah Shoaf écrira régulièrement des articles d’analyse typographique de sites web, vous pouvez vous inscrire à sa newsletter sur son site Typewolf ou bien suivre l’actualité de la Cascade. Et si vous avez besoin d’inspiration typographique, Typewolf est une source inaltérable !


Intéressé par la typographie ? Sur la Cascade, retrouvez des articles et ressources.

Du même auteur sur La Cascade : Les free fonts aujourd’hui, un tour d’horizon des meilleures polices de caractères gratuites.


Ressources complémentaires en anglais

Ressources pour apprendre la typographie, par Jeremiah Shoaf

Ressources complémentaires en français

Le cadratin dans tous ses états, dans le blog des correcteurs du Monde
Tiret, article de Wikipedia
Guillemets, article de Wikipedia
Aide : caractères spéciaux, Wikipedia


original paru le dans Le blog de Typewolf.

Sur l’auteur : est designer freelance dans le Colorado. Il s’occupe de Typewolf et crée des thèmes CMS pour son autre projet Types & Grids. Il tient à jour une liste des polices gratuites de qualité. Vous pouvez le suivre sur Twitter.

Traduit avec l’aimable permission de Typewolf et de l’auteur.
Copyright Typewolf © 2015.