Implement a typographic scale using design tokens and accessible properties
Token-driven typography and accessibility. Start with base size (14-16px) and ratio token, compute sizes, then bundle font-size with line-height, letter-spacing, weight, and family in composite tokens. Red flag: ignoring line-height, spacing, or composites.
What's really being asked
This question tests whether you understand design token architecture beyond simple variables, specifically how to build a proportional typographic scale using token references and mathematical ratios. It also checks for accessibility awareness and whether you know which properties must travel together to create usable text styles.
The full answer
A strong answer starts by defining a base font size token, typically 14 to 16 pixels, because accessibility depends on a readable default. Next, it introduces a separate number token for the scale ratio, such as 1.2 for subtle app UI or 1.618 for dramatic marketing hierarchies. The candidate should explain that font size tokens can reference the base size and the ratio token to calculate each step, ensuring visual harmony without hardcoding every value. Beyond font size, the answer must mention line height, letter spacing, font weight, and font family as essential companions, because a scale is unusable if text collides or weights clash. The best responses advocate for composite typography tokens that bundle these properties into platform agnostic presets, so a single token like typography heading large applies size, leading, tracking, and weight all at once. The candidate should also note that content heavy designs need a wider spread between smallest and largest sizes, while utilitarian app interfaces stay compressed.
The mistakes people make
Red flags include picking font sizes arbitrarily without a ratio, treating typography tokens as only font size and color, or suggesting every size be manually entered in pixels. Another weak pattern is ignoring line height and letter spacing entirely, which produces inaccessible, cramped text. Failing to mention composite tokens suggests a lack of systems thinking, since the whole point of a token system is to distribute complete styles across design and engineering.
What usually comes next
An interviewer might ask how you would handle responsive scaling, perhaps by referencing the same ratio token at different breakpoints or by maintaining separate but related scales for mobile and desktop. They may also probe how you keep design and code in sync, which is where exporting tokens to JSON and consuming them in CSS or component libraries becomes relevant. Another angle is theming, such as swapping the base size or ratio for accessibility preferences like large text modes.
A concrete example
Imagine a Penpot starter kit using eleven tokens. You set font size base to 15px and scale ratio to 1.2. A font size token for medium text references font size base directly, while large text references font size base multiplied by scale ratio. Extra large references large multiplied by scale ratio again. You then create composite typography tokens for body text that combine the medium font size token with a line height of 1.5 and a font weight of 400, and a separate composite token for labels that uses the small font size token with a line height of 1.2 and letter spacing of 0.5 pixels. When the base or ratio needs to change, every derived size and composite style updates automatically.
Interview question
Why should typography tokens bundle font-size with properties like line-height, letter-spacing, and weight?
- a.It enables responsive scaling by referencing the same ratio token at different breakpoints
- b.It simplifies the design handoff by reducing the number of variables exported to code
- c.It ensures proportional sizing so every step is mathematically derived from the base
- d.It creates complete, platform-agnostic presets that prevent inaccessible, cramped textCorrect
Why? this is the answer
The card explains that composite tokens bundle size, leading, tracking, and weight into platform-agnostic presets because a scale is unusable if text collides or weights clash. Option C describes the role of the base size and ratio token, not the purpose of bundling properties into composites.
Just read this? Test yourself on what you have been reading.
Read the original → penpot.app
- #design systems
- #design tokens
- #typography
- #accessibility
- #frontend
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