La hiérarchie visuelle est un élément important de tout projet de conception. Il indique aux gens où regarder et quels éléments de l'écran ou de la page imprimée sont les plus importants. La hiérarchie donne aux lecteurs une idée de la façon de lire des documents du début à la fin, avec des indices et des flux visuels.
Bien que vous puissiez créer une hiérarchie visuelle à l’aide de différents outils, nous allons aujourd’hui étudier des moyens de créer une structure avec une simple typographie. (Et regardez les images utilisées tout au long de ce post; ce sont toutes des exemples de la grande hiérarchie de types en action.)
Pourquoi la hiérarchie est-elle importante?
La hiérarchie des types organise et donne un ordre aux éléments de texte de votre conception. Tout comme les concepteurs et les développeurs Web utilisent des balises d’en-tête - h1, h2, h3, etc. - pour organiser l’importance du texte, la hiérarchie visuelle utilise des repères visuels. En outre, la hiérarchie des types aide les lecteurs à numériser du texte et à lire les bits de type plus rapidement dans des fragments qui se ressemblent.
En règle générale, les lecteurs de langue anglaise commencent en haut à gauche et lisent de haut en bas. Le type est souvent organisé pour refléter ce comportement.En règle générale, les lecteurs de langue anglaise commencent en haut à gauche et lisent de haut en bas. Le type est souvent organisé pour refléter ce comportement. Mais que se passe-t-il si le texte le plus gros et le plus audacieux se trouve au milieu de la page? Souvent, un lecteur commence par là, puis retourne en haut de la page et continue à lire normalement.
La hiérarchie est importante car elle permet au concepteur de déterminer ce que quelqu'un lira probablement en premier, en second, etc. De ce fait, le concepteur peut créer un type de manière à ce qu'il sache quelles informations sont susceptibles d'être reçues et dans quel ordre.
Comme la création d'une hiérarchie est importante pour les concepteurs, elle l'est tout autant pour les lecteurs. Une bonne hiérarchie visuelle nous dit ce qui est important, rendant la lecture beaucoup plus facile. Par exemple, vous savez que le titre est la partie la plus importante d'une histoire ou d'un article, car il s'agit de la plus grande, suivie de sous-titres, puis du corps du texte. Pour des raisons de numérisation, vous pouvez lire le gros texte pour avoir une idée de l’intérêt de l’article avant d’investir beaucoup de temps dans la copie.
Comment créer une hiérarchie
Il n’existe pas de solution en une étape pour créer une hiérarchie visuelle avec du texte. Il peut être créé avec la taille, le poids, la couleur, la texture, les choix et combinaisons de caractères, l'orientation et l'espace, ou une combinaison de ces outils.
Taille
L'un des moyens les plus simples d'établir une hiérarchie avec le type consiste à utiliser la taille. Les lecteurs verront souvent le type le plus gros en premier et commenceront à lire à partir de là.
En ce qui concerne la taille, l'échelle est tout aussi importante. Pour créer une hiérarchie distincte, les tailles doivent présenter une variance significative par rapport à un autre type sur la page. Il est important de garder à l’esprit que des polices de caractères différentes peuvent changer d’échelle. Par conséquent, changer la taille des points n’est peut-être pas suffisant; vous devez examiner la manière dont les polices de caractères fonctionnent ensemble pour assurer un équilibre approprié entre la taille et l'échelle.
Alors, comment commencez-vous à créer la bonne taille et la bonne échelle de type pour un projet? Commencez par le texte du corps principal et par la suite. Et pour les éléments de texte utilisés pour attirer vraiment les gens, allez gros.
Voici quelques pourcentages pour vous aider à démarrer:
- Copie du corps principal (14 points)
- En-têtes principaux: 250% de plus que la copie du corps principal (35 points)
- En-têtes secondaires: 175% de plus que la copie du corps principal (25 points)
- Éléments de navigation: 165% de plus que la copie du corps principal (23 points)
- Navigation ou menus secondaires: 140% de plus que la copie principale (20 points)
Polices
Après la taille, les polices de caractères constituent l'élément le plus utilisé en termes de création d'une hiérarchie typographique. La clé est d’avoir un contraste entre les polices de caractères. (C’est une des raisons pour lesquelles les concepteurs choisissent souvent un caractère serif et un sans serif pour un projet.)
Pour obtenir les meilleures combinaisons, recherchez des polices de caractères différents par leur tonalité ou leur toucher. Si vous utilisez des caractères arrondis, utilisez par exemple des formes de lettre avec des formes similaires dans les o. Optez pour des polices avec des hauteurs x similaires si les styles seront utilisés les uns avec les autres tout au long du projet.
Poids
L'épaisseur des traits dans le type sélectionné pour un projet peut également créer une hiérarchie. Plus la police est épaisse, plus elle apparaît audacieuse et grosse. Les polices de caractères claires, condensées et fines semblent souvent plus petites qu'elles ne le sont réellement. Les caractères gras, ultra et en tête de marteau peuvent apparaître plus gros que la taille en points.
La taille ou la taille des caractères apparaissant en fonction du poids dépend également des autres types de caractères utilisés dans le projet. L'association de polices de caractères épaisses et minces crée immédiatement un sentiment de hiérarchie, le style épais revêtant une apparence plus importante (souvent même s'il est en réalité plus petit à l'écran).
Couleur
L'utilisation de la couleur peut également ajouter de l'importance et augmenter le poids du texte. Pensez à quelques-unes des règles de couleur que vous avez apprises en tant qu'enfant: les couleurs chaudes (rouges, jaunes, brunes) auront plus d'éclat tandis que les couleurs froides (bleu, violet et gris) s'estomperont.
Lorsque vous utilisez des couleurs pour établir une hiérarchie, prenez en compte les teintes utilisées pour le premier plan, le type et l'arrière-plan. Le contraste des couleurs jouera également un rôle important. Les couleurs les plus saturées ou les plus brillantes vont souvent? Se soulever? hors de l'écran contre des tonalités plus sourdes.
Orientation
La façon dont le test repose dans une disposition suivante par rapport à un autre texte peut avoir une incidence sur la hiérarchie globale. Généralement, la plupart du texte est orienté horizontalement en ligne droite sur l’écran. Mais qu'est-ce que vous placez le texte verticalement?
Ce changement d'orientation mettra l'accent sur ces mots ou ce bloc de texte, le faisant apparaître comme l'élément le plus important. L'inclinaison, la torsion ou toute autre modification de la forme du texte peuvent produire le même effet. (Il convient de noter que la plupart des concepteurs évitent souvent ces "astuces", sauf dans quelques cas.)
Espace
Les espaces peuvent rendre les caractères plus gros et plus lisibles. Le manque d'espace peut donner l'impression qu'il est plus étroit et plus petit. Utilisez l’espace à votre avantage lorsque vous créez un sens de la hiérarchie.
Pensez à l'espace que vous utilisez entre les lignes de texte. Pensez au crénage pour les plus grands styles. Pensez à la relation spatiale entre les lettres et le bord de la toile. Pensez aux relations entre les types de tailles, de styles et de couleurs différents.
Chaque espace peut avoir un impact sur votre échelle hiérarchique. Conservez les types similaires groupés plus près les uns des autres et avec moins d’espace que des éléments non liés. Et concevez votre espace pour que le texte tombe dans un ordre distinct. Les éléments de texte plus gros, plus audacieux et plus lumineux nécessitent souvent plus d'espace que des blocs de texte plus petits et plus simples.
Texture
La texture est un concept vague en termes de type. Non, nous ne parlons pas de mettre une texture à l'intérieur du lettrage; nous nous référons à la création d'un motif de texture avec la façon dont les lettres et les mots reposent sur la page ou l'écran.
Au sein de blocs de texte, vous vous retrouvez avec une apparence à motifs. Pour établir plus de hiérarchie, casser le modèle. Ceci peut être accompli en utilisant l'un des outils déjà mentionnés ou en modifiant quelque chose d'aussi simple que l'alignement d'un seul bloc de texte.
Cette modification de la texture générale du texte peut avoir un impact réel sur sa perception. Faites attention aux trop nombreux changements de texture, car ils peuvent être gênants s'ils sont utilisés fréquemment.
3 (ou 4) niveaux de type
Bien que certains projets nécessitent des hiérarchies complexes, la plupart des conceptions peuvent réussir avec trois niveaux de hiérarchie de typographie. Ces niveaux sont de type primaire, de type secondaire et de type tertiaire. (Dans cette échelle, je n'inclus pas les bannières ni le type de logo; ils seraient considérés comme un quatrième niveau de typographie? Art?)
Type primaire est souvent la typographie sur la page qui a le plus de poids visuel, telle que les en-têtes principaux ou les guillemets. Le but du type primaire est d’amener les lecteurs à la conception générale.
Type secondaire est tout ce qui n'est pas le contenu principal. Cela peut inclure des légendes, des sous-titres et des éléments de type navigation ou statique.
Type tertiaire est la copie principale du corps. Il y a une chose à retenir de la copie tertiaire: elle doit être lisible. Peu d’autres questions importent en ce qui concerne le style de conception de ce type.
Type d'art est le type utilisé comme élément graphique. Il tombe en dehors du domaine du type et est beaucoup plus visuel. Cela peut inclure des bannières ou des logos. Il peut s'agir d'images composées de lettres ou de tout autre élément typographique très élaboré. En règle générale, le type d'art consiste en un seul mot de lettre et ne fait pas partie de ce que les gens sont censés lire? dans la conception globale.
Conclusion
Le type d'organisation peut être à la fois amusant et stimulant. En combinant des techniques et différents effets et styles de type, vous pouvez facilement obtenir un flux avec uniquement le type.
N'oubliez pas de prendre en compte les relations entre la taille, le poids, la couleur, la texture, les choix et combinaisons de caractères, l'orientation et l'espace, lors de la création d'un contour. Pensez à la façon dont les gens lisent et digèrent les informations lors de l’utilisation de ces techniques pour que la copie soit organisée et qu’elle se présente sous un format logique pour la conception typographique la plus utilisable.