Design: la typographie

Cet article s’insère dans une série d’articles consacrée aux éléments du design. La typographie transmet le message verbal par un ensemble de symboles: les caractères. La variation du dessin des lettres peut aider le graphiste à renforcer la personnalité d’une création. .

Introduction

A cette date, le média web impose un certain nombre de contraintes dans l’utilisation de la typographie. En effet, la disponibilité des typographies affichables sur un écran va dépendre de sa présence dans le système d’exploitation de l’utilisateur.

Comme vous ne pouvez pas savoir à l’avance si une police de caractère sera présente sur le système de vos internautes, vous êtes généralement limité à l’utilisation d’une dizaines de polices (celles qui sont les plus fréquemment disponibles sur les différents systèmes).

La solution alternative consiste à utiliser des mots images mais cette solution a aussi ses inconvénients. La mise à jour est fastidieuse, les moteurs de recherche ne prennent pas en compte les mots images et ces images alourdissent le poids de vos pages web. D’autres solutions à base de Flash comme sIFR (Scalable Inman Flash Replacement) existe, mais ce n’est pas, à mon avis, la panacée.

Le webdesigner doit donc, pour le moment, se contenter de ces limitations en attendant une évolution des technologies web.

La personnalité des polices de caractères

Le dessin des lettres d’une police de caractères va influencer d’une part sa lisibilité, d’autre part l’identité, la personnalité qu’elle va être susceptible de véhiculer. Le choix de la typographie doit donc se faire en accord avec la tonalité graphique du site afin de ne pas créer de dissonance entre le fond et la forme.

Avant même la lecture du contenu, la typographie apporte une charge émotionnelle et une atmosphère particulière au design. Une typographie bien choisie et cohérente avec la ligne graphique du site retient l’attention du lecteur et le plonge dans univers particulier. Le style peut être formel, décontracté, convivial, moderne …

Il est possible de regrouper les polices de caractères en famille en tenant compte des caractéristiques communes qui les unissent. Ces différentes familles correspondent alors à des utilisations spécifiques qui vont marquer les pages d’une atmosphère particulière.

Anatomie des caractères typographiques:

Il existe différents types de classement typographiques selon les critères de classement qui ont été retenues.

La classification Thibaudeau

Une des premières classification connue est celle de Francis Thibaudeau (typographe parisien 1860-1925). Créée en 1921, elle repose essentiellement sur la forme des empattements des lettres.

• - Empattement triangulaire : Elzévir (dit aussi Romain Ancien).
• - Empattement filiforme : Didot (dit aussi Romain Moderne).
• - Empattement quadrangulaire : Egyptienne.
• - Empattement absent : Antique.

La classification Vox/AtypI

La classification Vox/AtypI inventée par Maximilien Vox en 1952, a été adoptée en 1962 par l’Association Typographique Internationale (ATypI). Cette classification possède également la caractéristique d’avoir été traduite en anglais et en allemand, renforçant ainsi son caractère universel.

Cette classification distingue 3 groupes de familles :

Les classiques: Humanes, Garaldes et Réales

Le groupe des Humanes, Garaldes et Réales constitue la trilogie des caractères classiques ou historiques. Leurs caractéristiques communes résident dans leur empattement triangulaire, leurs faibles contrastes entre pleins et déliés, le contraste entre un œil relativement petit comparativement à des longs jambages ou encore une certaine inclinaison de l’axe des lettres.

Les Humanes puisent leurs formes dans la lettre romaine de la Renaissance. Il s’agit des plus anciens caractères latins, apparus à la fin du XVe siècle à Venise et s’inspirant des écritures des manuscrits humanistes de l’époque. On y trouve également des relectures contemporaines de ces caractères qui se singularisent par leur aspect assez lourd, résultat d’un très faible contraste entre pleins et déliés, un axe nettement incliné vers l’arrière et la traverse oblique du ‘e’.

Exemples : Centaur, ITC Berkeley Oldstyle

Les Garaldes rappellent les créations classiques (italiennes et françaises). Elles sont ainsi appelés en référence aux deux pères des deux archétypes de cette famille illustre, le graveur de caractères français Claude Garamond et l’imprimeur et éditeur vénitien Alde Manuce. Dérivés des Humanes, les Garaldes sont caractérisés par des proportions plus fines et des déliés de jonctions plus souples. La traverse du ‘e’ prend la forme horizontale qu’elle ne perdra plus.

