A rem is a flexible CSS size unit. Think of the root element’s font size as the page’s master measuring cup: 1rem equals that root size, and other rem values scale from it. Unlike a fixed pixel value, a rem-based size can follow a visitor’s chosen default text size. section 7.11
That flexibility matters because people may increase their browser’s default font size for easier reading. If the default is 16px, 1.5rem renders as 24px. If it becomes 20px, the same 1.5rem renders as 30px, keeping the same proportion instead of forcing text back to a fixed size. section 7.11 section 14.7
Use rem values in a few small steps:
- Start with font-size. Replace a fixed value such as 16px with a relative value such as 1rem. section 14.8
- Use larger or smaller proportions when needed: 1.5rem is one and a half times the root font size, while 2rem is twice it. section 7.11
- Carry rem beyond text to vertical measurements such as height, padding, and margins. section 14.13
- Let the browser’s root or user-specified size do the scaling work rather than locking typography to pixels. section 7.11 section 14.7
A responsive type rule
Suppose a browser default is 16px: p { font-size: 1.5rem; } The paragraph renders at 24px. If a visitor changes the default to 20px, it renders at 30px. The CSS rule stays the same, but the reading size adjusts with the visitor’s preference. section 7.11
rem and em are both relative units, but they measure from different places. An em can be based on an element’s inherited or defined font size, so nested font-size rules can build on parent sizes. A rem instead refers to the root element’s font size, giving font-size choices one shared reference point. section 7.11 section 14.7
| Unit | Name | Description |
px |
pixel | An absolute measurement equal to 1/96 of an inch |
pt |
point | An absolute measurement equal to 1/72 of an inch |
em |
em | A relative measurement equal to the element's default, inherited, or defined font size |
rem |
root em | A relative measurement equal to the font size of the root element of the web page |
vw |
viewport width | A relative measurement equal to 1/100 of the current width of the browser window |
vh |
viewport height | A relative measurement equal to 1/100 of the current height of the browser window |
Compare rem with px, em, vw, and vh to see which reference each CSS unit uses. section 7.11
A friendly rule of thumb: use rem when you want typography and vertical spacing to remain proportional as reading preferences and screen sizes change. Try changing a paragraph from px to rem, then adjust the browser’s default font size and watch the proportion hold. section 14.13 section 14.7
