Size, weight, position, and spacing can distinguish levels. More emphasis everywhere does not create a clearer order.
By the end: build a small, consistent hierarchy and explain why a type scale is a tool rather than a law.
Choose what deserves attention
A hierarchy is a relationship among roles: page title, section heading, body, supporting label, and action. A title can be larger because it identifies the page; a warning may need emphasis because overlooking it has a high cost. Importance is not simply the amount of ink an element occupies.
Emphasis is relative. If every label is large, bold, uppercase, and brightly colored, those cues no longer distinguish much. Reserve strong differences for meaningful differences. Secondary information can be quieter without becoming tiny or low contrast.
Distinguish importance from the next useful fact
Suppose someone already knows that the page concerns an open studio and now needs to reach the building. The event name still identifies the page, but the entrance is the next useful fact. A hierarchy must support both identification and the immediate question. Making the event name occupy most of the available space can weaken that second task even when its letters remain easy to read. The issue is the allocation of prominence among facts, not whether large letters are inherently good or bad.
Start by giving each piece of content a job. In the specimen, the event name identifies the event, the date locates it in time, the entrance directs arrival, and the booking rule states a condition. These jobs remain the same in both arrangements. Find the entrance in each before comparing their appearance. In the title-heavy arrangement, several large title lines precede the arrival details. In the arrival-focused arrangement, the entrance receives stronger type without removing the event name or changing the facts.
Two priorities for the same arrival facts
Title-heavy treatment
Open studio
Saturday · 14:00
West entrance
Booking required
Arrival-focused treatment
Open studio
Saturday · 14:00
West entrance
Booking required
The left gives the event name 40 px type within a narrow title allocation; the right gives the entrance 28 px bold type. This combined change reallocates prominence without changing any event facts. The actual title breaks depend on the platform font and available space.
Prominence uses scarce differences. If five lines all have the same size and weight, size and weight cannot distinguish their roles, although position and wording still can. If only one line is heavier, that difference supplies a cue. This does not mean the heavier line receives a calculable share of attention. Readers bring different questions and expectations. The useful design claim is narrower: a visible distinction corresponds to a named role, and a reader can inspect whether that distinction helps with the task.
Consider a booking condition that matters before someone travels. Calling it supporting information describes its relation to the event name, not permission to hide it. Keep it in readable text near the relevant details. A larger title can coexist with a clearly stated condition because prominence need not depend on reducing everything else. In the second comparison, both versions retain readable words. The difference is whether every line competes with the same strong weight or whether weight separates event identification from its details.
Equal strong weight versus a reserved difference
Every line bold
Open studio
Saturday · 14:00
West entrance
Booking required
One role bold
Open studio
Saturday · 14:00
West entrance
Booking required
Both notices use 20 px type and identical spacing. On the left all event facts are bold. On the right only the event name is bold; the booking condition remains full-size, readable text. Weight now distinguishes one role rather than marking every role alike.
Trace the second specimen twice with different questions. First ask what the event is; then ask whether booking is necessary. Point to the words that answer each question. In the restrained version, event identification has a stronger weight, while the booking sentence remains explicit. If your second search requires rereading the entire specimen, propose a specific alternative, such as moving that sentence beside the date. That proposal changes grouping and position rather than assuming another increase in title size will solve every search problem.
A useful contrast is a short emergency notice. Its immediate instruction may deserve the strongest treatment even though it is not the document title. Content roles are not permanent ranks that apply identically to every situation. A cancellation notice might emphasize the cancellation and its date before the original event name. That would be a different communication task, not evidence that every open-studio notice should reverse its hierarchy. Keep the task fixed when comparing treatments, or state explicitly why the task has changed.
Construct and inspect a scale
One way to derive related sizes is to multiply a base size by a repeated ratio. Starting at 18 px with a ratio of 1.25 gives 18, 22.5, and 28.125 px. A ratio of one produces no size hierarchy. This geometric rule makes choices consistent, but it does not prove the resulting sizes fit the content.
The notice keeps body text at 18 px and applies the ratio to two higher roles. The reference keeps all three at 18 px. Weight and space also help distinguish the revised roles. Inspect the longest real heading before accepting a scale; a mathematically neat title that wraps into five lines may need a different treatment.
Follow multiplication through the available space
A ratio describes how one quantity compares with another. If the body size is 18 CSS px and the next role is 1.2 times as large, multiply 18 by 1.2 to obtain 21.6. Multiply 21.6 by 1.2 again to obtain 25.92 for the title. The first increase is 3.6 px and the second is 4.32 px. Equal ratios therefore do not mean equal additions. Each increase uses a larger starting quantity, which is why the numerical gaps grow upward through the scale.
Compare that rule with adding 4 px at each step. Addition produces 18, 22, and 26, whereas repeated multiplication by 1.2 produces 18, 21.6, and 25.92. These particular results are close, but the rules differ. With more levels, repeated multiplication separates the upper sizes further. Neither rule supplies the number of levels the content needs. A notice with three distinct roles does not require six sizes simply because a calculator can generate them. The specimen shows actual text at the three calculated sizes.
Two arithmetic rules rendered as text
Add 4 px at each step
Open studio
Saturday · 14:00
West entrance
Multiply by 1.2 at each step
Open studio
Saturday · 14:00
West entrance
The additive column uses 18, 22, and 26 CSS px. The multiplicative column uses 18, 21.6, and 25.92 CSS px. Only sizes differ between columns; weight and margins match. These nearby results do not make the two rules identical.
The scale determines nominal font sizes, not exact visible letter heights or line breaks. A title at 25.92 px does not promise ink exactly 25.92 px tall. The font supplies its letter shapes and widths, and the browser places them within line boxes. If the title becomes wider than its available line, it wraps at permitted breaks. Increasing the title size can therefore increase both its letter scale and the number of lines it occupies. The resulting block height can change more abruptly than the size setting.
Read the same longer title in the two width specimens. The narrow block constrains its width; the broad block gives it more room. Both use the same nominal title size and words. Notice the actual breaks rather than counting characters and predicting an exact line count. Their font is a generic family, so your platform can change the result. This comparison studies available width, not a different title message. A wrap is not automatically a failure, but several short lines may separate identification from the details below.
The same title within different width limits
Title maximum 8ch
Open studio for local makers
Saturday · 14:00
West entrance
Booking required
Title maximum 15ch
Open studio for local makers
Saturday · 14:00
West entrance
Booking required
Both titles are 30 px bold with line height 1.2. Their maximum widths are 8ch and 15ch, capped by the available panel width. These are actual HTML wraps, not predicted line counts; ch is based on the zero glyph's advance. Both versions retain exactly the same facts.
For a paper calculation, suppose a title occupies two lines with a nominal line height of 36 px. Its two line boxes occupy 72 px before margins. If a narrower allocation produces three such lines, that becomes 108 px, an additional 36 px without any new words. These numbers are an assumed example, not measurements of the specimen. They explain why checking only the ratio misses part of the layout budget. The real font, browser wrapping, and line-height setting determine the actual block.
Before choosing a larger ratio, decide what problem the extra size would address. If the event name is indistinguishable from the date, a larger title may help separate those roles. If the entrance is hard to find because it is far below unrelated material, title enlargement may make that problem worse. Try the width comparison as a diagnosis: identify what stayed constant, what changed, and which relationship changed as a consequence. Consistent multiplication is useful arithmetic, but it cannot replace that explanation.
Inspect the relationship
Generate a related size
Here the base is 18 px, the ratio is 1.25, and n counts upward from zero. Level two is 28.125 px, not a guaranteed optimum.
Compare roles while keeping the words
Equal-size reference
Open studio
Saturday · 14:00
West entrance
Booking required
Role-based treatment
Open studio
Saturday · 14:00
West entrance
Booking required
Body 18 px; date 22.5 px; title 28.125 px.
Both notices contain the same facts. The selected notice also uses stronger weight and role-based spacing, so this is not a size-only experiment. Controls change only its size ratio; the body remains 18 CSS px. No predicted attention score is assigned.
Separate the ratio control from the combined treatment
Use the existing hierarchy comparison to make a prediction before changing its ratio. At ratio one, all three nominal sizes in the selected notice are 18 px. Predict whether the two notices will become identical. Select the preset for no size contrast and inspect them side by side. They do not become identical because the selected treatment retains heavier event and date text and different vertical spacing. Removing size differences removes one cue, not every cue. The comparison is deliberately broader than a size-only experiment.
Now select the moderate ratio of 1.25. The date becomes 22.5 px because 18 multiplied by 1.25 is 22.5. The title becomes 28.125 px because another multiplication applies to the date size. Look for a changed distinction between the title and date, then inspect whether the entrance and booking sentence still belong to a coherent notice. The calculation describes sizes only. It cannot assign a probability that someone notices the title first or predict how many seconds finding the entrance would take.
At the stronger preset of 1.4, the date is 25.2 px and the title is 35.28 px. The title-to-body ratio is 1.96, since 1.4 multiplied by itself is 1.96. This is almost twice the nominal size, not a statement that the title contains twice as much ink or is twice as important. Examine the actual letterforms and any new wrapping. Keep the reference visible while judging whether the larger difference serves the visitor's question or merely occupies more of the panel.
Return to the moderate preset and then move the slider to 1.3. Calculate the date as 23.4 px and the title as 30.42 px before reading the displayed values. This intermediate setting helps you connect a continuous numerical change with a rendered result. Only the selected ratio changes during this move; its weights and margins remain fixed. If a title wraps at one setting but not another, identify the line break as a consequence of size within the available width, not as an additional control.
The nearby static comparison isolates a different question. It keeps every line at 20 px and changes the weight of the event name alone. Compare it with the selected notice at ratio one, which also changes spacing and date weight relative to its reference. Both examples can produce visible distinctions, but they support different causal descriptions. A statement about the weight-only specimen should name weight. A statement about the interactive reference versus selected notice must acknowledge the combined size, weight, and spacing treatment.
Isolate title weight without changing size
Event name weight 400
Open studio
Saturday · 14:00
West entrance
Booking required
Event name weight 700
Open studio
Saturday · 14:00
West entrance
Booking required
The event name changes from weight 400 to 700. Every line remains 20 px, and words, spacing, and the weights of all other facts are fixed. This is a weight-only static comparison, unlike the interactive notice's combined treatment.
Write down an observation with its boundary. For example, you can report that the stronger setting makes the title occupy another line on your current display, if that is what you see. You cannot report that it improves visitor performance without observing visitors doing the task. Even if a later reader test favors the complete selected treatment, that would not isolate size as the cause. To study size separately, the compared treatments would need equal weights, spacing, words, and other relevant conditions.
Keep visual and semantic levels distinct
In HTML, heading elements identify document structure. Their level should follow the content hierarchy rather than whichever default size looks right. CSS can change the appearance without turning a section heading into a paragraph or skipping structural levels just to get a smaller font.
A primary action is not automatically the brightest object in every context. A destructive action may need an explicit label and confirmation rather than more visual attraction. Explain the consequence before asking someone to choose. This course studies comprehension, not techniques for hiding costs or manipulating choices.
Keep the document outline independent of its styling
Imagine a workshop page with a page title, a section about arrival, and another about booking. The page title names the whole document, while the section headings divide its content. That relationship exists before any font size is chosen. A heading level records the relationship in HTML so software can expose an outline. Styling answers a separate question about how that heading looks. A small section heading does not become body text merely because its author chooses the same nominal size as a paragraph.
Read the two workshop fragments in the specimen. They contain the same facts and the same heading levels, but one gives the arrival heading more visible emphasis. The markup relationship remains unchanged. This makes a useful counterexample to the idea that a larger heading must always have a higher structural level. The fragments are excerpts within an assumed larger document. Their visual treatment does not change the outline.
One section role with two visual treatments
Equal section treatment
Arrival
Use the west entrance at 14:00.
Booking
Booking is required for Saturday.
Arrival emphasized
Arrival
Use the west entrance at 14:00.
Booking
Booking is required for Saturday.
Arrival and Booking are headings at the same HTML level in both excerpts. Only Arrival's visual size and weight change. Heading level records the section relationship; a larger visible style does not create a higher-level section.
Now consider a sequential decision rather than an outline. Someone chooses a workshop, reads its booking condition, and then confirms. The condition must remain available before commitment even if the action is visually prominent. A large confirmation label above a condition can suggest a sequence that differs from the intended decision. Reducing the condition's contrast is not a sound repair. Place the explanation with the decision, retain readable type, and use a restrained distinction for the action. An action's prominence should not make its consequence harder to discover.
Inspect the two booking excerpts and locate the condition before reading the confirmation wording. These are static specimens, not working booking interfaces. One arrangement separates the condition from the decision; the other brings it into the same reading group. All facts remain unchanged. Describe the revision as a change in grouping and position rather than a successful transaction or an accessibility pass. A screenshot cannot establish keyboard behavior, and visual placement alone does not establish the source order software will read or the focus sequence of real controls.
Keep a condition with the decision it qualifies
Condition separated from decision
Saturday workshop
Cancellation closes Friday at 14:00.
Confirm booking
Condition grouped with decision
Saturday workshop
Cancellation closes Friday at 14:00.
Confirm booking
Both static excerpts contain the same wording in the same source order. The left inserts 64 px before the condition and separates it from the confirmation wording. The right groups condition and confirmation together with a shared left border. These are text specimens, not booking controls or evidence of a completed action.
To explore the distinction without inventing an interface feature, draw the content outline of the workshop fragment on paper. Put the page title above the two section headings and assign each paragraph to its section. Then sketch a presentation where the arrival section is visually emphasized because the reader is already travelling. Keep its heading level unchanged. The exercise has a concrete constraint: your revised outline must still describe the same document. If your visual treatment implies a different grouping, revise the treatment rather than silently changing the content relationship.
Finish by giving a reason for one retained and one rejected difference. You might retain stronger arrival text for a visitor locating the entrance, while rejecting a tiny booking condition because it is needed before attendance. These reasons refer to different content roles and consequences. They do not rank whole styles as universally better. A later check would need the actual document structure and any real controls, followed by an appropriate reader task. The specimens establish inspectable design alternatives, not measured usability or complete accessibility conformance.
Exercises
Extend a scale
A base is 20 px and the ratio is 1.2. What are the next two sizes? What does that calculation not tell you?
Hint
Multiply the previous size each time, rather than adding 0.2 px.
Worked answer
Level
Calculation
Size
Body
20
20 px
Heading
20 × 1.2
24 px
Title
20 × 1.2 × 1.2
28.8 px
Consistent arithmetic still requires visual judgment.
The sizes are 24 px and 28.8 px. The calculation establishes a ratio, not readability, appropriate line breaks, semantic structure, or a suitable emphasis level. Check the actual typeface, available width, content, and reader task.
Preserve supporting information
A designer makes an essential cancellation rule faint to keep a button prominent. What is a better hierarchy?
Hint
A secondary role is not permission to make essential content unreadable.
Worked answer
Element
Role
Cancellation rule
Readable condition near the choice
Action
Explicit label with restrained emphasis
Decorative content
May be reduced or removed
Hierarchy must preserve access to consequential information.
Keep the rule readable and place it where the decision is made. Use position, spacing, and a restrained type hierarchy to distinguish the button instead of reducing the rule below useful contrast. Give the button an accurate action label. Prominence should help an informed choice, not conceal a consequence.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.