Visual Hierarchy

From the outside, interface design looks like a matter of taste. A screen is judged “good” or “bad,” and asking why usually surfaces a personal preference. This course rejects that view. Every visual decision carries a function: it produces a distinction, establishes a relationship, or declares an order. A decision is design if it can be justified; if it cannot, it is decoration. The question asked throughout the course is not “is it beautiful” but what distinction it produces, and at what cost.

The examples will proceed through a single interface: a library’s catalog interface. A search field, a search results list, a single record’s detail view, and a borrowing action. This interface will become one step more deliberate with each lesson. The first question is the most basic one: what does a person looking at a screen see first, and who decides that?

Hierarchy Is a Promise About Reading Order

Visual hierarchy is the ordering of the elements on a plane by their power to draw attention. The designer cannot control this ordering directly; they can only steer it by changing the elements’ visual properties.

This definition has two consequences. First, hierarchy is not a property but a relationship. There is no such thing as a heading being “strong” on its own; it can only be strong relative to the elements around it. If every piece of text is enlarged to 32 pixels, the hierarchy does not rise — it disappears.

Second, hierarchy is a promise, and when it is broken, the reader pays the cost. If an interface shows a record’s title more prominently than its shelf-availability status, a person who comes to the catalog asking “which books are on the shelf right now” has to look twice at every record. A wrong hierarchy does not erase information; it raises the cost of finding it.

The question that must be answered before building a hierarchy is this: which task comes first on this screen? In the catalog interface, the search results list’s task is to make the question “is this result the thing I am looking for” cheap to answer. The strongest element is therefore the record title, the author’s name comes second, and the shelf code is needed only after a record is selected.

The Channels That Direct Attention

Distinguishing one element from another can draw on several independent channels. Each channel carries its own cost and its own limit.

• Size. The strongest and most expensive channel. Enlarging an element does not just bring it forward; it also consumes screen space and pushes everything below it down.
• Weight. The thickness of the type. It consumes no space, which makes it more useful than size in dense lists. Its limit is the number of weights the typeface in use offers.
• Contrast. The degree to which text separates from its background. It also works by weakening a distinction: fading secondary information brings primary information forward without enlarging it. Its cost is the accessibility threshold, which will be measured in the Contrast and Accessibility lesson.
• Position. An element close to the start of the reading direction is scanned earlier. It is not free: position constrains the rest of the layout.
• Space. The space around an element isolates it and brings it forward. This is the subject of the lessons that follow.

The channels being independent matters. Expressing the same distinction on two channels at once does not double its strength, but it does make it resilient: when one channel stops working, the other still holds. Color blindness, reading under low brightness, a small screen, and a typeface failing to load are all instances of a channel ceasing to work.

Measuring the Distinction

A discussion of hierarchy stays inconclusive as long as the question “is it distinct enough” remains subjective. The way to make the question measurable is to compute the difference between two adjacent levels channel by channel and compare it against a criterion.

The program below takes the catalog interface’s text levels, computes each level’s contrast ratio against the background, and lists the differences between adjacent levels. The contrast ratio is computed from the relative luminance defined in the Visual Presentation with CSS course.

// hierarchy.mjs — measures the distinction between text levels channel by channel

const levels = [
  { name: "page title",    size: 32, weight: 700, color: "#1a1a1a" },
  { name: "section title", size: 20, weight: 600, color: "#1a1a1a" },
  { name: "record title",  size: 18, weight: 600, color: "#1a1a1a" },
  { name: "author",        size: 16, weight: 400, color: "#3d3d3d" },
  { name: "metadata",      size: 14, weight: 400, color: "#5c5c5c" },
];

const BACKGROUND = "#ffffff";

// WCAG relative luminance and contrast ratio
function channel(v) {
  const s = v / 255;
  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
}
function luminance(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
}
function contrast(a, b) {
  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
}

// Course threshold: two adjacent levels must clear these thresholds in at least one channel.
const THRESHOLD = { sizeRatio: 1.15, weightGap: 200, contrastRatio: 1.5 };

console.log("level            size  weight  contrast(bg)");
for (const l of levels) {
  console.log(
    `${l.name.padEnd(16)} ${String(l.size).padStart(4)}px ${String(l.weight).padStart(7)}  ` +
      `${contrast(l.color, BACKGROUND).toFixed(2)}:1`
  );
}

