Typographic Scale: A System for Consistent Text
A typographic scale is a predefined set of font sizes and line heights that creates visual harmony. Design systems use it for consistent, readable text across devices. The footgun is adding one-off font sizes, which breaks the system's rhythm and consistency.
Why it exists
Without a shared system for text, interfaces become a chaotic mix of arbitrary font sizes and line heights. This makes pages hard to scan, breaks visual consistency, and degrades readability. A typographic scale was invented to solve this by providing a limited, pre-approved set of text styles.
The mental model
A typographic scale is a limited palette of font sizes and line heights for an application. Think of it as a set of pre-approved Lego bricks for text. You don't create new brick sizes for each new structure; you build new things from the standard set to ensure everything fits together perfectly and maintains a consistent look and feel.
How it works
A type scale is a collection of points, each with a defined font size and line height. The GOV.UK system, for example, uses line heights in multiples of 5px to create a consistent vertical rhythm down the page, making it easier to scan. The scale is also responsive: it defines different font sizes for small screens (like mobile) and large screens (tablet and up) to optimize legibility. In production CSS, these values are output in relative units like 'rem' or 'em' so text resizes correctly when a user zooms.
When to use it
Always start by using the existing typography styles from the scale when creating new components or pages within a design system. It should be the default choice for any text element, from large headings to small body copy, to maintain visual consistency and readability.
When not to use it
Avoid creating new styles that are not on the scale. If you think you need a new style, first try to align it with one of the existing points on the scale. The common footgun is to create a one-off font size for a new component, which undermines the entire purpose of having a consistent, rhythmic system. True exceptions are rare and should be treated cautiously.
One canonical example
The GOV.UK design system uses a responsive type scale. Its largest heading style, 'govuk-heading-xl', has a font size of 48px on large screens (wider than 640px). On small screens, it scales down to 32px. This ensures the heading is impactful on a desktop but doesn't overwhelm the viewport on a mobile device.
Interview question
When using a typographic scale, what is the primary negative impact of creating a one-off font size not included in the predefined system?
- a.It undermines the visual consistency and rhythmic flow that the scale is designed to achieve.Correct
- b.It prevents the text from being properly optimized for mobile and desktop screens.
- c.It forces the use of absolute units like 'px' instead of flexible 'rem' or 'em' units.
- d.It makes the design system's documentation immediately obsolete and unreliable.
Why? this is the answer
The card explicitly states that creating one-off font sizes is a 'footgun' that 'undermines the entire purpose of having a consistent, rhythmic system.' While other options might be indirect consequences, breaking visual consistency and rhythm is the primary negative impact highlighted.
Just read this? Test yourself on what you have been reading.
Read the original → design-system.service.gov.uk
- #design systems
- #css
- #typography
- #ui
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design systems — each one lists the topics its interview covers.
See open roles