In a design system's text styles, how do size and weight contrast create hierarchy, and why do near-identical neighbouring styles fail?
answer
- readers rank by difference
- bigger and heavier reads first
- change more than one property
- weight is cheaper than size
- a tiny difference looks like a mistake
basics
~20 sReaders rank text by how different it looks: larger and heavier text reads as more important. Adjacent styles need a clearly visible gap, usually in size and weight together; a one-unit or one-weight difference looks like inconsistency, not a level.
solid answer
~50 sHierarchy is the order in which readers notice and rank text, and it comes from **contrast** between styles. **Size** is the strongest lever and **weight** the next; color emphasis, letter case, spacing and position add to them. Adjacent levels need a difference readers perceive at a glance — commonly by changing two properties at once, such as a step up in size plus a heavier weight, or one property dramatically. In a ride-hailing driver app, a ride request must be read in a second or two: a bold display fare, a medium-weight pickup address, a regular caption for the rider's rating. When two neighbouring styles differ by one size unit at the same weight, readers cannot tell which is more important, so the difference looks like a mistake and both levels lose meaning. Weight is especially useful on small screens, where it creates contrast without spending scarce size.
go deeper
Recall that size and weight are the main hierarchy levers and that neighbouring styles need a clearly visible difference.
Explain why tiny differences read as mistakes, how combining size and weight gives dependable levels, and why more levels blur hierarchy.
Show you can diagnose a screen where the wrong item wins attention and fix it by adjusting contrast between neighbours rather than enlarging text.
Discuss how a system limits levels per screen while offering enough styles overall, and how that choice holds up across very different surfaces.
## What hierarchy is **Typographic hierarchy** is the order in which a reader notices text and the importance they assign to each piece. People scan before they read: the eye goes first to what stands out most, then to the next most prominent thing. A system's text styles encode that order, so the most important information on every screen wins attention and secondary detail recedes. Hierarchy is created by **contrast** — visible difference between styles — not by any single property. ## The levers | Lever | Effect | Cost or limit | |---|---|---| | **Size** | Strongest signal of importance | Uses scarce screen space; large text wraps sooner | | **Weight** | Strong signal at the same size | Very heavy weights reduce legibility of long text; each weight may be another font file | | **Color and emphasis** | Pushes secondary text back | De-emphasized text must still meet contrast requirements | | **Case and letter spacing** | Uppercase small labels read as a separate category | Uppercase slows reading of long text | | **Spacing and position** | Space above a heading groups what follows | Depends on layout, not only on the style | ## Why small differences fail - **Readers cannot rank them.** A heading at 17 medium next to one at 16 medium does not read as two levels; it reads as the same level set carelessly. - **They look like errors.** Near-identical styles side by side suggest inconsistency, which lowers trust in the whole screen. - **They dilute the system.** When two styles are interchangeable, people pick either, and the levels stop meaning anything. - **Glance conditions erase them.** A driver checks a ride request briefly, sometimes in bright sunlight, on a phone in a mount; subtle differences simply vanish there. A common rule of thumb — practice, not a standard — is that adjacent levels should differ in at least two properties, or in one by a clearly visible amount. ## Combining size and weight 1. **Give the top of the hierarchy one unmistakable style.** On a ride request, the fare uses display: largest size, bold. 2. **Separate the next level by size and weight together.** The pickup address uses body at medium weight, clearly smaller and lighter than the fare. 3. **Push metadata down with size and color.** Rating and distance use caption, smaller and de-emphasized. 4. **Use weight where size is scarce.** On a compact trip card, a title can be only slightly larger than body but noticeably heavier and still read as a different level. 5. **Check the result at a glance.** Blur or squint at the screen, or view it briefly at arm's length: the order you notice things in should match the order of importance. ## Too many levels flatten hierarchy Every extra level must fit between the same smallest and largest sizes, so each added level shrinks the gap between neighbours. Past a point, levels blur and the hierarchy becomes harder, not easier, to read. Screens usually need only three or four levels at once: one primary, one or two secondary, one tertiary. A system may offer more styles in total, but any single screen should use few. The same logic explains why making everything bold backfires. Emphasis is relative: when the fare, the address and the rider's name are all bold, none of them stands out, and the reader is back to scanning the whole card. Contrast only works if most text stays quiet so that a few items can be loud. ## A worked example: the incoming ride request An early version of the driver app set the fare at 20 bold, the pickup address at 18 bold and the rider's name at 18 medium. Drivers in a usability session read the address first and missed the fare, because the three looked nearly equal. The fix kept the same space: fare moved to the display style, the address dropped to body at medium weight, and the rider's name moved to caption beside the rating. Nothing grew; the contrast between neighbours did. The same styles were applied unchanged on both mobile platforms, because the roles, not the pixel values, carried the hierarchy.
- Can color alone separate two hierarchy levels?It can support a level but is weak on its own: a darker and a lighter gray at the same size and weight rank poorly, and de-emphasized text still has to meet contrast requirements, which limits how light it can go. Pair color with a size or weight change for a dependable level.
- Why is weight often preferred over size on small mobile screens?Size costs space and makes text wrap sooner, which is scarce on a compact card. A heavier weight at nearly the same size still reads as more important, so weight buys contrast cheaply. The limit is legibility: very heavy weights suit short titles, not running text.
- How do you test whether a screen's hierarchy works?Look at it briefly or blurred and note the order you notice things; it should match the order of importance. In usability sessions, ask participants what they saw first on a ride request. If a secondary item wins, increase contrast between neighbours rather than enlarging everything.
saying these in an interview costs you the question
- A one-unit size difference is enough to create a new hierarchy level.
- Making everything bold makes every item stand out.
- Color alone at the same size and weight is a strong hierarchy signal.
- More hierarchy levels always make a screen easier to scan.
- Hierarchy comes only from font size; weight and spacing are cosmetic.