Root Font-Size and px to rem

Most px → rem confusion comes from ignoring root font-size context.

The default mental model

If:

html {
  font-size: 16px;
}

Then:

px	rem
8px	0.5rem
16px	1rem
24px	1.5rem
32px	2rem

Formula:

rem = px / rootFontSize

When teams change the root

Some projects use:

html {
  font-size: 62.5%; /* often resolves to 10px if browser default is 16px */
}

Now 1rem may equal 10px, not 16px. That makes mental math easier (24px → 2.4rem) but breaks assumptions if mixed with values converted from a 16px base.

Always confirm the project's root strategy before converting a design file.

Design handoff workflow

1. Confirm root font-size in the target codebase.
2. Convert spacing and typography px values to rem tokens.
3. Keep borders and shadows in px if the design system does.
4. Document the base in README or tokens file.

Example token output:

:root {
  --space-4: 1rem;    /* 16px at 16px root */
  --space-6: 1.5rem;  /* 24px */
  --text-lg: 1.125rem; /* 18px */
}

em enters when parent differs

If a component sets:

.callout {
  font-size: 0.875rem;
}

Then 1em padding inside .callout is relative to 0.875rem, not the root. For nested component math, set parent font-size in your converter context.

Common mistakes

• Converting px to rem with the wrong root base
• Copying rem values from one project into another with different root settings
• Using rem for widths that should follow a local component scale (em may fit better)

Key takeaway

px → rem is simple division only after you know the root font-size. Treat root font-size as part of the conversion input, not an afterthought.

Use the CSS Unit Converter / Clamp Generator unit convert tab with root font-size set to your project base before copying rem tokens.