CSS · Layout and visual systems

How do you build a readable type system in CSS?

MediumtypographyfontsreadabilityUpdated Oct 2026

Short answer

Use a small type scale, a resilient font stack, comfortable line length and line height, and responsive sizes with limits. Load only the weights you use and test fallback fonts.

Typography in CSS is a system, not a single font-family declaration. Size, weight, line height, spacing and measure interact. A page can look polished with one family if those relationships are consistent.

css

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 65ch;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

What to control

A limited type scale instead of arbitrary sizes
A font stack that degrades gracefully when a web font fails
Measure around 45 to 75 characters per line for body text
Tighter line height for headings and looser for body copy
font-display: swap or optional to control web font loading behaviour
Variable fonts when you need multiple weights without multiple files

Web fonts change metrics when they load, which can cause layout shift. Matching fallback metrics or using font-display appropriately reduces the jump. Test with the fallback font, not only the designed font.

Do not set body text in vw without a clamp, and do not disable user zoom. Readability depends on the user's text size and screen, not only on the design comp.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1What is a good measure for body text?
2How does font-display affect loading?
3Why can web fonts cause layout shift?
4How do you keep a type scale consistent?

Say it in the interview

I treat typography as a system: a small scale, a reliable font stack, a comfortable measure, and line heights tuned separately for body and headings. I use rem and clamp for responsive sizing, and I load only the weights I need. Web fonts can shift layout when they load, so I test the fallback and use font-display deliberately.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.

Start a free CSS interview Browse all questions

What to control

Follow-ups you should expect

Related questions

Now say it out loud.