La typographie dans le design graphique 1/2

La typographie, plus communément appelée police de caractères (ou « font » en anglais) donne une forme visible à une idée écrite. Elle a pour but principal de faciliter la lecture, mais pas que ! La typographie est un aspect essentiel de la création graphique. Lorsque l’œil n’y est pas sensibilisé, il est facile de penser que la typographie ne joue qu’un rôle secondaire dans la composition d’un support de communication. Pourtant, elle suggère, véhicule et provoque (tout autant que les images, les couleurs, les formes) des valeurs, des idées, des notions et même des émotions.

Pour tous les novices en la matière, pour les fétichistes de l’Arial, de la Times New Roman, de la Comic Sans MS, pour ceux qui sous-estiment encore le pouvoir de la typographie : cet article vous est dédié. Voici donc un petit tour d’horizon des principes de base de la typographie, des réglages que l’on peut exercer pour trouver un juste équilibre entre esthétique et pratique, afin de vous sensibiliser aux enjeux des choix typographiques que nous réalisons au quotidien au sein de La Haute Société.

Ne sous-estimez pas le pouvoir d’une typographie : force, sens et connotations

Trouver un juste équilibre entre esthétique et fonctionnel, tel est l’enjeu. La typographie a le pouvoir d’insuffler une personnalité à un texte, de le combler d’attributs émotionnels. L’aspect « image » de la typo est donc une composante importante. Et oui, les caractères ont un caractère.

Penser l’aspect « image », c’est envisager et utiliser la typographie comme l’expression de valeurs, et donc l’expression d’un positionnement pour une marque ou une entreprise. C’est donner du caractère, un ton, générer une émotion. C’est se demander ce que la typo fait dire aux mots, car la typographie est belle et bien porteuse de sens, avant même de parler du sens des mots. Dans la création de l’identité visuelle globale d’une entreprise (logo, déclinaisons graphiques), ou encore d’une accroche, choisir une police dont la tonalité est en accord avec l’esprit du sujet est un élément important. Si la tonalité ne convient pas, l’accroche perdra de sa force, de son sens, et de sa crédibilité.

Les nombreux styles typographiques permettent d’exprimer toutes sortes d’idées ; chaque police a son histoire à raconter et une personnalité unique, qui lui est propre.

La typographie joue également un rôle dans l’image d’une marque. En effet, elle contribue à affirmer son identité et peut même devenir un marqueur de reconnaissance par le public (comme pour Google par exemple).

La marque SFR possède une typographie créée spécifiquement pour son besoin identitaire. Le site sfr.fr que nous avons conçu l’utilise et appuie ainsi son image (voir l’étude de cas sur le site de La Haute Société).

blog_la_haute_societe_typo_sfr

 

Autre exemple, la société ARaymond (leader de la fixation et client à La Haute Société) possède aussi une typographie qui lui est propre, et que nous avons affirmé à travers un projet d’édition pour ses documents de communication interne (voir ci-dessous).

blog_la_haute_societe_typo_araymond1

blog_la_haute_societe_typo_araymond2

blog_la_haute_societe_typo_araymond3

 

Cependant, au-delà du pouvoir de l’image de la typo, il est primordial de penser au côté pratique et lisible de la police afin d’offrir une expérience optimale au lecteur.

Penser l’aspect « fonctionnel », c’est considérer et employer la typographie comme un moyen de lecture fluide, rapide et de hiérarchisation de l’information (donner des clés de lecture pour trouver facilement le sujet d’un texte, le plan, les informations essentielles, et répondre sommairement à des questions). L’objectif est donc d’apporter une lecture agréable à l’œil et de la faciliter autant que faire se peut.

D’un point de vue marketing, c’est une pratique qui jouera un rôle essentiel dans l’appétit inconscient du lecteur. La bonne gestion des paramètres typographiques (choix de la police, graisse, taille, hiérarchie…) permet de réduire considérablement la perte des lecteurs dès la découverte du texte et au fur et à mesure de leur lecture. Cela influence donc directement les retombées de communication (taux de visibilité, trafic d’un site internet…).

Pour optimiser l’expérience utilisateur, le choix d’une typographie s’avère donc bien plus importante, précise et délicate que ce qu’elle laisse paraître…

 

Notions clés et réglages sur lesquels on peut jouer

Découvrons à présent quelques notions clés du large vocabulaire typographique. Dans le domaine de la création graphique, le graphiste est amené à jouer avec de nombreux réglages typographiques qui permettent d’aboutir au résultat souhaité. Chacun de ces réglages jouent un rôle important pour donner à l’ensemble des textes l’harmonie recherchée. En voici quelques-uns.

Le corps

C’est la taille d’un caractère. Il est mesuré en points typographiques : un texte en corps 10 est composé d’une police haute de dix points. Le corps est évidement l’outil de base de la hiérarchisation de l’information (titre, sous-titre, texte courant, exergue, chapeau…).

L’empattement

Un des éléments spécifiques de l’anatomie de la typographie est l’empattement. Il s’agit d’une forme significative horizontale située à la base et en haut des parties verticales ou obliques des caractères.

