Interview answer guide · 02
Refine typography
How do you choose line-height and spacing, load fonts responsibly, and prevent typography from shifting the page?
A clear answer
What I would say in an interview.
I start with readable body text and use a unitless line-height so it scales with inherited font sizes. I set spacing as a small, repeatable scale rather than picking unrelated values per component. For web fonts, I provide a close fallback, load only the faces I need, and choose a loading strategy that does not leave text invisible for too long. Because fallback and final fonts can have different metrics, I test the page while the font is delayed and use compatible fallbacks or font metric overrides when necessary. I also reserve dimensions for media and embeds so they cannot push text after it has rendered.
Key points
Details worth backing up.
- 01
A unitless line-height inherits predictably; MDN recommends at least 1.5 for main paragraph content.
- 02
Use a spacing scale so headings, paragraphs, and components maintain a consistent visual rhythm.
- 03
Preload only critical fonts and use `font-display` intentionally; match fallbacks closely to reduce reflow.
- 04
Give images, video, and embeds dimensions or an aspect ratio before they load.
References