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.
With no styles, the above HTML looks like this.
The titles can be emphasized more by de-emphasizing the paragraphs.
- Change the
ptext from black to dark gray.
8pxmargin-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.
max-width: 32remto the layout.
That is it. It is much more organized and readable.
- 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.