Le type est l’un des éléments les plus importants pour les personnes regardant tout ce que vous concevez. Il doit être clair et lisible et il devrait guider les utilisateurs dans une conception, des éléments les plus importants au moins.
Et cela, en un mot, explique la hiérarchie de la typographie. Mais pour vraiment maîtriser l’art du type, vous devez comprendre comment taper le type dans un dessin afin d’obtenir un impact maximal. Poursuivez votre lecture pour apprendre à maîtriser la hiérarchie de la typographie et à créer un type efficace dans chaque projet.
Qu'est-ce que la hiérarchie typographique?
La hiérarchie typographique est une autre forme de hiérarchie visuelle, une sous-hiérarchie en soi dans un projet de conception global. La hiérarchie typographique présente les lettres de manière à ce que les mots les plus importants soient affichés avec le plus grand impact, afin que les utilisateurs puissent numériser du texte à la recherche d'informations clés.
Sans hiérarchie typographique, chaque lettre, chaque mot et chaque phrase d'un dessin se ressemblent. Pouvez-vous imaginer lire quelque chose où la police, la taille et la couleur sont identiques? Par où commence tu Comment savez-vous ce qui compte le plus?
La hiérarchie typographique crée un contraste entre les éléments. Les concepteurs y parviennent grâce à l’utilisation des caractères, taille, poids, majuscules et minuscules, caractères gras ou italiques, orientation et couleurs. Des combinaisons de ces outils de conception sont utilisées pour créer un type qui tombe dans des couches distinctes.
Niveau primaire
Le niveau primaire de la typographie est tout le gros. C'est des titres et des ponts - également connu sous le nom de? Meubles? - qui attirent les lecteurs dans la conception. C'est le type le plus important du dessin (à moins que vous utilisiez de l'art typographique).
Niveau secondaire
Le niveau secondaire de la typographie est constitué de pépites d’informations scannables qui aident les lecteurs à s’en tenir au design. Cela inclut des éléments tels que les sous-titres, les légendes, les guillemets, les infographies et autres petits blocs de texte qui ajoutent des informations au niveau primaire du texte. La conception de ces blocs de texte est très large, mais elle est généralement beaucoup plus petite que le lettrage au niveau primaire de la typographie.
Niveau tertiaire
Le niveau tertiaire de la typographie est le texte principal de votre conception. Il s'agit souvent d'un des types les plus petits de la conception, mais il doit être suffisamment grand pour être parfaitement lisible par tous les utilisateurs potentiels. La police de caractères doit être simple et cohérente dans sa conception, son espacement et son utilisation globale.
Autres niveaux
Les autres niveaux de typographie incluent les effets appliqués au type dans le tertiaire pour de petites zones d'impact. Des effets tels que le gras, l'italique, le soulignement et la couleur peuvent attirer l'attention sur des zones spécifiques du texte principal. Ces effets fonctionnent mieux lorsqu'ils sont appliqués à un texte de la même taille et du même caractère utilisé au niveau tertiaire. Les effets sont utilisés avec parcimonie et pour quelques mots seulement dans l'ordre. Des exemples d'autres niveaux incluent les liens soulignés, les mots en gras pour l'impact, les italiques ou la couleur pour les souligner.
Hiérarchie dans les projets d'impression
La hiérarchie visuelle dans les projets d'impression est strictement visuelle. En utilisant la taille, la couleur et d’autres effets pour rendre certains types de caractères plus volumineux et plus importants, la mise à l’échelle en conséquence est tout ce que vous avez à faire pour bien commencer.
En regardant l'exemple ci-dessus, étape par étape, vous pouvez voir clairement différents niveaux de hiérarchie typographique et comment cela rend la conception plus facile à lire et plus attrayante visuellement. Vous pouvez appliquer cette même technique à tout projet de conception en mettant l'accent sur des domaines clés.
Le créer
Vous pouvez créer un sens de la hiérarchie de différentes manières. Voici quelques-unes des techniques les plus courantes:
- Sélection de la police: Des polices plus intéressantes peuvent apparaître plus grandes et attirer l’oeil plus rapidement que celles présentant moins d’intrigues visuelles. Lors de l'utilisation de la nouveauté, des scripts ou des polices élaborées, tenez compte des problèmes de lisibilité et assurez-vous que le type est suffisamment grand.
- Taille: Cela va presque sans dire, mais plus le type est gros, plus l'œil sera attiré rapidement. La taille des types doit correspondre à l'ordre d'importance dans la lecture du texte.
- Poids: L'épaisseur des lettres peut donner l'impression que le texte est plus volumineux (caractères gras, gras) ou plus petit (caractères minces ou compressés).
- Lettres majuscules et minuscules: Vous avez entendu dire que l'envoi d'un courrier électronique en majuscules équivaut à crier après quelqu'un. Il en va de même pour toutes les majuscules du design. Méfiez-vous de l'utilisation. Les lettres majuscules apparaissent plus grandes et passent au premier plan, tandis que les lettres minuscules apparaissent plus petites et tombent souvent à l'arrière-plan.
- Audacieux: Les caractères gras sont un bon point d’accent pour un mot ou une phrase. Cela fonctionne particulièrement bien dans le type tertiaire.
- Italique: Les lettres en italique peuvent mettre en évidence un mot ou une phrase de manière moins dramatique et plus subtile que les caractères gras. Cela fonctionne particulièrement bien dans le type tertiaire.
- Orientation: Tourner les lettres sur le côté, à l'envers ou selon toute autre orientation horizontale peut avoir un attrait visuel immédiat, car elles sont placées d'une manière différente de celle attendue. Cela peut bien fonctionner pour des mots ou des phrases courts au niveau primaire du texte.
- Couleur: Ajouter de la couleur à des lettres qui n’ont généralement pas de couleur crée un intérêt spécifique immédiat. Cet effet peut fonctionner à tout niveau de texte, mais doit être délibéré pour ne pas créer de problèmes de lisibilité ou de confusion.
- Placement: Où le texte est situé sur la toile peut également établir une hiérarchie. En général, vous lisez de haut en bas (une hiérarchie naturelle), mais cela peut être changé en utilisant certaines des techniques ci-dessus.
Hiérarchie dans les projets numériques
Tous les outils que vous utilisez dans les projets d'impression s'appliquent également aux projets numériques, avec quelques ajouts. La hiérarchie typographique numérique doit également inclure la prise en compte de HTML dans la création de type Web.Ce niveau de réflexion supplémentaire garantit que vos niveaux visuels seront traduits pour les autres utilisateurs à l'écran.
Le créer
Veillez à utiliser les conventions courantes, notamment l'en-tête, le corps et les styles en gras lorsque vous travaillez sur des projets qui seront publiés en ligne. Chacune de ces définitions de style couramment utilisées relève de carottes () dans le code HTML.
- Titre (titre): Définit le titre du document pour les moteurs de balayage Web et les utilisateurs.
- Corps corps): Définit le corps du texte dans un document.
- En-têtes (h1 à h6): Définit différentes couches de styles d'en-tête. H1 est généralement le plus grand et le plus important, passant par H6. Vous devez seulement en utiliser autant que vous le souhaitez.
- Gras (fort): Définit un texte plus lourd et plus important.
- Italique (em): Définit le texte avec une inclinaison pour mettre l'accent.
Hiérarchie et convivialité
En ce qui concerne les applications mobiles, vous devez penser à la hiérarchie visuelle typographique, à la hiérarchie typographique HTML et à la convivialité dans la hiérarchie typographique. Non seulement le texte doit avoir une belle apparence et fonctionner correctement, mais il doit également être conçu de manière à ce que les utilisateurs sachent quoi faire avec et qu'il interagisse comme prévu.
Cette typographie basée sur l'action comprend des éléments clés pour les concepteurs. Le type doit être suffisamment grand pour être tapé, espacé de manière à ce que chaque élément pouvant être tapé soit clairement défini et que les éléments utilisables aient une sorte de définition visuelle (telle qu'un bouton).
Le créer
La chose à garder à l’esprit lors de la création d’une hiérarchie typographique utilisable est de séparer les éléments de type avec lesquels les utilisateurs vont interagir de ceux avec lesquels ils ne vont pas et les uns des autres. Les considérations importantes comprennent:
- Espace: Donnez à chaque élément supposé être touché ou exploité suffisamment d'espace. Considérez la taille de l'espace et la quantité d'espace nécessaire pour qu'un doigt puisse le toucher. Les utilisateurs peuvent être rapidement frustrés si le type est si proche que le mauvais élément est cliqué.
- Couleur: Créer une palette de couleurs pour la facilité d'utilisation. Envisagez de faire en sorte que chaque mot destiné au contact ait une couleur différente de celle du texte principal.
- Ombres: Les ombres portées sont un indicateur commun d’un bouton sur lequel il est possible d’appuyer.
- Les frontières: Envisagez d'ajouter des bordures aux éléments indépendants avec lesquels vous souhaitez que les utilisateurs interagissent. Assurez-vous qu'ils sont séparés du fond. (Les "boutons fantômes" en sont un bon exemple, comme dans l'exemple du site Web de Spacecraft ci-dessus.)
- Animation: Déplacer un texte, bien que difficile à utiliser, peut être un moyen rapide d'attirer l'attention sur certains mots.
- Direction: N'oubliez pas de dire aux utilisateurs quoi faire à l'écran, du toucher au défilement, en passant par les appels à l'action.
Conclusion
Il est fort probable que vous concevez avec une sorte de hiérarchie typographique même sans y penser. Toutefois, le fait d’aligner le type de texte d’une manière globale peut améliorer votre conception globale.
Utilisez la hiérarchie typographique pour ajouter de l’emphase, de l’impact et créer des appels à des actions que les utilisateurs peuvent voir et auxquelles ils peuvent réagir rapidement. N'oubliez pas de penser à la lisibilité, à la facilité d'analyse et à la compréhension générale lors de la prise de décision concernant un caractère, sa taille et ses effets. Vos lecteurs (ou utilisateurs) vous remercieront.