console.log("");
console.log("adjacent level pair             size ratio  weight gap  contrast ratio  distinction");
for (let i = 0; i < levels.length - 1; i++) {
  const upper = levels[i];
  const lower = levels[i + 1];
  const sizeRatio = upper.size / lower.size;
  const weightGap = upper.weight - lower.weight;
  const cUpper = contrast(upper.color, BACKGROUND);
  const cLower = contrast(lower.color, BACKGROUND);
  const contrastRatio = cUpper / cLower;

  const passed = [];
  if (sizeRatio >= THRESHOLD.sizeRatio) passed.push("size");
  if (weightGap >= THRESHOLD.weightGap) passed.push("weight");
  if (contrastRatio >= THRESHOLD.contrastRatio) passed.push("contrast");

  const label = `${upper.name} > ${lower.name}`;
  console.log(
    `${label.padEnd(30)} ${sizeRatio.toFixed(3).padStart(11)} ` +
      `${String(weightGap).padStart(14)} ${contrastRatio.toFixed(3).padStart(15)}  ` +
      (passed.length ? passed.join("+") : "WEAK")
  );
}

level            size  weight  contrast(bg)
page title         32px     700  17.40:1
section title      20px     600  17.40:1
record title       18px     600  17.40:1
author             16px     400  10.86:1
metadata           14px     400  6.69:1

adjacent level pair             size ratio  weight gap  contrast ratio  distinction
page title > section title           1.600            100           1.000  size
section title > record title         1.111              0           1.000  WEAK
record title > author                1.125            200           1.602  weight+contrast
author > metadata                    1.143              0           1.624  contrast

The threshold values are not a law of nature; they are criteria this course adopts and quantifies so that they can be audited. What matters is not the number itself but that the decision is tied to a number: the sentence “it does not look distinct enough” can be argued with, while the sentence “size ratio 1.111, threshold 1.15” can be checked.

The second row of the output is the real finding. Between the section title and the record title, no channel clears the threshold: their sizes are nearly identical, their weights are equal, their colors are the same. These two levels are written on separate lines in the design document, but on screen they sit at the same level. The hierarchy exists in the document; it does not exist in the interface.

The fix for this finding is not merely to enlarge the section title. The question to ask is whether the distinction is actually needed. If the catalog interface’s search results list has only one section, the section title is a label that carries no information and can be removed. The cheapest solution to a hierarchy problem is often reducing the number of levels.

The Cost of Relying on a Single Channel

The last row of the output shows another weakness: the distinction between the author and the metadata rests on the contrast channel alone. The size ratio is 1.143, below the threshold; the weight gap is zero. The distinction stands on one leg.

A one-legged distinction collapses predictably. A distinction that relies on contrast disappears on a screen in sunlight or on a panel set to low brightness. A distinction that relies on color disappears for a reader with limited color perception. A distinction that relies on weight disappears when only one weight of the typeface can be loaded.

The rule can be written as follows: if the information it carries is critical, the distinction is expressed on at least two channels. The distinction between the record title and the author satisfies this condition (weight and contrast). The distinction between the author and the metadata does not; if the metadata’s font size is reduced to 13 pixels, the size ratio becomes 16/13, about 1.231, and clears the threshold.

How Many Levels a Hierarchy Carries

Adding a level is not free. Every new level squeezes in between the existing ones and narrows the difference to its neighbors. If a five-level scale’s size range runs from 14 to 32 pixels, a sixth level either shrinks the lower end past the point of legibility or drops one level pair’s distinction below the threshold.

In practice the number of levels is therefore small: one primary, one secondary, one tertiary, and, if needed, one suppressed level. If two elements on the same screen compete as primary, neither one is primary.

The same limit applies to actions. In a catalog record, if “Borrow” is the primary action, “Add to List” and “Share” cannot carry the same visual weight. When all three buttons are drawn filled and colored, the user cannot read which one is the expected action from the interface; they decide by reading the labels. That means the hierarchy is not doing its job.

Summary

• Visual hierarchy is the ordering of elements by their power to draw attention; it is a relationship between elements, not a property, and strengthening everything destroys it.
• Hierarchy is derived from the screen’s primary task: the strongest element is the one that makes that task cheaper.
• Distinction is expressed on the size, weight, contrast, position, and space channels; the channels are independent, and each carries a separate cost.
• The distinction between two levels can be audited numerically; even when the criterion is chosen arbitrarily, the decision moves from argument to audit.
• Critical information’s distinction is expressed on at least two channels; a single-channel distinction disappears entirely under conditions where that channel fails.
• As the number of levels grows, the difference between adjacent levels narrows; the cheapest fix for hierarchy problems is not adding a level but removing one.

Next Step

This lesson dealt with separating elements from one another. The interface’s second job is connecting elements to one another: how is it understood, on screen, that a record title and an author’s name belong to the same record while the shelf code is a separate piece of information? The next lesson shows that this relationship is built with space rather than lines or frames, and it uses computation to show how spacing ratios determine perceived grouping.