Les caractères avec empattements sont dits « serif ». Ceux sans empattements sont dit « sans serif » ou « bâtons ». Il existe également des polices utilisant des alphabets avec et sans empattements, elles sont dites « hybrides ».

À l’origine, lors de l’invention de l’imprimerie, les empattements permettaient de marquer plus nettement la ligne de texte afin d’assurer une bonne fluidité de lecture. C’est évidemment toujours le cas aujourd’hui, seulement il n’est pas exact de penser qu’un caractère avec empattements est plus lisible qu’un caractère bâton. En effet, beaucoup d’autres paramètres influent sur sa lisibilité (taille, graisse, style, espace entre les lignes…).

blog_la_haute_societe_typo_empattement

Les variantes typographiques

Un même caractère peut être disponible sous différentes variantes, allant du caractère maigre jusqu’à très gras (light, semi-light, regular, semi-bold, bold, extra-bold, black…), sans oublier l’italique. Les différents rythmes et nuances obtenus avec ces variantes permettent d’enrichir le texte.

La chasse

La chasse est la largeur des lettres. Suivant les typographies, les caractères peuvent être plus ou moins étroits. « Les caractères étroits présentent un réel intérêt pour la composition des titres mais leur usage dans les petits corps est plus délicat »*. La chasse a une incidence directe sur l’encombrement du texte, la place qu’il occupe.

« C’est dans l’objectif de créer un caractère idéal qu’Adrian Frutiger dessina la police Univers, caractère décliné en 21 variantes et 4 chasses. »*

blog_la_haute_societe_typo_univers
blog_la_haute_societe_typo_variantes_chasse

L’interlignage

C’est l’espace entre les lignes de texte. Souvent négligé, il a pourtant une incidence considérable sur le confort de lecture. « La lisibilité d’un texte est bonne lorsque l’œil parcourt le texte en passant naturellement d’une ligne à la suivante, c’est-à-dire lorsque les lignes de texte et les espaces entre les lignes s’équilibrent. »

Et cette variable est d’autant plus importante lorsque l’on travaille sur de l’affichage écran (moins confortable pour l’oeil que le papier). D’ailleurs à La Haute Société, nous aimons bien titiller nos développeurs à ce sujet, à rajouter 3 pixels d’interlignage par-ci, et 4 pixels par là… Cela peut paraître insignifiant, mais c’est justement cette précision qui fait toute la différence ! :)

blog_la_haute_societe_typo_interlignages

L’approche

Dit aussi interlettrage, il s’agit de l’espace entre les lettres. Elle est plus ou moins grande suivant la police. Quelque soit l’approche qu’une typographie présente initialement, il est possible de réduire ou d’augmenter son interlettrage pour jouer sur l’occupation de l’espace et la lisibilité.

blog_la_haute_societe_typo_approche

Classification des typographies en familles

De part la multitude des typographies existantes, le typographe Francis Thibaudeau a, en 1921, tenté de classer les polices de caractères en fonction de l’anatomie des lettres. Il a ainsi classé les polices en 4 grandes familles regroupées sous le nom de classification Thibaudeau.

Il existe également une autre classification plus complète, mais moins facile à appréhender : la classification Vox-ATypI. Créée en 1952 par le typographe Maximilien Vox, elle classe les polices en 12 grandes familles (cette dernière est celle adoptée par l’Association Typographique Internationale en 1962, d’où l’acronyme ATypI).

Bien que la classification Vox-ATypI soit plus complète, nous allons détailler uniquement la classification Thibaudeau afin de rester dans une approche simple et élémentaire des fondamentaux de la typographie.

Les familles de la Thibaudeau sont les suivantes :

  • Elzévirs : empattements triangulaires, aspect artisanal.
    blog_la_haute_societe_typo_elzevirs
  • Didots (dites « Didones » chez Vox-ATypI) : empattements filiformes, style fin et strict, rigueur, contrastes importants entre les pleins (tracés les plus épais d’une lettre) et les déliés (tracés les plus fins d’une lettre).
    blog_la_haute_societe_typo_didots
  • Égyptiennes (dites « Mécanes » chez Vox-ATypI) : empattements épais et carrés, caractères robustes. blog_la_haute_societe_typo_egyptiennes
  • Antiques (dites « Linéales » chez Vox-ATypI) : sans empattements, droites. blog_la_haute_societe_typo_antiques
  • Nous pouvons ajouter à cela une famille « Écritures », qui regroupe les caractères inspirés de l’écriture manuscrite. blog_la_haute_societe_typo_ecritures

 

Tous ces réglages jouent donc un rôle pour assurer un bon confort de lecture mais aussi un rôle dans l’expression de valeurs : légèreté, force, douceur, dynamisme, ardeur, gourmandise, sobriété, élégance, décontraction, combativité, rigueur…

La partie 2 de cet article (« Le choix délicat d’une typographie ») est à consulter ici.

* Extraits du livre Mises en page(s), etc. de Damien Gautier et Claire Gautier

 

4 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *