Une introduction à la typographie pour les non-designers

Qu’est-ce que la typographie ?

La typographie est à la fois un art et une technique. Créée à l’origine par le biais de documents imprimés (vous vous souvenez de la presse à imprimer de Johannes Gutenberg ?), la typographie consiste à disposer les caractères (lettres ou caractères) de manière à permettre leur apprentissage et leur reconnaissance.
Cependant, la typographie ne se limite pas à la conception des lettres et des caractères. Elle implique également une disposition et une sélection minutieuses de la taille des points, de la longueur des lignes et de l’espacement, tant sur une seule ligne que sur une page entière. Si vous connaissez les bases de la typographie, vous serez en mesure d’agencer un ensemble d’en-têtes, de paragraphes, etc. de manière attrayante et convaincante.
La typographie est absolument omniprésente – il suffit de regarder votre téléphone, un panneau d’affichage, votre tasse de café ou même les différents styles utilisés dans cet article de blog. Une fois que vous aurez pris conscience du fait que la typographie est utilisée partout autour de vous, vous commencerez à reconnaître les différences entre les caractères et les raisons pour lesquelles ils ont été choisis.

Caractères et polices de caractères

La plupart des gens pensent que ces mots sont interchangeables, mais ils signifient en fait deux choses différentes.
Le typographe Nick Sherman a un jour utilisé une excellente analogie pour expliquer les différences entre les termes « caractère » et « police ». Il a suggéré de comparer ces termes de typographie aux termes musicaux « chanson » et « mp3 ». Lorsque vous expliquez à quel point vous appréciez un morceau particulier, vous dites « J’adore cette chanson ! ». Vous ne diriez pas, « J’aime ce mp3 ! » La chanson est l’œuvre d’art, tandis qu’un fichier mp3 n’est que le mécanisme de livraison. Les mêmes règles s’appliquent à la typographie.
Vous devez utiliser le mot « typographie » pour décrire l’œuvre de création (ce que vous voyez). Il s’agit d’un terme de conception plus abstrait utilisé pour désigner l’aspect ou la sensation d’une collection spécifique. Par exemple, l’Helvetica est une police de caractères.
Si vous décrivez l’incarnation physique de la collection de lettres et de caractères, vous devez utiliser le terme « police » (ce que vous utilisez – qu’il s’agisse d’un fichier sur votre ordinateur ou d’un boîtier rempli de lettres en métal). C’est la représentation tangible de cette collection de lettres et de caractères. Par exemple, l’Helvetica Bold et l’Helvetica Light Oblique sont des polices de caractères.
Comment vous pourriez utiliser ces deux termes dans une phrase :

« Wow. La police de caractères que vous avez choisie tire vraiment ce design ensemble. »

« Je vais changer la taille de la police en 12pt pour qu’elle rentre dans la boîte. »

L’anatomie d’une police de caractères

Apprendre l’anatomie d’une police de caractères vous aidera à expliquer pourquoi vous aimez ou n’aimez pas une police de caractères au lieu de dire « Je ne sais pas, ça a juste l’air bizarre ». Croyez-moi, je suis passé par là. Mais il est tellement plus efficace (et plus amusant) de communiquer avec les concepteurs lorsque vous parlez leur langage.
Chaque partie d’une lettre a son propre terme spécial, comme les os du corps humain. Vous trouverez ci-dessous trois diagrammes qui expliquent la composition de chaque lettre, la façon dont ces éléments interagissent entre eux et la façon dont ils se situent sur une ligne.
Dans le premier exemple, avec le mot « Faulty », vous verrez que la ligne où se trouvent les lettres est appelée la ligne de base. La distance entre la ligne de base et le haut de la lettre majuscule s’appelle la hauteur du chapeau. La hauteur x, située entre la ligne de base et la hauteur du chapeau, est la hauteur du corps de la lettre minuscule (dans ce scénario, il s’agit des lettres « a », « u » et « y »). Le bol est cette forme ronde qui dépasse de la lettre « a ». Vous voyez le petit pied qui dépasse de la lettre « l » ? C’est un empattement. Enfin, le jambage est le point le plus long d’une lettre qui dépasse la ligne de base.

Lorsque vous tapez le mot « flash », vous remarquerez que le f et le l se rapprochent pour former un seul caractère. Cette formation s’appelle une ligature. La base d’une lettre s’appelle la tige (comme la tige d’une fleur). Le corps incurvé de la lettre « s » s’appelle une épine. Vous remarquerez également que la lettre « h » est en fait plus haute que la hauteur du chapeau. La partie haute qui dépasse cette ligne s’appelle un ascendant.

Vous connaissez probablement déjà les différences entre les majuscules et les minuscules (au cas où vous auriez besoin d’un rappel, vous pouvez les voir dans le diagramme ci-dessous). Dans la lettre majuscule « B », vous verrez ce que l’on appelle une barre transversale. Il s’agit de la barre qui traverse l’intérieur de la lettre et relie un côté à l’autre. L’espace vide au milieu des lettres telles que « B », « O » ou « A » s’appelle le contrefort. Le fleuron est l’extrémité effilée de lettres telles que « e » ou « c ». Le terminal est une sorte de courbe que l’on voit au sommet de la lettre  » f  » ou à la fin de la lettre  » j « .