Exemple : Garamond

Les Réales comprennent les caractères de labeur dont l’aspect se rapproche des types courants du 18e siècle. Enfants du classicisme du XVIIIe siècle, les Réales sont des caractères austères, marqués par la rationalité de leurs concepteurs. Les Réales sont considérés comme des caractères de transition entre les Garaldes et les Didones : elles tiennent donc de ces deux familles. Les contrastes pleins/déliés sont plus accusés, l’axe tend à se redresser, les empattements à s’affiner.

Exemple : Times

Les modernes: Didones, Mécanes et Linéales

Le groupe des Didones, Mécanes et Linéales constitue la trilogie des caractères modernes, nés avec la Révolution industrielle vers la fin du XIXe siècle. Sous l’influence du machinisme, ces caractères ont pour particularité d’être constitués de traits simples et fonctionnels.

Les Didones évoquent la typographie du début du 19e siècle par leur formes épurées. Aboutissement du processus de rationalisation engagé à l’époque classique, les Didones doivent leur nom à celui de la dynastie d’imprimeurs et d’éditeurs français Didot et à l’imprimeur parmesan Gianbattista Bodoni. Elles sont aisément reconnaissables à leur verticalité, le très fort contraste entre pleins et déliés et à leurs empattements parfaitement horizontaux.

Exemples : Dodot, Bodoni

Les Mécanes s’inspirent des inscriptions monumentales de l’antiquité. Également appelées Egyptiennes en référence au très fort intérêt pour l’égyptologie qui régnait à l’époque de leur lancement (début du XIXe siècle), les Mécanes sont des caractères construits, aux empattements épais et caractérisé par un faible contraste pleins/déliés.

Exemples : Rockwell, Lubalin, American Typewritter

Les Linéales correspondent aux caractères bâton (sans empattement) de la typographie moderne. Sous le vocable de Linéale, Vox a regroupé l’ensemble des caractères sans empattements (sans serif en anglais). On les a également appelées suivant les époques, Grotesque, Antique ou encore Bâtons.

Exemples : Univers, Frutiger, Helvetica

Les calligraphiques: Incises, Scriptes, Manuaires, Fractures

Le groupe des Incises, Scriptes et Manuaires constitue la trilogie des caractères d’inspiration calligraphique.

Les Incises tiennent leur nom de la parenté qui caractérise leur propre forme et celle de caractères gravés dans la pierre ou le métal. Proches des Linéales, leurs empattements sont souvent petits et triangulaires.

Exemples : Copperplate Gothic, Goudy Sans

Les Scriptes imitent l’écriture calligraphique écrites à la plume.

Exemple : Brush Script

Les Manuaires regroupent les caractères s’inspirant des lettres dessinées au pinceau.

Les Fractures regroupent les caractères dit brisés ou vulgairement gothiques, en référence aux écritures médiévales manuscrites. Largement inspirée d’une esthétique qui privilégie le monumental à la lisibilité, ces caractères se reconnaissent aisément à leurs formes pointues et anguleuses et à leurs panses cassées.

Les non-Latines

Les non-Latines regroupent les familles parfaitement hétérogènes. La famille des caractères non-latins regroupe les versions typographiées des grandes écritures qui ne sont pas basées sur l’alphabet latin. (caractères Arabes, Chinois …)

Les enrichissements typographiques

Travailler le graphisme avec la typographie c’est aussi jouer avec des paramètres comme la taille et la graisse de caractère, la casse, le gris typographique, la justification, l’interlettrage, l’interlignage, les espaces blancs …

Interlignage, interlettrage

L’interlignage est l’espace vertical qui sépare les lignes de texte alors que l’interlettrage est l’espace horizontal qui sépare les lettres d’un mot. Selon la police choisie, il peut être judicieux de faire varier ces paramètres pour améliorer la lisibilité d’un texte.

Vous pouvez également jouer sur l’interlettrage pour donner un style graphique à vos libelles, titres, sous-titres …

La casse

Le texte courant est habituellement affiché en bas de casse (minuscules) car les textes écrits en majuscules sont plus difficiles à lire.

