Typography: Factors that dictate hierarchy.

No styles

With no styles, the above HTML looks like this.

Plain text

Font size

Let’s add

  • 18px for h2
  • 16px for p.
Text after bigger font sizes is assigned to the headings.

Font weight

Let’s add,

  • 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.

Text after lighter shade of gray assigned to the paragraphs.

Spacing

Let's add,

  • 16pxmargin-bottom for paragraphs.
texts are given enough space to breathe.

Max Width

Let's add,

max-width makes reading easy.

Takeaways

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karthick Ragavendran

Karthick Ragavendran

Fullstack engineer @ atem.green | React, Typescript, Redux, JavaScript, UI, Storybook, CSS, UX, Cypress, CI/CD.