Relative and Absolute CSS Units: Express the Intended Relationship
Choosing CSS units is a modeling decision.
- Author
- absequ
- Published
- Updated
- Category
- Responsive design
- relative vs absolute units
- responsive design
- practical guide
Choosing CSS units is a modeling decision. A value might relate to the root font size, the element's font, a containing block or a viewport. Relative units are not automatically correct and absolute units are not automatically wrong. The useful question is what should change together when the environment changes.
On this page
The mental model
Rem follows the root font size, while em is relative to a relevant font size and can compound when used in nested sizing rules. Percentages depend on the property and its reference dimension. A percentage height without a suitable containing-size relationship can therefore behave differently from a percentage width.
CSS absolute units have defined relationships, but screen output does not guarantee a physical measurement. For print, millimeters can express a paper-oriented intention, while the browser and printer still have margins and scaling choices. Use print preview and exported PDF evidence rather than assuming a unit name proves correct pagination.
A practical workflow
Use root-relative units for a coherent typographic scale and consider em for details that should scale with a component's text. Use percentages or fractional grid tracks for available-space relationships. Keep maximum widths and intrinsic media dimensions explicit instead of combining unrelated constraints until a page happens to fit.
Clamp can express a bounded fluid value. Choose a useful minimum and maximum, and retain a user-scalable term in the expression. Test at zoom and larger font settings because a fluid viewport term alone may not respond as intended to all accessibility preferences.
Worked example
.reading-panel {
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid currentColor;
max-inline-size: 70rem;
}
.reading-panel h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
@media print {
.reading-panel { max-inline-size: none; padding: 10mm; }
}The border is a small fixed visual detail, while padding and type respond to different relationships. The print rule changes the presentation intentionally rather than pretending a desktop page is already a sales handout. Avoid fixed block heights for text; content should be able to grow.
When debugging, inspect the computed value and the reference it came from. A nested em scale may be responsible for oversized typography, while a hidden max-width may be responsible for premature line wrapping. Changing every value to pixels can mask the relationship without explaining the original error.
Failure modes and security
Do not use tiny text or disabled zoom as a shortcut to fit a dense design. A page can be technically within the viewport and still be unreadable. Test focus outlines, long labels and error messages as well as paragraphs.
Keep measurement choices out of untrusted arbitrary CSS. A content system can expose a small set of bounded layout hints, but should not accept executable styles or unconstrained positioning from JSON. Grid placement and internal content measure should remain separate authoring concepts.
Practice and verification
Take one component and annotate each dimension with the relationship it represents. Increase the root font size and inspect nested elements for unintended compounding. Then print the page to A4 and compare the result with the screen version. Explain why each unit was retained or changed, and verify that no fixed dimension clips content when labels or paragraphs become longer.
References
CSS length reference — MDN
CSS Values Level 4 — W3C
CSS clamp — MDN