Web Design

Understanding Typographic Hierarchy and Its Use In Design

typography hierarchy
0

Whenever you look at a design, one of the most important elements that you notice is the type. The reason why typography is so important in any design is because helps in directing users through a design and the type that you use should be clear and readable.

So how do you make sure that the type in your design stands out and most importantly, helps to draw and direct attention of a user through a design? Through Typographic Hierarchy of course!

Typographic hierarchy is basically a form of visual hierarchy in which the lettering is presented in such a way that the words which are most important are displayed with the most impact so that users are able to easily scan text for key information.

Typography Example

Take a look at the picture above: are you able to read through it and easily distinguish the heading and sub-heading from its information text? This is what happens when you don’t properly utilize typographic hierarchy and results in the appearance of every letter, word and sentence to look the same in a design. Now take a look at the picture below:

Typography Example

Since the concept of typographic hierarchy is applied here, you are able to easily differentiate the heading from the information and the context is more clear compared to the image above.

So how do you go about creating that contrast between elements? Well, designers achieve this with the use of various elements which consists of size of text, typeface, weight, lowercase and uppercase letter, colors and through bold and italics. Having said that, since the word “hierarchy” is used, it stands to reason that there are levels to typography too and they include Primary, Secondary and Tertiary levels.

Primary Level – Headlines and big texts are all included in the Primary level of typography hierarchy and is the biggest type in design

Secondary Level – This level includes the little nuggets of information that help readers to stay with the design and easily scan through the highlights. It includes subheadings, captions, quotes and infographics and are typically on the large side but smaller than the primary letters.

Tertiary Level – The main text in your design is included in this level and though is the smallest type in the design, it should be large enough to be readable and the typeface used should be simple and consistent ensuring that there is proper spacing between the characters.

BrandedLogoDesigns Facebook BrandedLogoDesigns Twitter BrandedLogoDesigns GooglePlus BrandedLogoDesigns Linkedin BrandedLogoDesigns Vimeo

You may also like
Websites That Designers Need To Check Out
June 2017: Websites That Designers Need To Check Out
tools for web developer
Tools That Every Web Developer Should Know About

Leave Your Comment

Your Comment*

Your Name*
Your Webpage