9 conseils pour une meilleure hiérarchie typographique
Chaque projet nécessite un système et une hiérarchie pour les éléments de texte. Pensez simplement à tous les petits morceaux de texte qui sont utilisés tout au long d'une conception - titres, corps de texte, éléments de navigation, informations légales, légendes, etc.
Mais comment créez-vous cette hiérarchie pour que chaque élément de texte passe sans encombre au suivant? Aujourd'hui, nous vous guiderons pas à pas à travers la construction d'un système de hiérarchie typographique qui peut être utilisé pour presque tous les projets de conception. (Et nous associons les conseils à de beaux exemples de typographie pour vous aider à rassembler un peu d'inspiration.)
Explorez Envato Elements
1. Commencez avec une copie confortable du corps
Bien que vous souhaitiez peut-être commencer par un traitement de titre cool, le point de départ est en fait au milieu. Établissez d'abord une police, une taille et un espacement confortables pour la copie du corps principal.
Cela devrait avoir un sens car c'est la majeure partie du texte dans 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 pour le corps du texte se situe entre 50 et 60 caractères par ligne (ou colonne). Cette ligne directrice vous aidera à définir une échelle pour le texte qui est lisible et qui tient compte de différents types de polices de caractères (telles que normal contre condensé contre dalle).
2. Construisez une balance
Une fois que vous savez à quoi ressemblera la copie du corps, vous pouvez définir une échelle autour de tous les autres éléments de texte dans la conception. Il peut être facile d'oublier certains blocs de texte; faire une liste de chaque utilisation différente du texte dans votre projet.
- Copie du corps
- Titres
- Sous-titres
- Légendes
- Block quotes
- Éléments de navigation
- Informations sur le pied de page
- Copie légale ou avis de non-responsabilité
Créez maintenant une échelle qui dicte la police de caractères, la plage de taille et l'utilisation de chacun de ces éléments. (Et intégrez-le dans votre CSS pour les sites Web ou les fichiers de styles pour les documents de travail.) Il existe plusieurs façons de créer l'échelle, mais le pourcentage de taille peut être un bon point de départ. Vous pouvez également établir une échelle basée sur les mathématiques derrière une grille de référence ou visuellement.
Voici une échelle simple pour commencer:
- Taille de la copie du corps
- Les titres sont multipliés par 220%
- Les sous-titres correspondent à la taille du corps multiplié par 150%
- Les éléments de navigation sont multipliés par 80% par la taille du corps
- Le pied de page / la copie légale est la taille du corps multipliée par 80%
3. Pensez du plus grand au plus petit, de haut en bas
Cette règle est assez simple: le texte le plus grand et le plus important doit être en haut et les tailles doivent 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 pour développer une hiérarchie typographique. (Qui va vraiment faire défiler jusqu'à la fin d'une page Web pour le titre, puis revenir en haut 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 incluent le début (ou la hauteur de ligne), les retraits (ou non), les enveloppements et les gouttières et l'alignement.
Considérez les proportions d'espacement qui reflètent l'échelle utilisée pour dimensionner le texte. La taille de la toile est également très importante ici également. Les grandes toiles sont lisibles avec un espacement plus serré que les petites toiles. (C'est pourquoi de nombreux projets ont des spécifications d'espacement beaucoup plus lâches pour les appareils tels que les téléphones mobiles et des règles plus strictes pour les ordinateurs de bureau.)
Tout comme avec 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 constant et propre est l'une des petites choses qui peuvent faire ou défaire une conception.
5. Définissez des règles pour le gras et l'italique
Bien que le gras et l'italique ne soient pas des éléments ou des tailles de types différents, l'utilisation est importante. (Imaginez simplement à quoi ressemblera le dessin si tous les autres mots sont en gras.)
Cela rend les directives pour les caractères gras et italiques particulièrement importantes. Plutôt que de regarder la taille ou l'espace, la considération est beaucoup plus contextuelle. Les spécifications d'utilisation peuvent indiquer que seuls autant de mots ou de phrases (ou de mots ou de phrases spécifiques) peuvent bénéficier de ce traitement. C'est une erreur courante de sur-utiliser le gras et l'italique; en cas de doute, ne l'utilisez pas.
6. Créez un «Z»
Le modèle de lecture commun a la forme d'un Z. Que vous conceviez pour une langue qui lit de gauche à droite ou de droite à gauche (retournez le Z), les utilisateurs liront d'un coin à l'autre de la ligne jusqu'à la fin, puis reviendront à le coin de départ et à travers la ligne dans un motif répétitif.
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 point que l'œil atterrit lors de la lecture.
7. Tenez compte du poids visuel
La taille n'est pas le seul facteur quand il s'agit de la taille d'un élément de texte à l'écran. Le poids visuel est tout aussi important et peut avoir un impact sur la façon dont vous créez une échelle typographique.
Les polices de caractères seront plus grandes lorsque:
- Ils comprennent des poids de course épais
- Ils comprennent des fioritures ou des embellissements
- Ils sont larges
- Ce sont des polices de base de nouveauté
- Ils ont des hauteurs x plus hautes
- Ils sont utilisés comme tous les bouchons
Les polices de caractères seront plus petites lorsque:
- Ils sont condensés
- Ils comprennent des largeurs de course légères ou minces
- Il y a peu de contraste avec le fond
- Ils sont utilisés avec des lettres minuscules
8. Créez des accents
Il y a certains mots que vous voudrez mettre en évidence qui sortent un peu de l'échelle typographique normale. L'ajout d'un accent au lettrage peut le faire ressortir sans avoir à ajuster la taille ou la police réelle.
Les accents communs incluent:
- Couleur
- Souligner
- Surligner
- Texte dans un bouton ou une forme
- Animation simple
- Changement de cas 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 avoir le plus d'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 en jeu. Il suffit de regarder l'échelle sur l'écran. Comment le texte vous ressemble-t-il? Y a-t-il un flux logique? Ç'est facile a lire?
Si cela ne vous semble d'aucune façon, envisagez de faire des ajustements à l'échelle. Selon la police de caractères que vous utilisez et d'autres éléments de la conception - des images aux couleurs en passant par le contraste - l'échelle nécessitera un ajustement 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 aussi d'autres yeux. Créez une ou deux versions avec des hiérarchies différentes pour voir quelle version obtient la meilleure réponse. Le design est un art visuel, faisant du «test de la vue» 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 l'échelle avec CSS pour les sites Web ou créez des fichiers de styles lorsque vous travaillez sur des projets imprimés.
Pour les conceptions à plus grande échelle ou l'image de marque, mettez l'échelle et les spécifications par écrit 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 du projet plus rapide, plus facile et pour ne pas dire plus cohérent, à mesure que vous avancez avec les projets suivants.
