登录查看更多内容

What are the best practices for creating a hierarchy of information with typography?

由人工智能和领英社区提供技术支持

Typography is the art and technique of arranging type to make written language legible, readable, and appealing. It is an essential element of graphic design, especially when it comes to creating a hierarchy of information. A hierarchy of information is the way you organize and prioritize the content of your design, using different levels of typographic elements to guide the reader's eye and attention. In this article, you will learn what are the best practices for creating a hierarchy of information with typography, and how to apply them to your own projects.

此文章中的业界达人

由社区从 7 条内容中精选。了解更多

Astrid Crépin

Senior Product Designer, experte en UI Design (Freelance)
yoga baskoro

Creative Lead Gravity Game Link

1 Use contrast

Contrast is the difference between two or more elements in a design, such as size, color, weight, alignment, or style. Contrast creates visual interest and helps the reader distinguish between the most and the least important information. For example, you can use a large and bold font for the headline, a smaller and lighter font for the subhead, and an even smaller and regular font for the body text. You can also use contrast in color, such as using a dark font on a light background, or a bright color for a call-to-action. Contrast should be balanced and consistent throughout your design, and avoid creating too much or too little contrast that can confuse or overwhelm the reader.

添加您的观点

yoga baskoro

Creative Lead Gravity Game Link
举报内容
In my experience, the font coloring for headlines and other information is always differentiated. Headlines use bright colors to make them more readable. For date, place and time information, use colors that contrast with the background so that the information can be read clearly

已翻译

赞
Astrid Crépin

Senior Product Designer, experte en UI Design (Freelance)
举报内容
C'est certainement l'un des principes que j'utilise le plus en UI Design. Il me permet de hiérarchiser l'information. L'utilisateur arrive ainsi à scaner la page plus facilement. Par exemple quand des textes font la même taille, je vais utiliser la graisse et la couleur pour dissocier le titre de paragraphe du texte de paragraphe. Pour un titre de paragraphe, je l'afficherai en bold et Noir (#000000) alors que le texte de paragraphe sera en regular avec un noir plus doux (#212121)

已翻译

赞
Ibtisam Tariq

i make stuff and sometimes i have a creative block for 3 months
举报内容
Use size, weight, and color to differentiate between levels of importance. Larger, bolder fonts draw attention to headings, while smaller, lighter fonts are better for body text. Varying font styles, spacing, and alignment can also help create a clear hierarchy. Consistency is key—apply the same styling rules across the design to guide the reader through the information naturally.

已翻译

赞

2 Use scale

Scale is the relative size of typographic elements in a design, such as fonts, letters, words, or lines. Scale can affect the readability, legibility, and impact of your typography, as well as the spatial relationship between the elements. For example, you can use a large scale for the headline to attract attention and convey importance, a medium scale for the subhead to provide context and clarity, and a small scale for the body text to deliver the main message. You can also use scale to create emphasis, hierarchy, or harmony in your typography, by increasing or decreasing the size of certain words or phrases.

添加您的观点

Astrid Crépin

Senior Product Designer, experte en UI Design (Freelance)
举报内容
Avant de designer n'importe quel projet, je mets en place ma "Font scale" qui veut dire ma hiérarchie de typo. Je définis précisément toutes les tailles de texte de l'interface : un gros titre (L), un titre moyen (M), un titre (S), la taille des paragraphes, des legendes, des libellés de composant. Je fais la même chose pour mes spacings, je définis la taille de petits espaces, de moyens espaces ou de grands espaces pour que ce soit toujours les mêmes sur toute l'interface. J'applique aussi ce principe dans mes icons et illustrations. Je définis une taille small, medium et huge pour ces assets. Tous ces aspects permettent d'apporter beaucoup de clarté dans mon design mais aussi de la cohérence entre mes créations

已翻译

赞

3 Use alignment

Alignment is the way you position typographic elements in relation to each other and to the margins or edges of your design. Alignment can affect the order, flow, and structure of your typography, as well as the overall appearance and balance of your design. For example, you can use a left alignment for the body text to create a natural and easy-to-read layout, a center alignment for the headline and subhead to create a symmetrical and formal layout, or a right alignment for the date or author name to create a subtle and elegant layout. You can also use alignment to create contrast, hierarchy, or alignment in your typography, by changing or mixing the alignment of certain elements.

添加您的观点

Astrid Crépin

Senior Product Designer, experte en UI Design (Freelance)
举报内容
Je joue aussi très souvent avec l'alignement. Je définis un alignement à gauche pour mes textes et paragraphes. Puis je crée des accidents visuels pour mettre en exergue certains éléments, comme par exemple une citation, je décalerai de quelques dizaine de pixels. Ou je déciderai d'afficher des donnèes différemment dans un tableau, tant?t en ferrant à gauche des données ( libellés par exemple) ou tant?t en ferrant à droite d'autres données ( comme la monnaie ) par exemple.

已翻译

赞

4 Use spacing

Spacing is the amount of space between typographic elements in a design, such as letters, words, lines, or paragraphs. Spacing can affect the readability, legibility, and aesthetics of your typography, as well as the rhythm and pace of your design. For example, you can use a tight spacing for the headline to create a compact and powerful layout, a loose spacing for the subhead to create a spacious and airy layout, or a moderate spacing for the body text to create a comfortable and balanced layout. You can also use spacing to create emphasis, hierarchy, or harmony in your typography, by adjusting or varying the spacing of certain elements.

添加您的观点

5 Use fonts

Fonts are the styles and forms of typographic elements in a design, such as typefaces, weights, or variants. Fonts can affect the mood, tone, and personality of your typography, as well as the identity and message of your design. For example, you can use a serif font for the headline to create a classic and elegant layout, a sans serif font for the subhead to create a modern and simple layout, or a script font for the body text to create a creative and expressive layout. You can also use fonts to create contrast, hierarchy, or harmony in your typography, by choosing or combining different fonts for different elements.

添加您的观点

yoga baskoro

Creative Lead Gravity Game Link
举报内容
In my experience, the type of font used has a big influence on the content that will be designed. Fonts for sports design prefer bold fonts, for F&B content, especially content about cakes, prefer cute, cartoon and sweet fonts

已翻译

赞

6 Use categories

Categories are the groups or levels of typographic elements in a design, such as headlines, subheads, body texts, captions, or labels. Categories can affect the organization, navigation, and comprehension of your typography, as well as the coherence and logic of your design. For example, you can use a headline category for the main title of your design, a subhead category for the secondary titles or subtitles of your design, a body text category for the main content or text of your design, a caption category for the explanatory or supplementary text of your design, or a label category for the descriptive or informative text of your design. You can also use categories to create contrast, hierarchy, or harmony in your typography, by defining or applying different categories for different elements.

添加您的观点

yoga baskoro

Creative Lead Gravity Game Link
举报内容
In my experience creating designs that include many font sizes, usually for headlines I use a larger size than other design copy. For the font that displays the place, date and time, I used a bolder font to make it more noticeable

已翻译

赞

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Design

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are the best practices for creating a hierarchy of information with typography?

1

2

3

4

5

6

7

1 Use contrast

2 Use scale

3 Use alignment

4 Use spacing

5 Use fonts

6 Use categories

7 Here’s what else to consider

Design

给文章评分

感谢您的反馈

更多Design相关文章

更多相关阅读内容

What are the best practices for creating a hierarchy of information with typography?

1

2

3

4

5

6

7

1 Use contrast

2 Use scale

3 Use alignment

4 Use spacing

5 Use fonts

6 Use categories

7 Here’s what else to consider

Design

给文章评分

感谢您的反馈

查看其他技能