rem stands for "root em". It is a CSS unit of length equal to the font size set on the page's root element, the html tag. In every major browser that default is 16 pixels, so 1rem is 16px and 1.5rem is 24px unless someone changes it.
How rem gets its size
When the browser calculates a rem value, it looks at exactly one place: the computed font size of html. It ignores whatever parent the element sits inside. That is the key difference from the em unit, which compounds through nested elements. A card heading at 1.25rem is the same size on the homepage, inside a sidebar or three levels deep in a pricing table.
The root size itself comes from the visitor's browser settings unless your stylesheet overrides it. Chrome, Firefox and Safari all let people pick a larger default font. If they choose 20px, every rem on your site grows by a quarter, which is exactly the point of the unit.
A worked example with a bakery menu
A bakery sets its menu text to 1rem, item names to 1.25rem and padding around each item to 1rem. A customer with poor eyesight has set her browser's default font to 24px. The whole menu scales together: text becomes 24px, names 30px and padding 24px, so the layout keeps its proportions. Had the bakery written font-size: 16px, her setting would be ignored for that text and she would need to zoom the whole page instead.
Utility frameworks lean on this. Tailwind CSS defines its spacing and text scales in rem, so a class like p-4 produces 1rem of padding.
Why a small business should care
You rarely type rem values yourself if a builder or framework writes your CSS. It matters when you or a developer hand-edit styles: font sizes in rem respect visitor preferences, which supports accessibility guidelines about resizable text. For borders and hairlines, pixels are still fine.
Mistakes people make with rem
- Setting
html { font-size: 62.5% }and forgetting why. The trick makes 1rem equal 10px for easier maths, but every component then needs larger rem values, and third-party widgets built for a 16px root shrink. - Setting the root in pixels.
html { font-size: 16px }overrides the visitor's chosen default and cancels the main benefit. - Using rem for everything. A 1px divider line does not need to grow with text size.
- Mixing rem and em randomly. Pick rem for global sizes and use em only where you want something to follow its local text size.
Related terms
- em: the relative unit that follows the parent instead of the root.
- CSS: the language where rem is used.
- Typography: type scales are often written in rem.
- Media queries: breakpoints can also be set in rem or em.