Chaque projet nécessite un système et une hiérarchie pour les éléments de texte. Il suffit de penser à tous les petits morceaux de texte utilisés dans une conception - titres, corps de texte, éléments de navigation, informations juridiques, légendes, etc.
Mais comment créez-vous cette hiérarchie pour que chaque élément de texte passe facilement au suivant? Aujourd'hui, nous allons vous guider étape par étape dans la création d'un système de hiérarchie de typographie pouvant être utilisé pour presque tous les projets de conception. (Et nous combinons les conseils avec de beaux exemples de typographie de qualité pour vous aider à recueillir un peu d'inspiration.)
1. Commencez avec une copie de corps confortable
Bien que vous souhaitiez peut-être commencer par un traitement de titre cool, le point de départ est en fait au centre. Établissez d’abord un type de caractère, une taille et un espacement confortables pour la copie du corps principal.
Cela devrait avoir du sens car il s’agit de l’essentiel du texte de la conception. Que vous construisiez un site Web ou une brochure, ce concept est le même. Selon le Baymard Institute, la lisibilité idéale du corps de texte se situe entre 50 et 60 caractères par ligne (ou colonne). Ce guide vous aidera à définir une échelle pour le texte lisible et tenant compte de différents types de caractères (tels que caractères normaux ou condensés ou dactylographiés).
2. Construire une échelle
Une fois que vous savez à quoi ressemblera le corps du texte, vous pouvez définir une échelle autour pour tous les autres éléments de texte de la conception. Il peut être facile de négliger certains blocs de texte; Faites une liste de chaque utilisation différente du texte dans votre projet.
- Corps copie
- Titres
- Sous-titres
- Les légendes
- Bloquer les citations
- Éléments de navigation
- Information de pied de page
- Copie légale ou dénis de responsabilité
Créez maintenant une échelle qui dicte la police de caractères, la plage de tailles et l’utilisation de chacun de ces éléments. (Et intégrez-le dans votre CSS pour les sites Web ou dans les fichiers de styles pour les documents de travail.) Il existe plusieurs façons de créer la balance, mais le pourcentage de taille peut être un bon point de départ. Vous pouvez également établir une échelle basée sur le calcul derrière une grille de base ou visuellement.
Voici une échelle simple pour commencer:
- Taille du corps
- Les titres sont la taille du corps en fois 220%
- Les sous-titres correspondent à la taille du corps, fois 150%
- Les éléments de navigation ont une taille de copie du corps multipliée par 80%
- Le pied de page / copie légale correspond à la taille du corps, multipliée par 80%
3. Pensez plus gros au plus petit, de haut en bas
Cette règle est assez simple: le texte le plus important et le plus important doit figurer en haut et la taille doit diminuer à mesure que vous lisez la page ou l’écran.
Cela ne veut pas dire que vous ne pouvez pas enfreindre cette règle de temps en temps avec une certaine finesse de conception, mais cela devrait toujours être le point de départ du développement de la hiérarchie typographique. (Qui va vraiment défiler jusqu'à la fin d'une page Web pour le titre, puis revenir au début pour commencer à lire?)
4. Établir des règles pour l'espace
L'espace entre et autour est tout aussi important que la taille du lettrage. Les facteurs permettant de déterminer l’espace sont notamment l’avant (ou la hauteur de ligne), les retraits (ou non), les enveloppements et les gouttières et l’alignement.
Considérez des proportions d'espacement qui reflètent l'échelle utilisée pour le dimensionnement du texte. La taille de la toile est également très importante ici. Les grandes toiles sont lisibles avec un espacement plus étroit que les petites toiles. (C'est pourquoi de nombreux projets ont des spécifications d'espacement beaucoup plus souples pour des périphériques tels que les téléphones mobiles et des règles plus strictes pour les ordinateurs de bureau.)
Comme pour les tailles de caractères, les règles d'espacement doivent être définies à l'avance pour l'ensemble du cadre de conception. Un espacement propre et constant est l’une des petites choses qui peuvent faire ou défaire un dessin.
5. Définir les règles pour les caractères gras et italiques
Bien que les caractères gras et en italique ne soient pas des éléments de type ou des tailles différentes, leur utilisation est importante. (Imaginez à quoi ressemblera le dessin si tous les autres mots sont en gras.)
Cela rend les directives pour le gras et l'italique particulièrement importantes. Plutôt que d’envisager la taille ou l’espace, la considération est beaucoup plus contextuelle. Les spécifications d'utilisation peuvent indiquer que seuls ce nombre de mots ou d'expressions (ou de mots ou d'expressions spécifiques) peut bénéficier de ce traitement. C'est une erreur commune de trop utiliser gras et italique; quand il doute, ne l'utilisez pas.
6. Créez un? Z?
Le modèle de lecture habituel a la forme d’un Z. Que vous souhaitiez créer une langue qui lit de gauche à droite ou de droite à gauche (retourner le Z), les utilisateurs liront d’un coin à l’autre de la ligne puis de le coin de départ et à travers la ligne dans un motif répété.
Utilisez ce flux naturel lorsque vous placez des éléments de texte à l'écran. Cette forme en Z est la raison pour laquelle la plupart des marques placent leur logo dans le coin supérieur gauche. C'est le premier endroit où l'œil atterrit lors de la lecture.
7. Considérez le poids visuel
La taille n'est pas le seul facteur qui détermine la taille d'un élément de texte à l'écran. Le poids visuel est tout aussi important et peut avoir une incidence sur la manière dont vous créez une échelle typographique.
Les polices de caractères auront l'air plus grandes quand:
- Ils incluent des poids de trait épais
- Ils comprennent des fioritures ou des embellissements
- Ils sont larges
- Ce sont des polices de base de nouveauté
- Ils ont plus haut x
- Ils sont utilisés en majuscule
Les polices de caractères auront l'air plus petites quand:
- Ils sont condensés
- Ils incluent des largeurs de trait légères ou fines
- Il y a peu de contraste avec le fond
- Ils sont utilisés avec des lettres minuscules
8. Créer des accents
Vous voudrez mettre en évidence certains mots qui sortent un peu de l’échelle typographique normale. Ajouter un accent au lettrage peut le faire ressortir sans qu'il soit nécessaire d'ajuster la taille ou la police de caractères réelle.
Les accents communs incluent:
- Couleur
- Souligner
- Surligner
- Texte dans un bouton ou une forme
- Animation simple
- Changement de casse d'un autre type de même taille
La bonne chose à propos de tout accent dans une hiérarchie de types est qu’il attire immédiatement l’attention. Ces éléments doivent être utilisés avec parcimonie pour le plus grand impact et pour les éléments clés de la conception.
9. Utilisez le? Test oculaire?
Enfin, chaque règle a une exception (ou deux). C'est là que le? Test de la vue? entre. Il suffit de regarder l’échelle à l’écran. Comment le texte vous ressemble-t-il? Y a-t-il un flux logique? Ç'est facile a lire?
Si vous vous sentez mal de quelque façon que ce soit, envisagez d’ajuster l’échelle. En fonction de la police de caractères que vous utilisez et d'autres éléments de la conception (des images à la couleur en passant par le contraste), l'échelle nécessite des ajustements de votre part. Ce n'est qu'un point de départ lorsque vous n'êtes pas sûr de ce que vous voulez faire.
Et demandez d'autres yeux aussi. Créez une ou deux versions avec différentes hiérarchies pour voir quelle version obtient la meilleure réponse. Le design est un art visuel, faisant le "test visuel". une option imprécise mais assez fiable.
Conclusion
Une fois que vous avez défini une hiérarchie typographique pour un projet, la meilleure chose à faire est de la documenter. Établissez la balance avec CSS pour les sites Web ou créez des fichiers de styles lorsque vous travaillez sur des projets imprimés.
Pour les conceptions ou les marques à plus grande échelle, écrivez l'échelle et les spécifications dans un guide de style. La création d'une hiérarchie de types nécessite un peu de travail sur le back-end, mais rend l'achèvement de projet plus rapide, plus facile et surtout plus cohérent, à mesure que vous avancez dans les projets suivants.