La hiéarchie du texte est importante dans un design car elle permet au lecteur de comprendre, en un instant, l'ordre d'importance de l'information présentée. Cet élément est d'égale importance à tout autre élément de design car il permet à l'information d'être transmise facilement, de lire et de comprendre plus facilement, de guider le lecteur d'un élément d'information à l'autre avec une aisance visuelle.
Avec une hiérachie de texte bien pensée, un design final sera soigné et professionnel et sera plus efficace pour inciter les lecteurs à lire jusqu'au bout.
Où la hiérarchie d'un texte est-elle importante ?
Une hiérarchie de texte est efficace quasiment partout. Vous recherchez des en-têtes, des cartes de visite, un web design, ou tout autre design avec du texte, une hiérarchie de texte est recommendée. Par exemple, les interfaces utilisateur s'appuient sur une hiérarchie de texte pour rendre les call to actions clairs, la hiérarchie visuelle est essentielle pour aider les utilisateurs à naviguer un site, et les posters ont une hiérachie visuelle pour attirer l'attention des passants pour qu'ils regardent de plus près et lisent les informations. Chaque fois qu'un client vous donne un brief qui demande du contenu dans son design, la hiérarchie de texte entre en jeu.
Que prendre en compte dans le design d'éléments de texte ?
Premièrement, il est important de comprendre le contenu qu'on vous a donné et ce qu'il essaye de transmettre. Un bon designer s'intéresse à davantage que l'esthétique, il doit comprendre le but du contenu et essayer de transmettre sa signification par le design. Recherchez les informations les plus importantes, le sujet, et les mots et lettres pouvant créer des connections intéressantes.
Ensuite, mettez-vous à la place du public visé et pensez comment il va consommer l'information. Le texte doit être traité comme un élément visuel, tout comme la psychologie de la couleur, les éléments de la typographie ont des significations métaphoriques. Par exemple, une police large, en gras, et en majuscules attire le regard, mais peut signifier un danger.
Quand vous choisissez une police, pensez comment elle sera interprétée. Assurez-vous qu'elle soit lisible. Si une police décorative peut convenir à la marque d'un client, elle peut être difficile à lire dans un format plus petit.
La clé pour créer une hiérarchie de texte est de choisir des éléments qui contrastent avec le texte ce qui permet de différencier les sections. Nous verrons ces éléments un peu plus tard. Tout d'abord, intéressons nous à la hiérarchie typographique de base à partir de laquelle travailler et qui a trois niveaux.
Les trois niveaux de la hiérarchie typographique
Imaginez un journal. Il y a trois sections disctinctes qui créent une hiérarchie visuelle de texte : le titre, sous-titre et le corps. Avoir ces sections distinctes rend le design visuellement stimulant et facile à naviguer, permettant aux lecteurs de scanner rapidement l'information. Cette hiérarchie à trois niveaux est un concept de design classic pouvant être incorporé dans tous types de design.
Le Titre
Premièrement, le titre est là où l'information la plus importante doit se trouver pour attirer celui qui la voit. Sans titre attractif, les lecteurs n'iront jamais voir les prochaines sections. Ce doit être l'élément le plus stimulant visuellement avec (en général) une police en gras.
Le Sous-Titre
Ensuite, le sous-titre rend bien par rapport au niveau du titre car il divise le design en sections. Il ne doit pas ressortir autant que le titre mais doit être plus visible que le corps du texte. C'est là où vous offrez au lecteur des informations supplémentaires pour développer sur le titre et intéresser davantage le public, sans en dire trop. Vous voulez les attirer pour qu'ils lisent le contenu.
Le Corps
Enfin, le texte du corps. En général, cette partie du contenu est lourde en texte, c'est pourquoi un titre et un sous-titre sont importants pour pousser le lecteur à lire davantage. Le titre et le sous-titre doivent attirer le lecteur, le motiver à investir du temps à lire l'article. Puisque cette partie a le plus de contenu, assurez-vous qu'elle soit facile à lire et plus petite en taille (comparé aux deux autres niveaux).
Maintenant que vous connaissez les trois niveaux de hiérarchie, étudions les trois manières de créer une hiérachie de texte.
Eléments de hiérarchie de texte
Pour créer une hiérarchie avec les éléments de texte, vous pouvez changer davantage que simplement la taille de police. Prenez en compte tous les éléments suivants.
Taille
La taille, bien sûr, est un bon outil. Plus la taille du texte est grande, plus elle se distingue du reste du texte. Distinguez ce qui doit être vu du lecteur et dimensionnez en fonction. Divisez le contenu : Y a-t-il du contenu lourd qui devrait être plus petit que le titre ? Dans la culture occidentale, la norme est de lire de gauche à droite, de haut en bas. De même, la hiérarchie du texte commence avec une police plus grande dans le titre qui diminue une fois arrivé au corps du texte.
Lettre
Utiliser les majuscules à petite dose peut s'avérer un moyen efficace d'attirer l' attention sur du contenu important, surtout dans les titres et sous-titres. Mais attention car n'utiliser que des lettres en majuscule réduit la lisibilité donc évitez de le faire pour le corps du texte ou de grandes sections. L'utilisation de capitales dépend de votre design global et de ce que vous essayez de transmettre.
Largeur
La largeur est la légèreté ou lourdeur visuelle d'une police. La largeur des lettres peut rendre un texte plus grand et donc plus important, quand une police plus légère peut faire que le texte semble moins important.
Couleur
La couleur peut servir à souligner ou minimiser un élément. Pensez à utiliser la couleur de la même manière que vous le feriez pour tout autre élément de design. Les couleurs chaudes tendent à ressortir davantage que les froides, mais il est aussi important de prendre en compte les contrastes et la lisibilité. N'utilisez pas une couleur de manière excessive sauf si vous voulez faire une annonce - par exemple, une couleur différente pour le titre.
Utiliser des couleurs différentes dans le contenu du texte entrainera une perte d'efficacité et crée souvent une confusion visuelle.
Position
Séparer les sections d'information et les positionner en fonction rend un design plus facile à lire. Souvenez-vous de placer l'information la plus importante à une place principale. Placez ensemble tous les éléments qui sont liés et séparez visuellement les autres pour organiser le contenu.
Alignement
L'alignement du texte peut affecter visuellement la hiérarchie. Avoir le titre centré quand le contenu du corps est placé à gauche (ce qui est plus facile à lire) crée un effet de prominence et d'importance. L'attention sera naturellement portée sur le titre avant le reste du texte.
Police
Essayez de jouer avec les différentes polices. En général, les polices larges et décoratives sont utilisées pour les titres pour créer un impact visuel. Cependant, parfois même une simple police ultra fine marchera. Comme le contenu du corps est souvent dense, souvenez-vous d'utiliser une police facile à lire. Jouer avec deux polices pour les différentes sections rend la hiérachie visuelle plus claire - assurez-vous d'avoir une raison pour les polices particulières et qu'elles soient dans le contexte de votre design.
Espacement
L'espace entre chaque mot et/ou chaque ligne signifie la hiérarchie et la lisibilité du texte. Utiliser plus d'espace blanc met l'accent sur les éléments importants, comme illustré dans l'exemple du site ci-dessous. Donc utilisez-le à votre avantage, en évitant la tentation de placer tout le texte en un bloc.
Ces lignes directives peuvent se combiner et s'adapter, car il y a de nombreuses combinaisons qui vous permettent en tant que designer de prendre de nouvelles approches pour votre design. Découvrez dix jolis designs de flyer créés sur DesignCrowd qui utilisent des hiérarchies de texte de différentes manières. Tant que votre design permet à celui qui le voit de comprendre facilement l'information, prenez la liberté de combiner les éléments ci-dessus comme bon vous semble.
Exemples pour vous aider à visualiser les hiérarchies de texte
Ici, nous avons une carte de visite dont le but est de présenter un individu, l'entreprise pour laquelle il travaille, ce qu'il fait et comment le contacter. Avec cela en tête, voyons comment la hiérachie du texte aide à prioriser cette information.
Le nom de l'entreprise, "The Factory", ressort instantanément grâce à sa taille plus importante par rapport au reste du texte à l'avant de la carte. Le texte de l'entreprise est accentué par l'utilisation de texte blanc sur fond noir, un alignement centré, l'ensemble en majuscules, et une police sans empattements. C'est l'information la plus visible sur l'ensemble de la carte (avant et dos).
La prochaine information importante selon la hiérarchie du texte est le nom de l'employé. Le nom rappelle celui de l'entreprise par la police et l'utilisation de majuscules, et est positionné en haut, à l'avant de la carte en caractères gras. C'est aussi le texte le plus grand de ce côté de la carte.
Les informations du propriétaire de la carte ont une police différente et sont beaucoup plus petites tout en restant lisibles. En utilisant différents éléments qui affichent les différentes sections, le design détermine comment la carte de visite doit être lue.
Regardons maintenant le design du site ci-dessus. website design above. Bien qu'il y ait une police consistente dans ce web design, il y a quand même une hiérarchie visuelle réussie en utilisant des techniques comme l'épaisseur, la taille, la couleur, l'espace et l'alignement. Le design est facile à parcourir grâce à l'utilisation des esapces, le contenu n'est pas tassé ou oppressant.
Cet exemple prouve qu'il n'existe vraiment pas de règles sur comment atteindre une hiérarchie visuelle. Par exemple, le design défie la norme avec le titre étant à l'arrière plan quand les sous-titres sont au premier plan. Cependant, cela reste efficace et crée un point de focus fort car le titre est considérablement plus grand que le reste du contenu. Il est aussi aligné au centre et l'espace vide le souligne.
Ce poster porte la typographie au niveau supérieur. En arrière plan, la typographie est plutôt utilisée comme un élément de design, présentant des formes abstraites. En utilisant la même police mais des épaisseurs, tailles et couleurs différentes, le designer arrive à crée une hiérarchie forte et efficace.
C'est notamment le cas puisque le text à l'avant est un noir solide qui contraste les couleurs rosées du fond. Le design affiche aussi le titre principal dans le format le plus large, le sous-titre beaucoup plus petit mais toujours en majuscules, et les détails en très petits caractères. Ce qui aurait pu perturber visuellement, crée en fait un poster attirant bien conçu.
Un Dernier Mot
Comme vous le voyez, une hiérarchie de texte est essentielle pour le design d'un contenu efficace. Cela vous permet d'attirer l'attention des lecteurs rapidement et de trouver leur intérêt. Cela vous permet ensuite de les guider vers le corps de votre contenu avec des sous-titres qui fonctionnent commme un pont. Nous avons donc vu dans cet article qu'il existe plusieurs manières de créer des hiérarchies de texte, et nous vons encourageons donc à tester différentes approches pour diversifer vos designs.
Vous En Voulez Davantage ?
Vous aimez la bonne typographie ? Nous aussi. Pour d'incroyables polices et astuces, découvrez des idées de logo texte sur BrandCrowd ou ces articles du blog DesignCrowd :
Les 25 Meilleures Polices Gratuites Pour Designer
Termes Typographiques Que Chaque Designer Doit Connaitre
Les Termes Typographiques A Connaitre Pour Devenir Un Designer Expert
Written by Jessica Walrack on Tuesday, January 21, 2020
Jessica Walrack is a professional freelance writer with a background in sales and marketing. After 7 years in the corporate world, she stepped into the online sphere and has now been freelancing for 4 years. She specializes in helping businesses to create a stellar online experience for their audience in order to build industry authority and increase profitability. In her spare time, Jessica enjoys traveling all over the world with her family.
