Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 7-day crash study plan Practice more CSS interview questions

How do you change the size of text in CSS?Frontend interview answer

LowEasyCss

By FrontendAtlas Team · Updated Apr 5, 2026

Interview focus

This CSS interview question tests whether you can explain CSS text sizing in production: rem vs em vs px, zoom behavior, and accessibility pitfalls, connect it to production trade-offs, and handle common follow-up questions.

CSS text sizing in production: rem vs em vs px, zoom behavior, and accessibility pitfalls explanation without falling back to memorized docs wording
Typography and Font Size reasoning, edge cases, and production failure modes
How you would answer the most likely CSS interview follow-up

Practice more CSS interview questions

Interview quick answer

font-size is really about scale strategy: rem/em/px choices, zoom behavior, component nesting, and accessibility bugs caused by hard-coded sizes.

Full interview answer

Production decision

font-size is not just a bigger or smaller switch. It sets the scaling rules for an entire interface. The common mistake is picking units without thinking about zoom, root-size changes, nested components, or readability. In production, text sizing is a typography and accessibility decision, not only a visual one.

Unit	Type	Description
px	Absolute	Fixed pixel value. Common for precise control in static layouts.
em	Relative	Scales based on the parent element’s font size.
rem	Relative	Scales based on the root element (<html>) font size.
%	Relative	Percentage relative to the parent’s font size.
vw / vh	Viewport	Scales with viewport width or height — great for responsive text.

Common font-size units and their behavior

Example: Basic Text Size

CSS

p {
  font-size: 16px;
}

h1 {
  font-size: 2em; /* twice the size of parent font */
}

h2 {
  font-size: 1.5rem; /* 1.5 times the root font size */
}

Here, em and rem units make typography more adaptive to the overall design structure.

Responsive Typography Tip
Modern CSS allows clamp() for fluid scaling:
font-size: clamp(1rem, 2vw, 2rem); — ensures text stays readable across devices.

Practical scenario
Adjust typography for a card title and body text across breakpoints.

Common pitfalls

Setting fixed px sizes that ignore user zoom.
Using em and accidentally compounding sizes.
Not testing line-height alongside font-size.

Trade-off or test tip
Rem keeps sizes consistent but less local. Test with root font-size changes and accessibility zoom.

Still so complicated?

Think of font-size as a zoom level for your text — pixels are rigid, but rem and em scale flexibly with user preferences and layouts.

Summary

Use font-size to control text height.
Prefer relative units (rem, em) for accessibility.
Use clamp() for fluid, responsive text.
Adjust font-size to maintain visual hierarchy and readability.