Rem
The rem is a CSS relative length unit whose value equals the computed font size of the document’s root element.
Build a Website with ChatGPT
The rem unit is a CSS relative length unit measured against the root element's font size.
- How it is used
- Supports accessible CSS customization by replacing pixel measurements for font sizes, padding, and margins with relative values.
- How deep it goes
- Defines default pixel equivalences and conversion examples, without detailing CSS sizing mechanics beyond browser default font settings.
- Examples
- Uses 20px, 24px, 32px, and 48px conversions, plus an entry-text rule with font-size: 20px.
- What you can do after
- Apply it by converting pixel-based CSS font sizes and spacing values into rem measurements.
CSS in Depth, Second Edition
The CSS rem unit is a relative length unit whose value is based on the computed font size of the root element.
- How it is used
- Uses rem for predictable font sizes and measurements that should follow the root rather than a component’s font size.
- How deep it goes
- Defines the root-relative calculation and works through nested lists and component resizing, without prescribing rem for every length.
- Examples
- Shows a nested list, a relatively sized panel, and navigation padding changed from em to rem.
- What you can do after
- Operate/configure it by setting the root font size for page-wide scaling and selecting rem or em for the desired component behavior.
Web Design Playground, Second Edition
The CSS relative length unit whose value is based on the computed font size of the document's root element.
- How it is used
- Supports responsive typography and vertical measurements that honor visitors’ default font-size preferences.
- How deep it goes
- Defines root-relative sizing and works through font, heading, height, spacing, and layout examples without deeper CSS inheritance internals.
- Examples
- Demonstrates 1.5rem paragraphs, responsive heading sizes, and a header changed from 64px to 4rem.
- What you can do after
- Apply it in CSS to make type and vertical spacing scale with root font-size changes.
Read how Web Design Playground, Second Edition explains rem →
Tiny CSS Projects
The CSS rem unit expresses a length relative to the font size of the document's root element.
- How it is used
- Sizes headings and form inputs relative to the root font size across several page designs.
- How deep it goes
- Defines rem, contrasts it with em, and calculates sizes from a 16px default; stops short of browser internals.
- Examples
- Shows a 4rem newspaper headline, a 2rem profile name, and 1rem form inputs.
- What you can do after
- Apply it via CSS to size headings and inputs relative to the root font size.
Math for Web Design
The rem unit is a CSS relative length unit equal to the computed font size of the root element.
- How it is used
- Uses rem to establish predictable font sizes, spacing scales, and responsive typography tied to the root element.
- How deep it goes
- Explains pixel conversion, inheritance contrast with em, and clamp-based scaling, but stops short of browser rendering internals.
- Examples
- Demonstrates equivalent unit declarations, nested headings, and constrained hero text scaling across phone and laptop widths.
- What you can do after
- Apply rem to prevent inherited font-size compounding and build bounded fluid typography with clamp().
Web Design Playground
A CSS font-relative length unit equal to the font size of the root element.
- How it is used
- Uses rem units to make typography and vertical spacing responsive to user font-size preferences and device sizes.
- How deep it goes
- Defines rem, works through changing default-size calculations, and contrasts it with inherited em sizing.
- Examples
- Uses 1.5rem paragraphs at 16px and 20px defaults, plus nested body, header, and h1 em rules.
- What you can do after
- Apply it via CSS font-size and vertical-measure declarations that scale with a user’s default font size.
Related concepts
- relative valuekind of · A relative value expresses a quantity in relation to a contextual reference quantity rather than as an absolute value.
- font-size propertyuses · The CSS font-size property specifies the nominal size of an element’s rendered text.
- emcontrasts with · The em is a CSS relative length unit whose computed value is based on the applicable font size.
- root elementuses · A root element is the topmost element in a document or element tree, from which all other elements descend.
- absolute unitcontrasts with · An absolute CSS length unit has a fixed reference magnitude or defined relationship to physical or CSS reference lengths rather than depending on surrounding layout.
- pixelalternative to · A pixel is either a discrete sample carrying visual information at a position in a digital image or a reference unit used to express rendered dimensions.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.