Dossier : La typographie pour le web
Il fut un temps, nous n’avions à notre disposition qu’une poignée de typographies utilisables sur le web. Avec l’émergence de nouvelles technologies tels que les font-face kits ainsi que le HTML5/CSS3, elle est devenue une composante importante à prendre en compte lors de la réalisation d’un site internet.
Véritable effet de mode, on voit de plus en plus de sites dont le webdesign est presque essentiellement basé sur la typographie qui, utilisée de manière intelligente, permet de structurer efficacement le contenu.
Nous essaierons dans ce dossier de toucher du doigt plusieurs domaines relatifs à la typographie :
Dans un premier temps, il s’agira de mettre l’accent sur les bases de la typographie (classification, familles, termes techniques…), afin de mieux interagir avec votre webdesigner et de découvrir de nouvelles polices que vous pourrez utiliser dans un projet futur. Nous verrons ensuite comment profiter des nouvelles technologies pour exploiter à 100% la typographie sur le web et nous terminerons sur les tendances actuelles exemples à l’appui.
Savoir parler à votre designer, quelques notions à savoir :
Quelque soit votre profil, il est bon de connaître les bases du jargon typographique. Etant donné que les termes sont utilisés à la fois par les designers mais aussi pour les intégrateurs, apprendre les bases de la typographie vous permettra de mieux interagir avec votre équipe et d’être plus concret sur vos demandes ou recommandations.
L’empattement :
L’empattement désigne les terminaisons d’un caractère, plus ou moins accentuées et de formes différentes. Ils peuvent ajouter un certain style à votre mise en page. On parle donc de polices avec ou sans empattements, également appelées sérif ou sans-sérif. Chacune apporte un style particulier à votre mise en page et il existe plusieurs familles de polices avec des empattements différents.
Hauteur d’X, montantes et descendantes
Ce terme designe la hauteur d’une lettre courte sans les montantes ni les descendantes. Par exemple « x » est une lettre courte. « p » est une lettre avec une descendante et « d » est une lettre avec une montante.
La hauteur d’X ainsi que la prise en compte des montantes et descendantes s’appelle le corps, c’est la valeur que vous retrouvez dans la majorité des logiciels de traitement de l’image gradué en « points », abrégé « pt ». On utilise par exemple la valeur « 14 pt » pour le texte courant sur internet pour une lisibilité optimale. Le corps est utilisé en CSS via la propriété font-size (ex : p {font-size : 1 em; }).
Les capitales et bas de casse
Les termes « majuscules » et « minuscules » ne sont pas utilisés en typographie, on préfèrera l’utilisation de « capitales » (pour un titre, ou un élément à mettre en avant) et « bas de casse » (en général le texte courant).
Il existe également les petites capitales, qui sont des capitales ayant la même hauteur d’X que les bas de casse. Pour y accéder en CSS on utilise la propriété font-variant (ex : h2 {font-variant : small-caps; }).
Les espacements
On distingue deux grands types d’espacements en typographie :
- l’espacement entre les lettres, appelé « approche de groupe » et défini par la propriété « letter-spacing » en CSS
- l’espacement entre les lignes de base du texte, défini par la propriété « line-height » en CSS
N’hésitez pas à travailler ces deux types d’espacements (que ce soit sur Photoshop ou dans votre CSS) afin de garder un bon rythme de lecture pour le texte courant !
Il faut cependant garder à l’esprit que l’interlignage favorisant le plus la lecture, doit avoir un ratio de 1.48. C’est à dire que vous devez multiplier la taille d’X (font-size) par 1.48 pour obtenir l’interlignage idéal (ex : p {line-height : (font-size x 1,48)em; }).
Série de police (ou family)
Les polices de caractère sont classée en « séries » (et non en famille, bien que l’on dise « family » en anglais).
Elles sont identifiées par leur nom de série (Helvetica, Arial, Frutiger…), leur graisse (normal, bold, extra-bold…), leur chasse (encombrement vertical d’un caractère) et leur nom de graisse. La dénomination se fait dans cet ordre : nom de série, graisse, chasse et nom de graisse (ex : Helvetica 95 bold).
Classification des typographies
Les typographies sont classées par familles différentes (bien que parfois la différence soit très subtile…). Il est donc utile de reconnaître les grandes familles ainsi que les idées qu’elles véhiculent : cela vous permettra d’avoir une meilleure force de proposition face à un client car vous pourrez justifier vos choix de typographie en fonction du sujet. C’est également un excellent moyen de mieux communiquer avec un graphiste, sauf si vous êtes un fan inconditionnel de la Comic Sans MS (là je ne peux plus rien faire pour vous).
Formes avec sérif
Humanes, Garaldes et Transitionnelles
Originaires des premières machines à imprimer, ces polices de type sérif sont élégantes, intemporelles et très lisibles. Elles sont parfaites pour le texte courant avec un faible corps (entre 12px et 14px) mais peuvent être également utilisées avec parcimonie pour vos titres.
Ex : Georgia, Times, Palatino
Didones (« modern » en anglais)
Plus difficiles à utiliser que les polices précédentes car pratiquement inutilisables sur le web à cause de leurs empattement très fins, les Didones ont un aspect rigide, idéal et rigoureux. C’est par exemple la police utilisée pour le titre du magazine Elle.
Ex : Didot, Century, Bodoni
Mécanes
Très en vogue en ce moment sur internet, elles sont utilisées avec un corps très élevé (en général superieur à 24px). Solides et fiables, elles sont parfaites pour un titre mais peu lisibles en texte courant.
Ex : Rockwell, Holtwood, Bevan
Formes sans serif (dites linéales)
Plus récentes que les polices avec sérif, elles se démarquent par la disparition de l’empattement : fonctionnalistes, directes et efficaces. Elles sont un excellent moyen pour nuancer vos textes lorsque vous utilisez également du sans serif. Du fait qu’elles sont très lisibles tant sur le web que sur support papier, n’hésitez pas à les utiliser pour vos textes courants.
On notera que comme les mécanes, l’utilisation de linéales de très grande taille (au-delà de 30px) est à la mode en ce moment sur le web pour constituer des titres impactants.
Ex : Helvetica, Futura, Bebas Neue
Script
Ces polices, tels que la Mistral ou la Bello sont inspirées de l’écriture courante. Revenant au pas de charge à la mode de nos jours, elles sont utilisées à profusion dans les sites webs « tendances » ou dans la publicité. Faites tout de même attention à leur utilisation, elles peuvent facilement être très peu lisibles sur un écran.
Ex : Mistral, Bello, Candy Script
Diverses
Inscriptions
Les Inscriptions, dont l’un des meilleurs exemples est la Trajan sont des typographies qui se rapprochent le plus des écritures romaines gravées dans la pierre. Ayant un fort passé historique, elles traduisent majoritairement le prestige et l’ancienneté.
Ex : Trajan, Trajan Pro, Perpetua
Gothiques (à ne pas confondre avec « gothic »)
Les Gothiques sont issues des écritures des moines copistes du Moyen-Âge. Ces polices sombres, anciennes et vernaculaires sont adaptées pour un public très spécifique (journaux, Heavy Metal…).
Ex : Augustal, Brietkopf Fraktur
Graphiques
Plus originales, créatives et rapidement peu lisibles, ces polices sont très diverses : déstructurées, groovy, fun, destroy… tout est permis !
Vous pourrez en trouver un très large choix sur dafont.com, prenez cependant garde aux droits d’auteurs, comme pour toutes les typographies.
Ex : Docteur Atomic, Rio Grande, Billo
Bien choisir sa typo
Maintenant que vous avez pris connaissance des différentes familles de typographie, il s’agit de bien savoir les utiliser…
Il n’y a pas de recette miracle, posez vous simplement les bonnes questions :
- Quelle image de marque, valeur ou message vous souhaitez véhiculer ?
- Y’a-t-il déjà une charte graphique mise en place ?
- Quels sont les goûts de mon client ? N’hésitez pas à envoyer un brief créatif avant toute proposition.
Vous pouvez également utiliser ce schéma (en anglais) pour vous guider si vous manquez d’inspiration : http://inspirationlab.wordpress.com/2010/04/16/so-you-need-a-typeface/
Notez qu’il y a tout de même des règles générales. Par exemple, n’utilisez pas des polices qui se font concurrence (par exemple deux serifs) mais essayez de mélanger les familles, les tailles de corps et les graisses (un titre en serif gras accompagné d’un texte courant sans serif sera plus pertinent que d’utiliser uniquement du sans serif). Créez du contraste !
Essayez d’abord de choisir vos typos comme un couple de personnes : deux personnalités qui ne vont pas ensemble ne fonctionneront pas !
Dans la suite de ce dossier nous verrons comment appliquer ces règles et utiliser les nouvelles technologies web pour utiliser au mieux la typographie : effets de texte CSS3, font-face kits, Cùfon… faites la guerre aux pages ennuyeuses et au Comic Sans MS !
Remerciements à Jérémy Viallard pour sa formation sur la typographie.
Articles similaires :
