Comment structurer une hiérarchie typographique efficace

Organiser efficacement le contenu d'un design afin qu'il soit facile à comprendre et à utiliser est l'une des tâches les plus importantes d'un designer. Et comme une grande partie du contenu avec lequel les concepteurs travaillent est basé sur du texte, la création d'une hiérarchie typographique efficace est l'une des choses les plus importantes qu'un concepteur puisse apprendre.

Bien que la pratique et l'expérimentation de la création d'une hiérarchie efficace soient le meilleur moyen de vraiment maîtriser la compétence, il existe un certain nombre de directives que les concepteurs doivent d'abord apprendre, avant de se lancer seuls. Après tout, il est impossible d'enfreindre efficacement les règles sans savoir d'abord ce qu'elles sont.

Qu'est-ce que la hiérarchie typographique ?

Les concepteurs débutants sous-estiment parfois la nécessité d'utiliser une hiérarchie de typographie. Pourtant regardez cet exemple :

Les mêmes informations sont transmises des deux côtés, mais à gauche, il est impossible de dire qu'il y a un en-tête, un sous-en-tête et un corps de texte. Sur la droite, il est immédiatement évident qu'il existe une hiérarchie dans les informations fournies.

La hiérarchie typographique montre au lecteur sur quelle information se concentrer, laquelle est la plus importante et laquelle soutient simplement les points principaux.

Il existe une variété d'éléments qui composent la hiérarchie typographique sur le Web. Ceux-ci inclus:

Taille. La taille est généralement la première chose vers laquelle les nouveaux designers se tournent lorsqu'ils essaient de créer une hiérarchie typographique. Et pour cause : il est immédiatement, facilement identifiable par les lecteurs. Plus grand = plus important, plus petit = moins important. Mais la taille peut devenir une béquille lorsqu'il existe tant d'autres options pour créer une hiérarchie.

Poids. Rendre une police de caractères plus audacieuse ou plus fine est un autre moyen facilement reconnaissable de créer une hiérarchie facilement identifiable même par des non-concepteurs.

Couleur. La couleur est souvent négligée comme moyen de créer une hiérarchie, mais c'est une option fantastique. Même l'utilisation de nuances plus claires et plus foncées d'une couleur donnée peut créer une hiérarchie plus distincte. Créer plus de contraste entre le type et son arrière-plan peut également ajouter à la hiérarchie typographique.

Contraste. Au-delà des couleurs contrastées, le contraste entre les différentes tailles, graisses et styles de caractères est également essentiel pour créer une hiérarchie typographique. Une différence d'un ou deux points seulement dans la taille des caractères ne créera pas suffisamment de contraste pour rendre la hiérarchie apparente à la plupart des utilisateurs. Au lieu de cela, les concepteurs doivent utiliser des tailles, des poids et des styles faciles à distinguer pour créer facilement un contraste entre des éléments tels que les en-têtes ou le corps du texte.

Cas. Bien que la capitalisation du corps du texte ne soit généralement pas une bonne idée du point de vue de la lisibilité, l'utilisation de caractères majuscules dans les titres ou sous-titres peut aider à différencier différents titres ou autres types.

Position et alignement. Le positionnement des titres et des sous-titres, ainsi que d'autres types qu'un concepteur souhaite faire ressortir, peut avoir un impact important sur l'emplacement du type dans une hiérarchie. Le type de centrage, par exemple, a tendance à le faire ressortir. Définir le type en dehors des marges normales d'une page peut également faire ressortir ce type dans la hiérarchie d'une page.

Comment créer une hiérarchie typographique (et organiser visuellement votre conception)

Les concepteurs disposent de nombreuses options lorsqu'il s'agit de créer une hiérarchie typographique. Mais le simple fait de savoir ce qui se passe dans la création d'une hiérarchie n'aidera pas nécessairement les concepteurs à créer une hiérarchie efficace.

L'une des premières choses à considérer est le nombre de niveaux de hiérarchie qu'une conception doit avoir. En règle générale, chaque conception doit inclure trois niveaux de hiérarchie : titre, sous-titre et corps de texte. À partir de là, c'est au concepteur de considérer les niveaux supplémentaires qui pourraient être nécessaires. Ceux-ci peuvent inclure des légendes, des sous-titres supplémentaires, des citations et des méta-informations (pour des éléments tels que les auteurs ou les dates d'un article).

À partir de là, il est essentiel de comprendre comment distinguer les différentes parties de la hiérarchie. Cela devrait aller de soi, mais les titres doivent être plus visibles que les sous-titres, qui doivent être plus visibles que le corps du texte. Les légendes doivent généralement être moins visibles que le corps du texte, et les guillemets doivent se situer quelque part entre le corps du texte et les sous-titres.

Taille des caractères

Les échelles typographiques traditionnelles existent pour aider les concepteurs à démarrer. Mais ce n'est qu'un point de départ, et les concepteurs doivent se sentir libres d'expérimenter différents poids et styles tout en s'écartant de ces échelles traditionnelles. La plupart basent leur échelle sur la taille du corps du texte et se développent à partir de là.

L'échelle typographique classique de The Elements of Typographic Style est familière à la plupart des concepteurs car ils ont tendance à être les valeurs par défaut que la plupart des programmes de traitement de texte proposent lors de la sélection des tailles de police. L'échelle est :

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 et 72.

Il existe d'autres exemples d'échelles typographiques qui suivent diverses équations mathématiques pour calculer les tailles croissantes.

