Rem and refer are two foundational concepts in modern frontend design systems. Understanding how rem units relate to root font sizing helps teams create responsive, consistent interfaces.
These units interact with browser defaults, user preferences, and design tokens in ways that affect accessibility and scaling behavior across devices.
| Term | Definition | Typical Use | Impact on Design |
|---|---|---|---|
| rem | Root em; relative to root HTML font-size | Spacing, typography, layout | Scales with user settings, supports accessibility |
| refer | Commonly a verb; to point to or use a value | Design tokens, documentation, code references | Guides consistent implementation across components |
| root font-size | Base size defined on the html element | Baseline for rem calculations | Central to responsive and accessible scaling |
| design tokens | Named values for size, color, spacing | Theming, cross-platform consistency | Connect rem measurements to system-wide references |
Core mechanics of rem in layouts
How rem units resolve at runtime
Browsers compute rem lengths against the root element’s computed font-size. Changing this base size—via CSS or user agent settings—propagates proportionally across rem-based properties, enabling site-wide adjustments without editing each rule.
Practical implications for responsive grids
Using rem for margins, paddings, and component dimensions makes layouts react predictably to zoom and device size changes. Pairing rem with container queries and clamp functions supports refined control while preserving relative scaling.
Design token strategy with refer
Establishing a single source of truth
Teams often refer to shared design systems or token files when defining spacing scales. By mapping rem values to tokens like spacing.04 or fontSize.base, developers keep implementations aligned with product decisions.
Connecting tokens to rem measurements
A token such as baseFontSize: 16px typically maps to 1rem. When this token updates, rem-based properties adjust automatically if the root size is derived from the token, reducing drift between design and code.
Accessibility considerations with rem
Respecting user preferences
Because rem inherits from the root font-size, users who increase default text size experience proportional scaling across rem-based elements. Avoid locking typography into absolute units to preserve readability.
Testing across zoom levels
Verify that layouts remain usable at 150–200% zoom. Combine rem measurements with flexible container techniques so content reflows gracefully instead of overlapping or truncating.
Implementation best practices
Setting the root font-size
Define html font-size using a combination of percentage and clamp techniques. This approach balances design precision with user accessibility while providing a stable rem baseline.
Using rem for spacing and typography
Apply rem for margins, paddings, and type scale to ensure consistency. Reserve smaller units like em for component-internal adjustments where context-specific scaling is beneficial.
Optimizing workflows with rem and refer
- Set a clear root font-size baseline aligned with design tokens
- Document how refer practices connect rem values to system tokens
- Use automated checks to verify rem-based scaling across viewports
- Audit third-party components for strict px usage that bypasses root settings
- Coordinate design and engineering on token-to-rem mappings to reduce rework
FAQ
Reader questions
How does changing the root font-size affect rem-based layouts?
Adjusting the html font-size scales all rem measurements proportionally, enabling global resizing while preserving relative relationships between elements.
Can rem units interact poorly with third-party widgets?
Yes, isolated widgets with hardcoded font sizes may ignore the root setting, leading to inconsistent scaling. Audit embedded components to ensure they respect user preferences.
Should I use rem or em for spacing in components?
Prefer rem for layout-level spacing and typography; use em only when a child should scale relative to its immediate parent container.
What happens if the root font-size is set in pixels?
Modern browsers still compute 1rem as equivalent to the declared pixel base, but users who adjust default text size may not see expected scaling if the root is locked absolutely.