Six ways to set the same notice

Hierarchy is not decoration applied to content after the fact. It is a claim about what should be read first, and it is made whether or not anyone decides to make it. A page with no hierarchy is not neutral. It is a page that has declined to say what matters.

Below is one short notice, set six ways. The words are identical in all six, and so is their order in the source, which means a screen reader hears exactly the same thing every time. What changes is a single typographic variable at a time: first scale, then contrast, then placement, then spacing, and finally all four used together.

The content is invented, and deliberately so. It is a specimen, there to hold the arrangement still.

The same four variables, in an interface

A notice is generous: it has a whole page, a reader who has stopped, and room for a 46 px headline. An interface has none of those. It is dense, it is returned to hundreds of times, and its content is usually data rather than a message. The same four variables still apply, but the budget for each one is completely different.

The interface version spends almost nothing on scale, because a settings list cannot afford a 46 px number on every row without becoming a poster. It spends heavily on contrast instead, which is why the value reads instantly at 24 px while the explanatory line at 14 px stays available but quiet. The action is not larger or bolder than the explanation; it is only a different colour, and that is enough.

The trap in interface hierarchy is that it is applied per component and read per screen. Each row here is well ordered. Put forty of them on a page and every row's emphasis competes with every other row's, and the page flattens again at a level above the one anybody designed. Hierarchy composes badly, and checking it at the component level tells you almost nothing about the screen.

Where this is likely to mislead

Three honest limits on everything above.

The first is that these demonstrations are silent about content. A headline that says nothing will not be rescued by being 42 px; it will only fail faster and larger. Most of the hierarchy problems worth solving are editorial problems, and they are solved by deciding what the page is for and cutting the rest.

The second is audience and task. The arrangements were judged here by whether the eye takes the intended path, which is a proxy, not an outcome. Somebody scanning for a date, somebody who has seen the notice four times already, and somebody using a screen reader are all served differently, and a page that is beautifully ordered for a first-time reader can be actively hostile on the tenth visit.

The third is that the comparison is unfair by construction. I built the flat version to be flat. That is legitimate for isolating a variable and it is not evidence that the considered version performs better in any measurable sense. Nothing on this page was tested with readers, and where a real decision is at stake, the arrangement should be checked against the task rather than against a designer's eye. A controlled demonstration shows you a mechanism. It does not show you a result.

Where it connects

In customer experience the same argument runs at a larger scale. A journey has an order, an emphasis and a set of things it demotes, and those are chosen by somebody whether or not anyone writes them down. A service that treats every touchpoint as equally important is the flat arrangement: legible, and with no idea what it wants a person to do first.

In brand communication, hierarchy is where positioning either survives contact with production or quietly dies. A strategy that says the proposition leads, applied by a team that gives the logo the largest element on every layout, has not been implemented. The arrangement is the claim, and it is made in public every time something ships.