Vous pouvez utiliser les majuscules pour mettre en valeur des titres. Sachez que les lettres majuscules sont plus imposantes et statiques, elles apporte un certain formalisme.

Les graisses

La graisse désigne l’épaisseur de trait des caractères d’une police. Souvent les polices sont déclinées en plusieurs graisses.

Ces graisses sont utilisées pour mettre en exergue un mots ou un groupe de mots, pour attirer l’attention du lecteur, pour hiérarchiser l’information. Elles s’appliquent sur les titres, les chapôts, les encadrés, les mots clés à mettre en évidence.

Le romain et l’italique

Le romain est plus lisible que l’italique et s’utilise donc pour la majeure partie du texte.

L’italique est utilisé pour détacher une information du contexte ou pour expliciter un contenu. On l’applique généralement sur les légendes, les citations, les références, les notes, les titres d’ouvrages, les expressions avec un « double sens », les mots en langue étrangère.

La justification

La justification détermine la largeur de chaque ligne et l’alignement vertical du texte (alignement à droite/gauche, centré, justifié.

Le choix de la justification n’est pas anodin sur le rendu global du texte et correspond à différents usages.

Alignement centré

A appliquer plutôt sur des textes courts car difficile à lire sur de longs textes. L’interlignage est souvent plus important.

On l’utilise davantage sur les titres, les accroches, les exergues.

Cette justification donne une impression solennelle, stable, affirmative, exclamative. Elle créer une discontinuité par rapport à la suite du texte.

Alignement justifié

Peut être utilisé sur des textes longs. Attention de ne pas choisir un interlignage trop petit. A éviter sur des justifications très réduites à cause des « zébrures » qu’il peut provoquer dans le gris typographique.

On l’utilise pour le texte courant d’un article.

Cette justification donne une impression de solidité, de carré, de fiabilité. Le texte semble difficile à arrêter. Le texte justifié a besoin d’un arrêt fort (puce, signature en gras …)

Alignement à gauche

Son utilisation est largement rependue et convient à la plupart des situations. L’interlignage peut être réduit pour gagner de la place.

On l’utilise pour le texte courant d’un article, pour des petites annonces (texte à phrases courtes).

Cette justification donne une impression d’irrégularité, de souplesse, de classicisme. Le texte semble continu mais s’arrête facilement.

Alignement à droite

A utiliser sur des textes courts avec justification peu importante. L’interlignage doit être plus important que pour les autres justifications. Cette justification revient difficilement à la ligne car il lui manque un repérage visuel qui se fait d’habitude à gauche.

On l’utilise pour les chapôs, les introductions, les titres d’articles, les exergues.

Cette justification donne une impression d’originalité, d’interrogation, d’instabilité (besoin d’un appui comme une photo par exemple).

Conclusion

La typographie peut être considérée comme un art à part entière et sa maitrise demande connaissances et expérience.

Dans la création d’un site internet, le contenu texte est un élément centrale. Le choix typographique doit donc être abordé avec un soin particulier. Chaque police de caractères apporte un style, une atmosphère que le designer peut exploiter pour communiquer son message. Attention à ne pas abuser d’un nombre trop important de polices sur une même page car vous risquez de brouiller le message. N’oubliez pas que le contenu doit rester la préoccupation principale du designer, veillez donc à assurer une bonne lisibilité.

Depuis l’apparition du numérique, une quantité impressionnante de polices est apparue sur le marché. Le designer n’a donc que l’embarra du choix pour mettre en place une ambiance graphique qui soutienne son message.

Pour une bonne lisibilité à l’écran, les polices suivantes sont généralement conseillées : Georgia, Times pour les polices à empattements (sérif) et Hevetica, Verdana, Arial pour les polices sans empattements (san sérif). Les polices sans empattements sont plus lisibles que les polices à empattements.

Sources :

- Ouvrage : Graphisme et ergonomie des sites web – Cristina Barroca – Éditions Dunod
- Wikipédia : Classification Vox-Atypi
- Site « Typographie et Civilisation » Classification Vox-Atypi
- Une partie des images est issu du site wikipédia et sont sous licence Créative Common, voir Classification Vox-Atypi