Typography: Factors that dictate hierarchy.

Font size is often associated with hierarchy. But using a lot of font sizes will make our UI look amateur. In this article, we will see the factors that help us bring hierarchy to any design with simple steps.

Disclaimer: This article is best viewed in desktop mode. If you are reading this on a mobile screen, you can tilt your phone to landscape mode.

Let's look at those factors one by one. We will use this below HTML with all default styling reset.

No styles

With no styles, the above HTML looks like this.

Plain text

Font size

Let’s add

• 24pxfor h1
• 18px for h2
• 16px for p.

Text after bigger font sizes is assigned to the headings.

Font weight

Let’s add,

• 800 font-weight for h1
• 700 font-weight for h2

Text after thicker font weights is assigned to the headings.

Font color

The titles can be emphasized more by de-emphasizing the paragraphs.

• Change the p text from black to dark gray.

Text after lighter shade of gray assigned to the paragraphs.

Spacing

Let's add,

• 8px margin-bottom for headings
• 16pxmargin-bottom for paragraphs.

Why the difference? Proximity! Related things should stay together. In the below example, the headings stay closer to their paragraphs.

texts are given enough space to breathe.

Max Width

Let's add,

• max-width: 32rem to the layout.

max-width makes reading easy.

That is it. It is much more organized and readable.

Takeaways

• Font size, font weight, font color, spacing, and layout sizing can make a vast improvement with little effort.
• Having limited values for these factors ensures consistency throughout the design.

This is how the HTML looks in the end with the tailwind CSS classes that apply the above styles.

It's beautiful. I’ve looked at this for five hours now.

Thank you. See you next time.