Share
L’utilisation de la hiérarchie typographique est l’une des techniques les plus importantes pour communiquer efficacement (ou «respecter») un contenu. La hiérarchie typographique est un système d’organisation du type qui établit un ordre d’importance dans les données, permettant au lecteur de trouver facilement ce qu’il recherche et de naviguer dans le contenu. Cela permet de guider le lecteur vers l'endroit où commence et finit une section, tout en permettant à l'utilisateur d'isoler certaines informations en fonction de l'utilisation cohérente du style dans un corps de texte..
“La typographie existe pour honorer le contenu.” - Robert Bringhurst: Les éléments du style typographique
Regardons un exemple de contenu avec et sans hiérarchie conçue.
L'image ci-dessous est une liste de concerts donnés dans la salle en plein air, en bas de la rue, près de chez moi. Par exemple, supposons que le week-end des 15 et 17 août soit gratuit et que je souhaite savoir s'il y a un concert auquel j'aimerais assister à cette époque. Dans le scénario ci-dessous, cette tâche est beaucoup plus difficile qu'elle ne devrait l'être. Sans aucun type de hiérarchie, il faut passer au crible une grande partie des données pour trouver les dates des concerts. Imaginez-vous en train d'essayer de parcourir une liste de 50 concerts.
Ok, alors peut-être que je suis dramatique dans l'exemple, mais nous pouvons rendre cela beaucoup plus facile.
Comme vous pouvez le voir dans l'exemple suivant, le titre, la date et les descriptions sont tous stylisés de manière unique, cohérente et isolée en utilisant l'espacement des paragraphes. Cela nous permet d’isoler facilement les dates (ou les noms de groupes) en fonction du style, et d’obtenir les informations dont nous avons besoin. On dirait que nous allons au spectacle Avett Brothers!
Il convient de souligner que lors de la conception pour le Web, il faut prendre en compte une autre couche. Une page Web elle-même a une hiérarchie qui non seulement est lue, mais contient des interactions. La page dans son ensemble doit être conçue de manière à communiquer clairement à l'utilisateur les actions disponibles, l'accès facile aux informations recherchées, l'achat d'un article, etc..
Pour les besoins de cet article, cependant, nous ne parlons que de la hiérarchie telle qu'elle s'applique au type. Heureusement pour nous, nous avons notre propre balise HTML qui nous permet d’établir sémantiquement une hiérarchie typographique dans les sites Web que nous construisons. Les balises de titre (balises H) nous permettent de spécifier un ordre d'importance dans notre contenu: H1 à H6, H1 étant le plus important, H6 étant le moins important. Les moteurs de recherche utilisent ces données pour interpréter la priorité du contenu d'une page Web..
Mais comment pouvons-nous efficacement coiffer ces balises H de manière à donner un sens à notre contenu? Content que tu aies demandé!
Il existe quelques méthodes de base pour établir une hiérarchie visuelle typographique:
Le plus souvent, ces méthodes sont utilisées en combinaison les unes avec les autres. Dans la liste de concerts présentée précédemment, taille, couleur, espacement et contraste de type ont tous été utilisés. Les combinaisons sont littéralement infinies.
C'est la méthode la plus simple et la plus courante pour établir une hiérarchie.
Utiliser simplement une police plus grasse peut aider à isoler.
La couleur joue un rôle important dans ce que notre œil considère comme primaire et secondaire. En général; couleurs chaudes pop, couleurs plus froides reculer.
Lorsque des sections d’information sont positionnées les unes par rapport aux autres, vous pouvez établir une hiérarchie.
Un excellent moyen d’atteindre la hiérarchie consiste à utiliser des polices de caractères contrastées..
Comme mentionné précédemment, ces méthodes peuvent être plus efficaces lorsqu'elles sont combinées les unes aux autres. C’est la partie la plus amusante: décider quelle combinaison convient le mieux à votre contenu et à votre mise en page.!
L'espacement est l'un des concepts les plus importants dans la conception de caractères. C'est l'un des concepts les plus difficiles à saisir pour les concepteurs débutants, mais il est également l'un des plus évidents visuellement. Un espacement typographique correct est essentiel pour établir une hiérarchie; cela peut faire la différence entre confusion et clarté. Il est utilisé dans la majorité des systèmes hiérarchiques et il est présent dans tous les exemples de cet article..
La règle de proximité in design indique généralement que les éléments liés doivent apparaître plus proches les uns des autres que les éléments qui ne sont pas liés. Cependant, un espacement correct implique plus qu'un simple retour en arrière entre les sections de caractères. En règle générale, un retour brut crée trop d'espace entre le contenu dans le contexte d'un paragraphe. L'espacement des paragraphes - avant ou après - doit être utilisé. J'ai tendance à utiliser un espacement de paragraphe égal à la moitié de la hauteur de ligne (ou du début). Cela permet généralement au groupe de contenu de rester ensemble tout en fournissant une division adéquate du contenu en son sein..
Il est important que la signification d'un contenu particulier soit prise en compte lorsque vous réfléchissez à la hiérarchie. Quel est le sujet du contenu? Qu'est-ce qu'il essaie de communiquer? Si vous ne le savez pas, lisez-le avant de prendre des décisions sur la hiérarchie et le style.
Dans certains scénarios, vous pouvez être libre d'utiliser l'une des méthodes de hiérarchie répertoriées ci-dessus, mais dans d'autres cas, vous pouvez être limité à un certain espace vertical ou horizontal ou être concerné par un contraste de type adéquat sur un arrière-plan. Évaluez les méthodes qui conviennent à la situation et utilisez celles qui ont un sens. L'ancien mantra «plus simple est mieux» s'applique généralement ici. Rappelez-vous que le but est de présenter le contenu de manière organisée.
Maintenant, allez créer de la beauté hiérarchique. Si cela vous intéresse, j'ai fourni quelques ressources intéressantes sur le type, la hiérarchie et le Web:
Accentsconagua