Back to Design & UX

What is visual hierarchy and how do typography and scale help users scan a page?

Visual hierarchy is the order in which the eye is guided through content. Larger size, stronger weight, higher contrast, and top or left placement usually read before smaller, lighter text. A limited type scale (e.g. a few clear levels for display, title, body, caption) helps users predict structure. Line length and line height affect readability: very long lines tire readers; very short lines can feel choppy. Consistent spacing between blocks signals grouping better than ad hoc empty pixels.

/* example scale, not a law */
h1 { font-size: 2rem; font-weight: 600; line-height: 1.2; }
p { font-size: 1rem; line-height: 1.5; max-width: 65ch; }

Start simple: try this concept in a tiny project before moving to advanced tools.

typographylayoutux

Want to check this topic right now?

Check this question