Lesson 2 of 30

Typographic Scale & Hierarchy

Q: How would you set up the typography for a new product from scratch — what would you actually decide, in order?

A strong answer covers: Pick a base size (usually body text) and a ratio, and generate the rest of the scale from those two numbers rather than picking each size independently; Name a short list of reusable steps (e.g. sm/base/lg/xl) rather than allowing arbitrary one-off font-sizes in components; Recognize that hierarchy isn't only size — weight, case, letter-spacing, and color are independent tools that combine with size.

Font sizes picked one screen at a time drift into noise. A modular scale generates every size from one base and one ratio, so the hierarchy is a system, not a memory test.

12 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 3

A modular type scale is built from a base size and a ratio. What does the ratio actually control?

The fixed multiplier between each consecutive step in the scaleThe line-height applied to every text size in the scaleThe maximum number of sizes a product is allowed to use

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Typographic Scale & Hierarchy

What interviewers actually ask about this, and what a strong answer has to cover.

How would you set up the typography for a new product from scratch — what would you actually decide, in order?

A strong answer covers

Pick a base size (usually body text) and a ratio, and generate the rest of the scale from those two numbers rather than picking each size independently
Name a short list of reusable steps (e.g. sm/base/lg/xl) rather than allowing arbitrary one-off font-sizes in components
Recognize that hierarchy isn't only size — weight, case, letter-spacing, and color are independent tools that combine with size

Likely follow-ups

If a designer asks for one new font-size that doesn't fit the existing scale, what would you push back with, or when would you actually add a new step?
Why cap a paragraph's line length (measure) even when the container is wide enough to go longer?

Practice these with the AI interviewer →

The plain-language idea

Left to pick sizes by eye, most interfaces drift toward a pile of near-duplicates: 14px here, 15px there, 13px on a card that got built by someone else on a different day. None of it is wrong exactly — each choice looked fine in isolation — but nothing relates to anything else, and the page ends up with visual noise instead of hierarchy.

A modular scale fixes this by generating every size from two numbers: a base size (usually your body text, e.g. 16px) and a ratio (a multiplier applied at each step — 1.2, 1.25, and 1.333 are common choices, borrowed from musical intervals). Multiply up from the base for headings, divide down for captions. Every size in the interface becomes a specific rung on one ladder, not an independent decision.

See it in a real thing: this app's own scale

Praxis's own type tokens follow exactly this shape:

--p-text-sm: 0.875rem;   /* 14px */
--p-text-base: 1rem;     /* 16px — the base */
--p-text-lg: 1.125rem;   /* 18px */
--p-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20–24px */
--p-text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);    /* 24–32px */
--p-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);  /* 30–44px */

Modular type scale: derived sizes, not chosen onesStep 1 of 3

Sizes picked by eye — 14px, 17px, 22px, 29px — happen to increase, but by no consistent amount.

Notice what's absent: no component reaches for a raw font-size: 19px. Every heading, label, and paragraph in the product picks one of these named steps — which is exactly what makes a redesign like swapping the whole scale's ratio a one-line change instead of a hunt through every component.

What people usually miss

Watch out

Size is only one hierarchy tool, not the only one. Weight, color, letter-spacing, and case can each signal importance without any size change at all — a track's UPPERCASE, wide-tracked eyebrow label is smaller than the body text under it, but reads as more structural because of case and spacing, not size.
Line-height and measure matter as much as size. A large heading with cramped line-height (near 1.0–1.1) reads as a headline; the same size with body-text line-height (1.5+) reads as an accident. Line length ("measure") capped around 65–75 characters is what keeps long-form body text actually readable — this platform's own lesson prose caps at 68ch for exactly that reason.
The ratio should be picked once and defended, not adjusted per page. A scale that gets a one-off exception every few components stops being a scale — it becomes the same "picked by eye" problem with extra steps.
Bigger isn't automatically "more important." A quiz's correct-answer feedback is often the same size as its surrounding text — color and an icon carry the emphasis instead, because scaling every emphasized word up would flatten the actual heading hierarchy around it.

Why this matters in interviews

"Walk me through how you'd set up type for a new product" tests whether a candidate reaches for a system or for fifteen independent CSS declarations. The strong answer names a base size, a ratio, and a short list of named steps — and can explain why that ratio, not just that one exists.