How would you establish a modular typographic scale for a design system?

WHAT THIS TESTS: Whether you can move beyond picking font sizes by eye and instead build a rational, maintainable system. Interviewers want to see that you understand the relationship between ratio, contrast, and content density, and that you know when to follow the math and when to break it for real-world UI constraints.

A GOOD ANSWER COVERS: Four specific decisions in sequence. First, ratio selection based on the project's hierarchy needs. You should explain that a higher ratio such as 1.25 or 1.414 creates strong contrast between headings and body text, which suits marketing landing pages where you want to focus attention on captions. A lower ratio such as 1.125 works better for dashboards, mobile apps, or content-heavy interfaces where controls are dense and extreme size jumps waste space. Second, base font size and rounding. You should mention that generated values from tools like modularscale.com or type-scale.com are rarely pixel-perfect, so you round them and then prune the scale to include only the sizes your team actually needs. Third, handling missing sizes. You should note that pure modular scales often fail to produce enough small sizes for complex UIs with many labels, badges, and metadata, so it is acceptable to manually add extra small steps to fill gaps. Fourth, responsive behavior. You should describe creating parallel scales with different base sizes for desktop and mobile, which keeps the system harmonious while adapting to screen real estate.

COMMON WRONG ANSWERS: Defaulting to a one-size-fits-all ratio like the major third for every project without asking about the product context. Treating the modular scale as a rigid law rather than a starting point, which leads to awkward half-pixel sizes or missing t-shirt sizes that force teammates to invent off-system values. Ignoring the need for small sizes entirely and assuming headings and body copy are enough. Failing to mention team benefits, such as how a documented scale creates consistency across designers and reduces decision fatigue.

LIKELY FOLLOW-UPS: How would you handle line height and vertical rhythm alongside the size scale? What would you do if the marketing team wants a dramatic display size that breaks the scale? How do you enforce the scale in Figma or code so engineers do not drift? When would you choose an arithmetic scale over a modular one?

ONE CONCRETE EXAMPLE: Imagine building a B2B analytics dashboard. You start with a base of 16 pixels and a ratio of 1.125 because the interface is dense with filters, table headers, and chart labels. You generate the scale, round to even pixels, and keep sizes from 12 up to 24 pixels for standard UI. Because 12 pixels is still too large for some metadata tags, you add an 11 pixel and 10 pixel step outside the strict modular sequence. For the marketing landing page that sells the same product, you switch to a base of 18 pixels and a ratio of 1.25 so the H1 can scream while the body stays readable. Both scales live in the same token set, differentiated by theme or breakpoint.

Source: imperavi.com