HIERARCHY THROUGH TYPE
What if a page without type hierarchy is like a room where everyone is shouting at the same volume? A page without type hierarchy is a crowd of people all shouting at the same volume. Nobody is heard. Hierarchy gives every element its voice.
CORE CONCEPT
IMPORTANCE OF HIERARCHY THROUGH TYPE
KEY KNOWLEDGE
1
Typographic hierarchy = organising text by importance so the reader encounters information in the right order
REAL WORLD EXAMPLE
Open Zomato or Swiggy on your phone. Look at any restaurant listing. The restaurant name is biggest and boldest — you see it first. The cuisine type and rating are medium — you see them second. The delivery time and distance are smallest and lightest — you see them last. That reading order didn't happen by accident. A designer decided: name is most important (big and bold), key details are second (medium), logistics are third (small and grey). Your eye moves through the hierarchy without thinking — name, rating, delivery time. Done. If everything were the same size and weight, you'd stare at a wall of text and not know where to start. Hierarchy is the difference between information that's scannable in two seconds and information that takes twenty.
2
Three standard levels: heading/title (dominant), body/subheading (sub-dominant), caption/detail (subordinate)
REAL WORLD EXAMPLE
Think of a cricket match on TV. The team score is enormous across the top of the screen — that's the heading. The batsman's name and individual score are medium-sized — that's the sub-dominant level. The strike rate, balls faced, and partnership details are tiny at the bottom — that's the subordinate detail. Three levels, perfectly ranked by importance. You absorb the match situation in a single glance because the hierarchy tells your brain exactly what matters most, what matters next, and what's supporting detail. Every professionally designed piece of text — from a news website to an exam result sheet to a train ticket — uses this same three-level structure. Dominant. Sub-dominant. Subordinate. Master these three, and you can organise any piece of information clearly.
3
Size is the most obvious hierarchy tool: bigger text is read before smaller text
REAL WORLD EXAMPLE
Look at any film poster. What do you read first? The title — because it's the biggest thing on the poster. You don't read the director's name first or the release date first, even though those are there too. Your eye goes to the biggest text automatically. This isn't a learned behaviour — it's how human vision works. Bigger things attract attention first. Period. This is why newspaper headlines are large: to grab you before you even decide to read the article. It's why the "BUY NOW" button on shopping sites is bigger than the "Learn More" link. Size is the simplest, most reliable way to tell someone "read this first." No design degree needed. Just make the important thing bigger. It's the first rule of typographic hierarchy — and it works every single time.
4
Weight creates hierarchy within the same size: bold text stands out from regular text
REAL WORLD EXAMPLE
Open any chat on your phone. The contact name is bold. The message preview beneath it is regular weight. They're often almost the same size — but the bold text jumps out first. Weight — how thick or thin the strokes of the letters are — creates hierarchy even when size is identical. This is incredibly useful because sometimes you can't make text bigger (the space is limited, the layout is fixed), so you make it bolder instead. A restaurant menu uses this constantly: the dish name is bold, the description beneath it is regular weight, both at the same size. Your eye reads the dish name first — not because it's bigger, but because it's heavier. Weight is the hierarchy tool that works inside tight spaces.
5
Colour and contrast create hierarchy: dark text on a light background is read before grey text on the same background
REAL WORLD EXAMPLE
Open Instagram and look at any post's caption. The username is black. The caption text is dark grey. The timestamp ("2h") is light grey. All three might be similar sizes — but you read them in exactly that order: username, caption, time. Why? Because darker text has higher contrast against the white background, so it demands attention first. Light grey text has low contrast, so it recedes. Designers use this constantly: important text is dark, secondary text is medium, tertiary text is faded. It's a hierarchy tool that doesn't require changing the size or the weight — just the shade. Think about it: the reason you skip over the "terms and conditions" text isn't just that it's boring — it's that it's always in light grey, telling your eye it's the least important thing on the page.
6
Spacing creates hierarchy: text with more space around it feels more important and prominent
REAL WORLD EXAMPLE
Walk into any Apple Store — or just look at their website. The product name sits alone in the centre of a vast white space. Enormous amounts of emptiness around a few words. That empty space isn't wasted — it's making the text feel premium, important, and unmissable. Now compare that with a local electronics shop flyer stuffed edge-to-edge with text, prices, and offers. Everything is crammed together. Nothing feels important because nothing has room. Space around text is like silence around a single word in a speech — it creates emphasis. When a designer says "give that headline room to breathe," they're using space to create hierarchy. The more space around a text element, the more your eye treats it as important.
7
Good hierarchy means the reader never has to "work" to figure out the order — the eye flows naturally
REAL WORLD EXAMPLE
Think about a really good teacher's whiteboard versus a bad one. The good teacher writes the topic title large at the top, the key points in medium below, and the details smaller to the side. You walk into class, glance at the board, and immediately know what today's lesson is about. The bad teacher's board? Everything is the same size, scrawled in the same marker, crammed into every corner. You stare at it and think: "Where do I start?" That confusion — that moment of "where do I start?" — is the absence of hierarchy. When hierarchy works, you never have to think about where to look. Your eye just flows. The best compliment a typographic designer can receive is when nobody notices the hierarchy at all — because it just felt natural.
8
Every app screen, website, poster, and document uses typographic hierarchy — most people just don't notice it consciously
REAL WORLD EXAMPLE
Pick up your phone right now. Open any app — literally any one. Now try to find a screen where all the text is the same size, same weight, same colour, and same spacing. You won't. Every single screen has hierarchy built in: the app title is different from the navigation labels, which are different from the content text, which is different from the timestamps, which are different from the button labels. It's so consistent and so universal that you've never once thought about it — and that's the point. Hierarchy is the invisible architecture of every text-based design on earth. It's in your electricity bill, in your exam hall ticket, in the newspaper, on the metro map. Once you see it, you realise it's been organising your reading experience your entire life. You just never had the word for it until now.
Pro Connection
Graphic designers build “type scales” that define exact sizes for each hierarchy level. UI designers specify type hierarchies in design systems: H1, H2, H3, body, caption, each with a defined size, weight, and colour. When a creative director says “the hierarchy is flat,” they mean everything looks the same importance. When they say “the hierarchy is working,” they mean the eye flows perfectly through the intended reading order.
PROFESSIONAL TERMINOLOGY
CLICK TO REVEAL and CLICK TO COVER
Organising text by importance using visual differences — telling the reader what to look at in what order
What is
TYPOGRAPHIC HIERARCHY
The most prominent text level — largest and boldest, read first
What is
HEADING
A secondary text level below the heading — organises content into sections
What is
SUBHEADING
The main readable text — where the core content lives
What is
BODY COPY
Small supporting text — descriptions under images, footnotes, or supplementary details
What is
CAPTION
How thick or thin type strokes are — Bold, Medium, Regular, Light — used to create emphasis and hierarchy
What is
WEIGHT
THE HIERARCHY MAP
Right now, a screen is shouting at you, talking to you, and whispering at you — all at once. Can you tell who's who?
what TO DO
Open any app or website on your phone.
Find exactly 3 levels of text hierarchy: Level 1 — the HEADING (biggest and boldest), Level 2 — the BODY (the main content), Level 3 — the CAPTION (the smallest detail).
Take a screenshot.
Repeat with a second, different app.
Ask yourself: which app has clearer hierarchy? Which one makes it easiest to know where to look first?
CHALLENGE
DISCOVERY
You can use these SOFTWARES for this Discovery Challenge
FREE SOFTWARE : Phone Screenshot, Snapseed, Markup / Photos Editor, Google Keep
PAID SOFTWARE : GoodNotes 6, Procreate Pocket