Typographic hierarchy directs the reader from most important to least important words, making the layout clear and easy to digest. The contrast created between text by adjusting the size, weight, italics, orientation and color allows the reader to easily scan the text for key information.

Typographic hierarchy is generally divided into three levels;

  1. Primary - Big type such as headlines.
  2. Secondary - Bits of text that add information to the primary level; such as subheads, captions, pull quotes, infographics, and small blocks of text.
  3. Tertiary - The main text and the smallest, simplest type in the design, but still readable and consistent.

Example of typographic hierarchy in action


Typographic hierarchy can guide the reader to decipher what information is the main takeaway. It can also act as an interesting graphical way to break up large amounts of text. Organizing content into typographic levels can quickly communicate the objectives in any design.

Read More


White Space is Necessary Space


Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify