--- title: "em vs rem" slug: "em-vs-rem" category: "glossary" tags: ["glossary", "css", "typography", "em", "rem", "frontend", "accessibility"] status: "stable" last_updated: 2026-08-14 summary: "em resolves relative to the element's own font-size; rem resolves relative to the root font-size, making rem predictable across nested contexts." related: [ "[[glossary/box-model]]", "[[glossary/custom-property]]", "[[glossary/viewport]]", "[[frontend/css]]", "[[cheatsheets/css-selectors]]", ] --- ## Overview This page is the atomic definition. Full CSS guidance lives at [[frontend/css]]. `em` resolves relative to an element's own (or inherited) font-size and compounds when nested; `rem` always resolves relative to the root font-size, making it the predictable, accessible default for most sizing. ## Definition Both `em` and `rem` are relative length units in CSS, but their reference points differ. `em` resolves relative to the `font-size` of the element the property is applied to. For `font-size` itself, `em` resolves relative to the inherited `font-size`. This creates compounding: a child with `font-size: 1.2em` inside a parent with `font-size: 1.2em` inherits `1.44em` of the root, not `1.2em`. This compounding is usually an unintended bug. `rem` resolves relative to the `font-size` of the root element (``). The default browser root font-size is 16px. `1rem` is always 16px (or whatever the user has set) regardless of nesting depth. This makes `rem` predictable and accessible: users who increase their browser default font size get proportional scaling. `px` is a fixed unit that ignores user font preferences. Avoid `px` for font sizes and for spacing that should scale with text. Use `px` for borders, box shadows, and other non-text measurements. `em` is useful when sizing should scale with the component's own text: `padding: 0.5em` on a button scales correctly when the button font-size changes, without needing separate padding overrides. ## When it applies Use `rem` for global typography, spacing scales, and container sizes. Use `em` for component-internal measurements that must scale proportionally with that component's font-size (button padding, icon sizes inside labels). Avoid `px` for any measurement that benefits from user font-size scaling. Set `html { font-size: 100%; }` (not a px value) to respect user browser preferences. ## Example ```css html { font-size: 100%; } /* 16px by default */ h1 { font-size: 2rem; } /* always 2 x root = 32px */ h2 { font-size: 1.5rem; } /* always 1.5 x root = 24px */ .btn { font-size: 0.875rem; /* 14px */ padding: 0.5em 1em; /* scales with button font-size */ } ``` ## Related concepts - [[glossary/box-model]] - em and rem measurements interact with box model dimensions. - [[glossary/custom-property]] - design tokens defined as `rem` values can be shared across components. - [[glossary/viewport]] - `vw` and `vh` are the viewport-relative counterparts to em/rem. - [[frontend/css]] - the CSS deep-dive. ## Citing this term > See [[glossary/em-vs-rem|em vs rem]] (llmbestpractices.com/glossary/em-vs-rem). ## Related - [[glossary/box-model]] - [[glossary/custom-property]] - [[glossary/viewport]] - [[frontend/css]] - [[cheatsheets/css-selectors]]