Crénage, suivi et interlignage : un guide simple pour une typographie efficace

Lors de la conception pour le Web, vous devez toujours garder une chose à l'esprit : la lisibilité. Peu importe la qualité du design, la beauté de votre mise en page ou le génie de votre utilisation de la couleur. Si les gens ne peuvent pas lire les mots à l'écran (et cela suppose bien sûr qu'il y a des mots à l'écran), le site Web ne peut pas remplir sa fonction. Trois des éléments les plus importants de la lisibilité du texte sont le crénage, le suivi et l'interlignage, bien que de nombreuses personnes les confondent ou ne comprennent tout simplement pas comment les utiliser efficacement. Nous avons l'intention d'y remédier aujourd'hui.

Crénage, suivi et avance

Si vous réduisez ces trois éléments aux fondamentaux absolus, vous examinez l'espacement entre les caractères sur les axes X et Y. En creusant, vous verrez qu'il y a plus que cela, mais en substance, vous regardez la relation entre les caractères du texte. Il est important de comprendre la relation entre ces trois attributs, car une bonne conception et une bonne lisibilité dépendent de votre utilisation au mieux de vos capacités.

Et cela vient avec le temps et la pratique. Mais une fois que vous commencez à y prêter attention, vous remarquerez à quel point le crénage, le suivi et l'interlignage sont utilisés à la fois efficacement et mal sur tout ce que vous lisez et voyez quotidiennement. Creusons.

Ajuster le crénage, l'interlignage et le suivi (et plus encore !)

En fait, avant de creuser, voyons comment vous modifiez et ajustez ces paramètres. Alors que la plupart des programmes de traitement de texte ont des options pour les ajuster, la plupart des gens n'en auront jamais besoin pour écrire une copie ou un texte typique. C'est lorsque vous concevez du texte que cela devient plus un problème, donc des programmes comme Photoshop, Illustrator, etc. auront les options dont vous avez le plus besoin.

Dans les produits Adobe, il vous suffit d'ouvrir le panneau de caractères du calque de texte et vous avez tout ce dont vous avez besoin. Le V/A est le crénage, le VA dans une boîte est le suivi et les A soulignés et verticaux sont en avance. Vous pouvez également ajuster le barré, le poids, la taille, l'exposant/l'indice et bien plus encore dans ce panneau. Cela vaut la peine de s'habituer à garder cela ouvert.

Placez simplement votre curseur là où vous devez ajuster l'espacement et c'est parti.

Qu'est-ce que le crénage ?

Commençons par le crénage . Le crénage est le plus simple des trois, vraiment. C'est l'espace entre deux personnages côte à côte. En un mot, vous pouvez avoir un crénage variable car l'espace entre les deux premières lettres peut être différent de celui entre les deux dernières (et ainsi de suite).

Dans les polices à espacement fixe, chaque caractère occupe exactement la même quantité d'espace horizontal sans chevauchement. Le A a la même largeur que le B que le J que le K. Le réglage du crénage entre ces lettres a tendance à être plus facile que les polices à espacement variable, où les lettres peuvent se chevaucher et s'imprimer à différentes largeurs.

Dans l'exemple ci-dessus, nous avons trois lignes qui ont été copiées et collées à l'aide de la police à espacement fixe Courier New . Le crénage de la ligne supérieure est défini sur 0, ce qui est la valeur par défaut et utilise l'espacement choisi par le concepteur de polices. La deuxième ligne est définie de manière égale entre les lettres (et les espaces) à 200. Comme vous pouvez le voir, les espaces sont uniformes entre les caractères sur la ligne. Enfin, la troisième ligne a été crénée au hasard avec un espacement à la fois positif et négatif dans chaque mot individuel. Comme vous pouvez le voir, chaque caractère peut avoir un crénage différent de chaque côté.

Qu'est-ce que le suivi ?

Le suivi est similaire au crénage, mais ce n'est pas du crénage. Où le crénage est l'espace entre deux caractères individuels, le suivi est l'espace uniforme entre chaque mot ou ligne. Au lieu de vous soucier de la façon dont les choses sont assemblées lettre par lettre comme avec le crénage, vous vous assurez que toute la ligne est uniformément espacée. En regardant l'image d'exemple précédente, la deuxième ligne aurait pu être faite d'une manière beaucoup plus facile.

Ce que j'ai fait pour le crénage était de placer mon curseur entre chaque caractère individuel et de l'ajuster à 200. J'ai essentiellement suivi toute la ligne. C'est ce que vous devez faire. Mettez simplement en surbrillance ce que vous devez suivre et ajustez-le dans le panneau de caractères.

