rem
rem is the acronym for Root-Based Sizing.
Root-Based Sizing
Unlike em, which is relative to its parent HTML element, the rem unit in CSS stands for root em and is always relative to the root element’s font size. This makes it a more predictable and stable unit for defining scalable typography and spacing in web design.
Origins of rem
The rem unit is a modern extension of the em concept, introduced to solve issues with nested scaling. While em originated from traditional typography, which referred to the width of the capital letter M in a given typeface, rem was explicitly created for CSS to provide a consistent reference point for size calculations. Instead of inheriting its value from its parent element, 1rem always equals the root element’s font size, typically 16px by default.
For example, if the root <html> font size is 16px, then:
- 1rem = 16px
- 2rem = 32px
This ensures that text, spacing, and layout elements remain consistent throughout a website, regardless of nesting or parent element styles.
Use Cases for rem
- Typography Consistency: Because rem values are based on the root font size, they help maintain uniform text scaling across different sections of a site.
p { font-size: 1.2rem; /* 1.2 times the root font size */ } - Responsive Layouts: Rem ensures predictable spacing across components without the compounding issues of em.
div { padding: 2rem; /* Twice the root font size */ } - Accessibility and Scalability: Users can adjust their browser’s base font size, and all rem-based elements will scale accordingly, improving accessibility.
Difference Between rem and em
The key difference between rem and em is the reference point:
- em is relative to the parent element’s font size, which can lead to compounding issues in deeply nested elements.
- rem is always relative to the root
<html>font size, making it a more predictable unit for consistent scaling.
The rem unit provides a reliable way to define typography, spacing, and layouts in CSS. By ensuring that all values are tied to the root font size, rem prevents the cascading scaling issues of em, making it an ideal choice for modern responsive web design.
Related Martech Zone Content