Les concepteurs ont tendance à utiliser par défaut une taille de corps de texte de 12 points, mais l'augmenter à 14 ou 16 (ou même jusqu'à 24) peut entraîner une meilleure lisibilité en fonction de la police utilisée. Le site Web personnel de Jeffrey Zeldman, par exemple, utilise une taille de police de 24 pixels pour le corps du texte, tandis que Vogue.com utilise une taille de corps de texte de 19 pixels.

Avant de finaliser l'échelle réelle, cependant, les concepteurs doivent s'assurer que les polices de caractères utilisées dans la conception ont été finalisées. Différentes polices de caractères peuvent apparaître beaucoup plus grandes ou plus petites, même lorsqu'elles sont techniquement de la "même" taille.

Choisir des polices de caractères coordonnées

Ce qui distingue souvent un design "professionnel" des efforts plus amateurs, c'est la combinaison de polices de caractères. Combiner efficacement des polices de caractères relève à la fois de l'instinct et de la science, mais il existe certaines directives que les concepteurs peuvent suivre pour combiner des polices de différentes familles.

Premièrement, mélanger des empattements avec des sans empattements est beaucoup plus facile que de combiner deux empattements ou deux sans empattements. Mais ce n'est pas aussi simple que de saisir n'importe quel empattement et n'importe quel sans empattement et de les assembler dans un dessin.

Considérez le contexte dans lequel les polices de caractères seront utilisées. Par exemple, si le design est censé être léger et amusant, assurez-vous que les polices de caractères correspondent à cette ambiance. Si la conception est plus sérieuse, les polices de caractères doivent refléter cela. En d'autres termes, l'ambiance de toutes les polices de caractères combinées doit correspondre.

Les concepteurs devraient également utiliser le contraste à leur avantage. Combiner des polices de caractères fines et épaisses fonctionne souvent mieux que d'en combiner deux de poids très similaire.

Recherchez des polices de caractères avec des hauteurs x similaires (la distance entre la ligne de base et la ligne moyenne des lettres minuscules dans une police de caractères). Cela permet d'éviter les conflits entre les polices de caractères. D'autres choses qui aident à prévenir les conflits incluent un crénage et des formes de caractères similaires. Les polices avec des formes de lettres très rondes ne doivent pas être combinées avec des polices plus carrées.

Bien que des directives puissent être utiles pour créer des combinaisons de polices de caractères, rien ne remplacera l'expérimentation et la pratique. Les concepteurs doivent passer du temps à expérimenter les polices de caractères et s'entraîner à les combiner aussi souvent que possible. Trouver quelques combinaisons de polices de secours qui peuvent fonctionner dans une variété de contextes est également utile pour les projets où le budget et les ressources disponibles ne permettent pas une tonne d'essais et d'erreurs.

Avec ces directives en main, les concepteurs peuvent suivre le processus en quatre étapes défini par la source de typographie Web Better Web Type pour créer des combinaisons efficaces :

1. Trouver une police d'ancrage pour votre corps de texte principal
2. Trouvez quelques polices secondaires pour des combinaisons possibles
3. Évaluer les combinaisons
4. Éliminer/choisir les combinaisons de polices

Considérations supplémentaires

Expérimenter avec différents styles et poids après avoir sélectionné les polices de caractères finales peut créer des niveaux de hiérarchie supplémentaires sans avoir à créer des titres principaux de grande taille. Garder les polices de caractères à peu près de la même taille, mais mettre en gras le titre le plus important, tout en mettant le moins important en italique, crée une hiérarchie visuelle définie.

La même chose peut être faite avec la couleur. Un sous-titre avec une couleur d'accent se démarquera plus qu'un sous-titre de la même couleur que le corps du texte. Les concepteurs doivent jouer avec la couleur dans leurs sous-titres pour distinguer le texte le plus important sans se fier uniquement à la taille de la police.

L'espacement peut également être utilisé pour séparer les titres et sous-titres importants. Créer plus d'espace autour des titres afin qu'ils se démarquent du corps du texte qui les accompagne les rend encore plus visibles. En revanche, les sous-titres qui sont espacés de la même manière que le corps du texte sont rendus moins importants.

Même l'espacement entre les caractères peut être utilisé pour créer une hiérarchie. L'espacement des caractères peut rendre une ligne particulière plus visible. Ceci est particulièrement efficace lorsqu'il est combiné avec la capitalisation de ces lettres. Les concepteurs doivent cependant veiller à ne pas en faire trop, car cela peut aussi sembler amateur s'il est trop utilisé.

Conclusion

L'expérimentation et la pratique sont les meilleurs moyens de maîtriser la hiérarchie typographique, mais l'apprentissage de ces directives aidera les concepteurs à partir du bon pied. Apprendre comment la taille, la couleur, l'espacement, le poids et d'autres facteurs contribuent à une hiérarchie efficace est la première étape.

Une fois que ces bases sont établies dans l'esprit (et la pratique) d'un designer, il peut créer plus intuitivement des hiérarchies visuelles qui suivent ou enfreignent les «règles» si nécessaire afin de créer des conceptions uniques qui sont inspirées et ravissantes pour les utilisateurs.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Concevoir pour la lisibilité - Un guide de la typographie Web (avec infographie)
• Comprendre les nuances de la classification des caractères
• Design Foundations - Un guide de la hiérarchie visuelle (avec infographie)
• Styles de caractères pour la conception Web et imprimée
• Boostez votre UX avec une hiérarchie visuelle claire