Sachez toutefois que certaines polices et scripts peuvent devenir illisibles lorsque le suivi est ajusté.

Les polices d'écriture manuscrite et les polices de caractères cursives sont définies avec un crénage spécifique, et si vous ajustez le suivi, vous obtiendrez des espaces dans une ligne autrement ininterrompue. Ou en allant dans l'autre sens pour compresser les lignes, vous pourriez simplement rendre le script illisible.

Qu'est-ce que diriger ?

Avec Leading, vous n'avez plus à faire à l'espacement entre les caractères. Le leader est l'espace entre les lignes.

L'utilisation efficace de l'interlignage vous permet d'utiliser efficacement les espaces blancs dans vos conceptions. Les lignes à l'étroit - même avec un crénage/suivi correct et bien fait - peuvent être une expérience misérable pour les lecteurs.

À certains endroits, vous pouvez voir une interligne appelée hauteur de ligne , mais c'est à peu près la même chose. Une bonne règle de base est de vous assurer de laisser au moins un peu d'espace au-dessus et en dessous de vos personnages. Comme vous pouvez le voir dans l'exemple du haut, une police de 40 pixels a une hauteur de ligne de 48 pixels. Cela signifie que quoi qu'il en soit, il y aura un espacement entre les lettres. Si vous définissez cela à ou en dessous de la taille de la police, vous obtiendrez un chevauchement de caractères.

De plus, il s'agit de la hauteur de la ligne sur laquelle les personnages sont assis. Ce n'est pas la hauteur du personnage . Tout comme le crénage et le suivi ne rendent pas les caractères plus gros ou plus minces, le suivi ne les rend pas plus courts ou plus grands. C'est simplement l'espace qui les entoure.

Comme vous pouvez le voir, cependant, les options sous le crénage/suivi dans le panneau de caractères de Photoshop ajustent la largeur/hauteur des caractères indépendamment du crénage, du suivi et de l'interlignage.

Raccourcis clavier Photoshop/Illustrator

Le seul inconvénient du panneau de caractères est qu'il devient assez ennuyeux lorsque vous avez besoin d'un réglage fin. Heureusement, il existe des raccourcis clavier qui facilitent grandement l'utilisation du crénage, du suivi et de la direction.

Ces raccourcis sont destinés à la suite Adobe Creative Cloud, ils peuvent donc être différents dans Gimp ou Paint.NET ou dans un autre programme.

• Crénage - Avec le curseur entre deux caractères, maintenez ALT (ou Option sur Mac) et utilisez les flèches gauche/droite pour ajuster le crénage
• Suivi - Avec le mot/la ligne en surbrillance, maintenez ALT (ou Option sur Mac) et utilisez les flèches droite/gauche pour ajuster le suivi du texte en surbrillance
• En tête – Mettez en surbrillance les lignes que vous souhaitez ajuster, maintenez ALT (ou Option sur Mac) et utilisez les flèches haut/bas pour ajuster l'espace entre les lignes

Bien que vous puissiez placer votre curseur ou mettre en surbrillance le texte et saisir des valeurs dans le panneau de caractères, les raccourcis clavier rendent l'ensemble du processus beaucoup moins fastidieux et chronophage. De plus, vous bénéficiez d'un contrôle plus granulaire, ce qui vous permet également de créer de meilleures conceptions.

(En passant, si vous n'utilisez pas régulièrement les raccourcis clavier Photoshop/Illustrator/Premier, etc., nous vous recommandons fortement d'apprendre, car cela rend votre flux de travail beaucoup plus fluide, plus agréable et plus productif.)

Emballer

Le crénage, le suivi et l'interlignage sont des éléments fondamentaux du texte lisible dans la conception Web (et la conception en général). Apprendre la différence et comment utiliser chacun d'eux efficacement fera de vous un bien meilleur concepteur. Il peut sembler un peu étrange que quelque chose d'aussi simple que l'espacement entre les lettres et les lignes puisse avoir un impact aussi important, mais une fois que vous l'aurez géré pendant un petit moment, vous ne regarderez plus jamais les sites Web, les publicités, les logos ou les panneaux d'affichage. de la même manière encore.

Quels sont vos trucs et astuces pour obtenir le suivi, le crénage ou l'orientation parfaits dans une conception ?

Article présenté en image par BarsRsind / shutterstock.com