px to rem Converter · 7 min read
CSS Units History: From px to rem to Viewport Units
CSS units have expanded dramatically since 1996. From the original absolute and relative units to viewport units, container queries, and the modern cascade — here is every major CSS unit and why it exists.
The Original CSS1 Units (1996)
CSS Level 1 (1996) defined two categories of length units:
Absolute Units
Physical measurements intended to produce consistent sizes regardless of display:
- px — pixel (CSS reference pixel, 1/96 inch)
- pt — point (1/72 inch, from typography)
- pc — pica (12 points, 1/6 inch)
- cm — centimetre
- mm — millimetre
- in — inch
Physical units (pt, pc, cm, mm, in) are only meaningful on print media or in print stylesheets. On screens, they are converted to CSS pixels and lose their physical meaning — a "1cm" element is not 1 centimetre on screen. This makes them appropriate only for print stylesheets targeting known paper sizes.
Relative Units (CSS1)
- em — relative to the font-size of the current element. If the current element has font-size: 16px, 1em = 16px. If nested inside a parent with font-size: 20px, and the current element inherits that, 1em = 20px.
- % — percentage, relative to the parent element's value for the same property (or another reference, depending on the property)
The em unit was used extensively in early accessible web design as a way to make layouts scale with the user's font preferences. However, em units compound in nested elements — a 1.5em element inside a 1.2em parent is 1.5 × 1.2 = 1.8em relative to the root, making calculations complex in deeply nested layouts.
CSS2 and CSS2.1: No New Units
CSS Level 2 (1998) and CSS 2.1 (2011) did not add significant new length units. The unit system remained as defined in CSS1. The era's web design practice used px for precise control and em for accessible text sizing, often in combination: fixed px layouts with em-based typography.
rem: Root em (CSS3, ~2013)
The rem unit (root em) was defined in the CSS Values and Units Module Level 3 specification and achieved widespread browser support around 2013 (supported in all major browsers as of IE9).
rem solves the em compounding problem: while em is relative to the current element's font size, rem is always relative to the root element's (the <html> element's) font size. There is no compounding in nested elements. 1rem always equals whatever the root font-size is, regardless of nesting depth.
The most common use pattern:
- Set a base font-size on the root element (
:root { font-size: 16px; }or let the browser default apply) - Specify all typography and spacing in rem units
- If the user has set a larger browser default font-size, all rem values scale proportionally, providing free accessibility
The "62.5% trick" became popular: html { font-size: 62.5%; } sets the root to 10px (62.5% of the default 16px), making 1rem = 10px and simplifying mental math (1.6rem = 16px, 2.4rem = 24px). This approach is now debated — it overrides the user's root font-size preference, which is part of the accessibility benefit rem provides.
Viewport Units (CSS3, ~2012–2014)
Viewport units are relative to the browser viewport (the visible area of the browser window):
- vw — 1% of the viewport width
- vh — 1% of the viewport height
- vmin — 1% of the smaller viewport dimension
- vmax — 1% of the larger viewport dimension
Viewport units enabled several design patterns that were previously complex or impossible: full-viewport-height sections (height: 100vh), fluid typography that scales smoothly between viewport sizes (font-size: calc(16px + 2vw)), and elements that adapt to screen size without JavaScript.
The vh unit became notorious for a mobile browser problem: on mobile browsers, 100vh does not reliably equal the visible viewport height, because mobile browsers' address bars appear and disappear as the user scrolls, changing the effective viewport height without changing the vh value. This inconsistency required workarounds.
Dynamic Viewport Units (CSS4, 2022)
CSS Values and Units Level 4 introduced dynamic viewport units to address the mobile browser address bar problem:
- svh/svw — small viewport height/width: the smallest the viewport gets (with address bar shown)
- lvh/lvw — large viewport height/width: the largest the viewport gets (with address bar hidden)
- dvh/dvw — dynamic viewport height/width: the current actual viewport size, updating as the address bar appears and disappears
dvh is the replacement for the problematic 100vh on mobile — it always equals the current visible viewport height. Wide support arrived in 2023.
Container Query Units (CSS4, 2023)
Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) are relative to the size of a container element rather than the viewport. They enable component-based responsive design — a card component can size itself based on its container's width regardless of the viewport size, enabling reuse across different layout contexts.
The Unit Decision Framework
| Use Case | Recommended Unit | Why |
|---|---|---|
| Font sizes | rem | Scales with user's font preference |
| Spacing (margins, padding) | rem | Consistent with font scale |
| Border widths | px | Sub-pixel; not expected to scale with font |
| Media query breakpoints | em or rem | Responds to zoom level, not just screen size |
| Full-height sections | dvh or svh | Handles mobile browser chrome |
| Fluid widths | % or vw | Relative to container or viewport |
| Component-relative sizes | cqw/cqh | Container query units for nested components |
| Print stylesheets | pt, mm, cm | Physical measurements meaningful in print |
References
- W3C. (2021). CSS Values and Units Module Level 3. W3C Recommendation.
- W3C. (2023). CSS Values and Units Module Level 4. W3C Working Draft.
- W3C. (1996). CSS1 — Cascading Style Sheets Level 1. W3C Recommendation.
- MDN Web Docs. (2023). CSS Values and units. developer.mozilla.org.
- Coyier, C. (2019). Fun with Viewport Units. CSS-Tricks.