Vous avez tout compris ? Maintenant que vous connaissez l’anatomie des formes de lettres, examinons les différentes classifications.

Classification des types

Les deux principales classifications de caractères que vous voyez sont appelées serif et sans serif. Parmi les autres classifications, on trouve les modernes, les slab serif, les blackletter, les script et les décoratifs. Toutefois, pour gagner du temps, je ne vais détailler que les deux plus courantes.

Sérif

Vous vous souvenez quand j’ai fait remarquer le petit pied dans le mot « faulty » ? Les caractères avec des pieds comme ça sont appelés serif. Vous pouvez voir où j’ai souligné ces petits pieds ci-dessous :

Les caractères avec empattement les plus courants sont Times New Roman, Georgia et Garamond. Si vous lisez un roman, vous remarquerez peut-être que le corps du texte est composé d’empattements. C’est parce qu’un empattement est beaucoup plus facile à lire dans les longs ouvrages imprimés, en raison de la distinction entre les lettres.

Sans Serif

En français, le mot « sans » signifie « sans ». Ainsi, le terme « sans serif » signifie littéralement « sans serif ». Dans l’image ci-dessous, vous remarquerez que les mots n’ont pas d’empattements, comme je l’ai indiqué avec les flèches rouges.

Les polices de caractères sans empattement les plus courantes sont Arial, Verdana et Futura. Vous verrez beaucoup de caractères sans empattement dans les articles de blog et les documents sur le Web, car ils sont plus modernes et ont une belle apparence même à des résolutions d’écran inférieures.

Familles de type

Le terme « famille de caractères » ou « famille de caractères » est utilisé pour décrire une gamme de conceptions qui sont toutes des variations d’un caractère de base. Par exemple, vous verrez que Proxima Nova possède des variantes telles que gras, extra gras, noir, normal, léger, léger italique et normal italique :

Si vous vous en tenez à une seule famille de caractères, vous pourrez ajouter des variations à vos créations, tout en les gardant cohérentes et uniformes. Les concepteurs peuvent utiliser différentes polices au sein d’une même famille pour créer un sens de la hiérarchie, de manière à ce que les éléments les plus importants, tels que les titres et les citations, ressortent au-dessus du reste du texte.

Crénage

Le crénage est la modification de l’espace entre deux lettres. Pour un exemple, voir l’image ci-dessous :

Ici, j’ai utilisé Franklin Gothic Medium pour mettre en valeur l’espace naturel que l’on voit entre deux lettres T. Cela semble un peu trop serré, non ? En personnalisant l’espace entre ces deux lettres, vous pourrez améliorer la lisibilité.

Suivi du site

Comme le crénage, le suivi consiste à modifier l’espacement des lettres. Cependant, au lieu d’ajuster l’espacement entre deux lettres seulement, le suivi est un ajustement de l’espacement entre toutes les lettres d’un mot entier. Voyez la différence ci-dessous :

Pour cet exemple, j’ai choisi d’effectuer un ajustement extrême du suivi. En général, il est préférable d’appliquer le suivi par petits incréments pour éviter les problèmes de lisibilité.

Chef de file

Vous vous souvenez, au lycée, de l’espacement double que vous deviez respecter dans vos rédactions ? Eh bien, les termes « espacement simple » et « double espacement » peuvent également être appelés « interligne », c’est-à-dire la distance entre les lignes de base. Voyez l’interlignage en action :

Vous pouvez choisir d’augmenter l’interligne, ce qui crée plus d’espace entre les lignes de base, ou de diminuer l’interligne, ce qui rapproche vos lignes de texte. La raison pour laquelle les enseignants du secondaire demandaient que les rédactions soient à double interligne était que c’était beaucoup plus facile à lire et qu’ils pouvaient apporter des corrections au texte plus facilement.

Hiérarchie

En lisant ce billet de blog, vous remarquerez que certains mots ressortent plus que d’autres. C’est ce que les graphistes appellent la création d’une hiérarchie. Vous pouvez utiliser différents poids (gras, normal, léger), styles (italique) et tailles pour créer un sens de l’ordre dans votre texte. Cela permet non seulement de créer un flux lisible, mais aussi d’aider le lecteur à voir quels sont les points les plus importants. Voici un exemple de hiérarchie :

Dans la plupart des cas, vous voulez que les gens lisent le titre en premier. C’est pourquoi vous verrez que la plupart des titres sont beaucoup plus gros et plus gras que le corps du texte. Les citations et les phrases descriptives peuvent également se démarquer du reste du texte grâce à des techniques telles que les caractères gras et l’italique. Avec une hiérarchie efficace, le lecteur doit pouvoir passer d’une section à l’autre pour identifier les points les plus importants.
Bien sûr, vous pouvez toujours en apprendre davantage sur la typographie. Lorsque les graphistes obtiennent un diplôme, ils doivent généralement passer par plusieurs séries de cours de typographie pour devenir des professionnels. Cependant, vous connaissez maintenant quelques termes clés pour vous lancer et vous serez en mesure de paraître super intelligent lorsque vous parlerez à vos amis graphistes. Et vous pourrez même envisager de tester certains ajustements de crénage et de suivi dans la conception de votre prochain ebook !
Quelles autres leçons de conception aimeriez-vous apprendre ? Faites-le nous savoir dans les commentaires.