Dans cet article, vous apprendrez à hiérarchiser les informations d’un texte en hiérarchie typographique.
typographie c’est comme une deuxième langue qui communique à un niveau plus subtil au-delà de vos mots réels. Le contenu réel est ce que vous dites, mais la typographie est la première impression de la façon dont vous le dites.
La typographie crée une expérience avant que les utilisateurs aient lu un seul mot ou cliqué sur un bouton de menu. La typographie ne se contente pas de raconter une histoire, elle crée une atmosphère et une réponse émotionnelle de la même manière qu’un ton de voix. Si tous les éléments visuels de votre conception influencent l’expérience utilisateur, la typographie aura bien sûr un impact important, en particulier dans les conceptions à forte teneur en contenu. Ongle typographie pauvres ou absents seront aussi répugnants pour les lecteurs que des erreurs grammaticales évidentes.
Il existe de nombreuses règles concernant les meilleures pratiques de typographie, consultez notre publication sur les règles de typographie pour des informations plus complètes sur la typographie.
Dans cet article, nous parlerons de comment utiliser la typographie au maximum. Nous commencerons par explorer les niveaux de Hiérarchie typographique, puis nous plongerons dans les éléments individuels.
La hiérarchie typographique c’est un sous-ensemble dans la hiérarchie visuelle. La hiérarchie typographique organise les lettres de manière à ce que les mots importants ressortent facilement pour les lecteurs à la recherche d’informations.
Il est facile de voir quelles parties sont les plus importantes dans cet exemple sur le site Web de Venus Story.
Sans cette hiérarchie, toutes les lettres et tous les mots d’un dessin seraient identiques. Une mise en page serait aussi attrayante visuellement qu’une invite de commande MS DOS. En règle générale, le concepteur Carrie Cousins recommande que votre police de caractères prenne en charge au moins trois niveaux de hiérarchie.
Essayez de façonner votre typographie à ces niveaux :
1. Niveau primaire
Le texte le plus visible sur la page, généralement plus grand et de couleur plus claire que les autres calques de texte. Parce qu’il est si puissant, ce niveau devrait être rare; réservez-le uniquement aux titres et aux couvertures (appelés « en-têtes »).
2. Niveau secondaire
Moins visible que le niveau parent, mais plus visible que le contenu principal, le niveau enfant gère tout ce qui se trouve entre les deux. Ce niveau comporte des éléments minimaux mais distincts en taille et en couleur, et comprend généralement des sous-titres, des légendes, des extraits de citations, des infographies ou des blocs de texte de support séparés du contenu principal.
3. Niveau tertiaire
C’est le contenu principal, le plus commun et le moins perceptible. Il doit être simple et non tape-à-l’œil : le but des autres couches est d’attirer l’attention ; le but de cette couche est d’encourager le lecteur à s’immerger dans le texte et donc à avoir moins de distractions.
4. Autres niveaux
Des niveaux de hiérarchie plus petits peuvent être créés en appliquant avec parcimonie des effets d’italique, de couleur, de gras, de soulignement et d’autres effets au type tertiaire. Ces niveaux peuvent inclure des liens soulignés, des mots en gras pour mettre l’accent dans les paragraphes, etc. Le texte qui apparaît sur les bannières, les logos ou d’autres graphiques d’arrière-plan entre également dans cette catégorie.
Exemple de hiérarchie visuelle
Pour illustrer la séparation des couches utilisée correctement, regardons l’exemple suivant.
La typographie comporte ici trois couches distinctes pour expliquer clairement les éléments de chaque pièce sans rien expliquer :
- Le titre est évident, mais pourquoi est-il évident ? Le texte est plus gros (taille), plus gras (poids) et positionné en haut à gauche, là où les yeux des spectateurs vont en premier (position).
- Le deuxième niveau est la date de publication, définie dans une taille et une couleur différentes du reste du texte, et également en italique pour donner plus de distinction.
- Le troisième niveau, l’aperçu de l’article, est sans particularité. Comparé aux autres couches, cela peut sembler simple, mais c’est pour que les lecteurs ne soient pas distraits lorsqu’ils essaient d’apprécier le contenu réel.
Comme d’autres domaines du design, la typographie suit sa propre hiérarchie structurelle. Connaître la hiérarchie typographique, c’est comme savoir utiliser la typographie, en particulier savoir donner la priorité à certains mots par rapport à d’autres.
En manipulant les champs ci-dessous, vous contrôlerez mieux la typographie et donc mieux contrôlerez où vont les yeux de vos utilisateurs.
1. Taille
L’unité de base de la hiérarchie typographique. Des textes de différentes tailles attirent différents niveaux d’attention.
2. Poids
L’épaisseur du texte, qui est plus facilement augmentée en gras. Bien que ce soit plus subtil que la taille, c’est toujours un moyen facile de faire ressortir le texte. Le gras est particulièrement efficace pour ajouter du poids au type tertiaire.
3. Italique
Les lettres en italique attirent l’attention d’une manière moins dramatique que le gras. Parce que c’est une touche subtile, cela fonctionne bien pour le type tertiaire.
4. Capitalisation
Tout comme les e-mails écrits en majuscules sonnent comme s’ils criaient, il en va de même pour la typographie Web. Soyez toujours prudent lorsque vous mettez des lettres en majuscule, car elles apparaissent disproportionnellement grandes et viennent au premier plan.
5.couleur
Passons maintenant aux facteurs complexes. Les couleurs chaudes (rouge, orange, jaune) ont tendance à attirer plus l’attention que les couleurs froides (bleu, violet), surtout si le texte aux couleurs chaudes est placé sur un arrière-plan aux couleurs froides. Le contraste des couleurs est également important, car les couleurs saturées ou vives ressortent plus que les couleurs ternes.
6. Contraste
Le contraste entre l’un de ces facteurs (taille, poids ou couleur) attirera l’attention. Des polices contrastées pour les titres avec le corps du texte aident à créer une hiérarchie.
7. Espace
L’espace blanc peut faire paraître le texte plus grand (et donc plus lisible). Le manque d’espace rend le texte plus serré et plus petit. Chaque espace affecte votre hiérarchie, du simple crénage à la relation entre les mots et le bord de l’écran.
8. Poste
« Read On » aurait moins d’impact s’il était plus éloigné.
La proximité peut être un moyen rapide et facile de transmettre du sens.
9. Orientation
Mélanger l’orientation des mots et des lettres ajoutera plus d’impact à la composition.
Retourner les lettres et les mots sur le côté, en diagonale ou à l’envers augmente l’attrait visuel. L’effet crée un attrait visuel saisissant pour le lecteur. Cela fonctionne particulièrement bien pour mettre l’accent sur des mots/phrases courts dans le texte principal. Incliner, faire pivoter en mode portrait et d’autres méthodes concentrent immédiatement l’utilisateur sur le texte affecté.
10. Textures
Différents éléments typographiques ajoutent de la texture à la composition.
La texture est très subjective, ce qui en fait l’un des éléments les plus difficiles à maîtriser. Cela ne fait pas référence à la texture des lettres elles-mêmes, mais à la texture créée à travers les motifs typographiques sur la page. Chaque bloc de texte produit son propre motif, donc pour créer une texture, cassez le motif en modifiant l’un des autres éléments. Appliquez-le avec parcimonie, sinon cela devient une distraction.
Les bases de la typographie de A à Z
Découvrez toutes les possibilités de la typographie pour transmettre et valoriser votre message.
Conception d’une typographie numérique de A à Z
Apprenez à concevoir une police de caractères à partir de zéro avec les fonctionnalités Glyphs, Illustrator et OpenType.
tu as aimé ce que tu as lu? Partage-le avec tes amis.
Plus d’articles pour les créateurs :