Quel que soit votre projet – un site web, une marque, un magazine, par exemple –, la hiérarchie typographique est votre fondation, vos éléments de base. C'est elle qui guide votre lecteur à travers votre site web, votre marque ou votre livre. Elle lui indique ce qu'il doit regarder en premier, ce qu'il doit parcourir et ce dont il doit se souvenir. Bien conçue, elle est fluide. Mal conçue, elle peut être extrêmement déroutante.
En bref, la hiérarchie est la façon dont on structure visuellement l'information. Voici comment bien la mettre en œuvre.
Commencez par le texte
Avant de choisir les polices ou les tailles, comprenez bien ce que vous voulez dire. Lisez le contenu. Identifiez les titres, les sous-titres, le corps du texte, les citations, les appels à l'action, les notes de bas de page, etc. Classez-les ensuite par ordre d'importance. Cela constituera votre hiérarchie. Demandez-vous : « Si le lecteur ne regarde qu'un seul élément, lequel devrait-il être ? » Prenez cela comme point de départ.
Utilisez la taille intentionnellement
La taille est le moyen le plus évident de montrer l'importance. Votre texte le plus long doit signaler l'élément le plus important (généralement le titre), suivi des sous-titres, et ainsi de suite.
Par exemple:
(Web) Titre : 40–60 px Sous-titre : 24–36 px Corps : 16–20 px Légende/Note de bas de page : 12–14 px
(Imprimer) Titre : 38–60 pt Sous-titre : 20–36 pt Corps : 10–14 pt Légende/Note de bas de page : 6–8 pt
Pour une hiérarchie typographique claire, nette et ultra-simple, n'en faites pas trop. L'essentiel est la cohérence, plus que le côté dramatique. Commencez par définir le corps du texte, puis adaptez la taille du reste. Si vous souhaitez savoir comment parfaitement justifier le texte, nous avons un autre article pour vous…
Contraste des poids et des styles
Associez différentes graisses de police (légère, normale, grasse) pour mettre en valeur le texte. Le gras peut attirer l'attention sur les idées clés, tandis que le texte plus clair peut signaler des informations secondaires. L'italique est également un excellent moyen de différencier les autres, mais utilisez-le avec parcimonie pour les mises en valeur, les citations ou les apartés ; tout n'a pas besoin d'être incliné.
Assurez-vous d'utiliser des polices avec une variété de poids suffisante (comme PP Neue Montreal , PP Nikkei ou PP Right Grotesk ) pour créer des hiérarchies complexes sans avoir besoin de plusieurs polices.
Jouer avec l'espacement
L'interligne (interligne) améliore la lisibilité des textes volumineux. Pour le corps du texte, visez 120 à 140 % de la taille de votre police. Par exemple, un texte de 12 pts correspond à un interligne d'environ 12 à 14 pts. L'interligne et l'espacement des lettres peuvent également être utiles.
Un espacement serré peut donner aux titres une impression de concision et de dynamisme ; un espacement plus large peut donner au texte une impression d'aération et de formalité. Pour des conseils sur le crénage, consultez notre guide des bases du crénage !
Utilisez la couleur, mais ne comptez pas dessus
La couleur est un excellent moyen de distinguer les éléments, notamment pour l'interface utilisateur ou l'image de marque. Assurez-vous toutefois que votre hiérarchie fonctionne d'abord en noir et blanc. Ajoutez ensuite de la couleur pour renforcer la structure ou mettre en valeur les éléments interactifs ou importants. Les hiérarchies codées par couleur peuvent s'effondrer en raison d'un contraste insuffisant ou de problèmes d'accessibilité.
Limitez vos choix de polices (mais choisissez bien et judicieusement)
Vous n’avez pas besoin de cinq polices pour créer une bonne hiérarchie.
Dans la plupart des cas, une seule famille de styles est largement suffisante. Si vous souhaitez mélanger les styles, essayez d'associer une police à empattement et une police sans empattement (nous avons un autre article pratique pour vous aider). Par exemple, essayez PP Editorial New pour les titres + PP Neue Montreal pour le corps du texte, ou PP Monument + PP Right Gothic .
Répéter, répéter, répéter
Une fois que vous avez défini la taille de votre titre, l'espacement de vos sous-titres et les règles de votre corps de texte, respectez-les. La répétition des styles crée du rythme et confère à votre conception une impression d'intentionnalité et de cohérence, insufflant une dynamique visuelle et conceptuelle à l'ensemble de votre projet. Créez des styles de texte dans votre logiciel et appliquez-les de manière cohérente. Personne ne souhaite avoir neuf tailles de titres subtilement différentes.
Testez votre système
Dézoomez. Plissez les yeux. Faites défiler. Saurez-vous identifier l'essentiel ? Un nouveau venu saura-t-il par où commencer en jetant un coup d'œil à votre design ? La hiérarchie doit être visible sans effort : l'œil doit suivre naturellement la structure que vous avez créée. Si ce n'est pas le cas, revenez en arrière et ajustez la taille, l'épaisseur, l'espacement ou l'alignement jusqu'à obtenir un résultat parfait.
Maintenant, va chercher ton type !
Envie de mettre la théorie en pratique ? Procurez-vous notre Starter Pack Typo et commencez à créer votre propre hiérarchie !
