To get fast information when you read text, you will mostly prefer to do the scanning. However, this scanning still takes longer when the text has the same size, weight, or color as the types or fonts. It will be easier to understand and get the gist of the information when applying the typographic hierarchy. But, have you heard this term before and understand the concept?
The Meaning of Typographic Hierarchy
A typographic hierarchy is a way to organize types in order of importance. It can help lead the audience to look and find the right sequence of information. Besides, it also supports designers in producing more attractive works. Imagine you present a plain text design with the same typeface, color, size even weight. No one will be attracted or even take a glance.
Primary Levels of Typographic Hierarchy
No matter what kind of hierarchy styling you use for your typography needs, it has these three primary levels, heading, sub-heading, and body. This division of sections helps readers or audiences find information when doing a quick scan. Moreover, this rule always works for any design.
Heading. The attention grabber contains the most prominent information.
Sub-Heading. Provides more detailed info that still leads and attracts readers to body text sections.
Body Text. The main text with the tiniest type in size yet should still be readable.
Elements to Build Typographic Hierarchy
Some of you might think that what can form a typographic hierarchy is limited to the size of a font, like the classic hierarchy. However, when talking about digital content with various purposes, you can’t only depend on one set of rules or arrangements. These elements below are what you can use to build different hierarchy stylings for more eye-catching designs.
Typeface
Uniformity is good, but it’s not compelling enough. You can change the monotony by playing with different fonts. Use the bold and big-size font for the heading to be more noticeable. Whether you use a light or weight typeface, both of them can do. Meanwhile, use a smaller font size for the body but make sure it’s legible. San-serif typefaces are the most recommended for body text. This font difference is the most obvious marker of the differences between sections.
Case
It is not common to use lowercase in headings, just as it is uncommon to use uppercase in body text for readability reasons. However, if you can find the right combination of fonts and typefaces, it can produce an attractive appearance while still according to hierarchical rules. But, if you follow the general rules, you can use uppercase for headings and sub-headings. While for body text, it is recommended to use lowercase.
Alignment
How you place the text on your design can affect the visual appearance of the typographic hierarchy. You can set the heading in the center to get the most attention. It will naturally draw the audience’s attention to the heading as the core, followed by the rest of the text. While for the sub-headings and body text, you can adjust their alignment by considering other elements in the design.
Color
In an age where everything has to be flashy and catch attention at one glance, using different colors for typography styling is an option highly considered. Combine cool and warm colors or lighter and darker shades suitable to the design concept. You also can utilize colors that contrast with the background to bring up a pop-up effect which will certainly be very attractive.
Position
There’s nothing wrong with being creative and daring to explore new styles. However, you have to remember your initial goal in creating a design. The information must still be conveyed and easily understood. Place the text in the right order; the top position is the most prominent information. Apart from that, pay attention to the placement of other design elements. Place related design elements close together to visually separate them from others.
Spacing
Spacing in the typographic hierarchy is not just about spacing between words. It also includes spacing between lines, letters, and other elements in a design. Its presence indicates clarity also the importance of white space. Don’t overcrowd your design either with text or other design elements, because it will be difficult to understand and unattractive. However, don’t leave it too empty either, as this is just as uninteresting.
Contrast
A clear contrast between one typographic element and another will make things easier, both in readability and design aesthetics. Then, which one can produce a good contrast? Size, weight, and colors can create a great contrast to invite people to focus on your design.
Addition for Consideration
Styling a single element of the typography can make all the difference. However, you can combine several styling elements at once. Of course, you still have to adjust it to the theme and concept, especially when you bring a brand identity to the design.
Another thing you should consider is the level of the typographic hierarchy. Three is the usual number of hierarchy levels. However, if needed, you can add a fourth or more.
- The first level is reserved only for headlines, the most noticeable text, usually larger in size and brighter in color.
- Second level reserves for subheads, captions, or other text/content in-between with more distinct sizes and colors to separate the main content from the headline.
- Third level reserves for main or body text that should be simple and less distracting since its goal is to make the readers or audience immersed in the text.
- Forth and other levels are the smallest in the hierarchy. It usually contains links, CTAs, and many more. Create it using different colors or style it using italic, bold, or underlined formatting.
Experiment with Your Own Typographic Hierarchy
There’s no absolute rule to create the best typographic look in design works. However, so long you know what typographic hierarchy elements to explore, you will find unlimited possibilities to keep up with your creativity. Impressing your audience with your designs while conveying information well becomes easier when you know what to pay attention to.