Calculateus

CSS Font Size Unit Converter

Convert CSS font sizes between pixels, points, em, rem and percent.

Result

Points (pt)
12
rem (root 16px)
1
em (relative to parent)
1
Percent (%)
100%

rem is always relative to the root (html) element's font size, typically 16px by default, while em is relative to the immediate parent's font size - the two only match when the parent is also 16px.

About the CSS Font Size Units

The CSS Font Size Unit Converter takes a pixel value and translates it into the other sizing units browsers understand: points, rem, em, and percent. It is built for front-end developers and designers who need to turn a pixel-based design spec into the relative units a stylesheet actually uses, or who are trying to work out why nested text is rendering larger or smaller than expected.

How It Works

Enter a font size in pixels along with the font size of its parent element, which defaults to 16px, the typical browser base size. The calculator multiplies the pixel value by 0.75 to get points, divides it by 16 to get rem, and divides it by the parent size to get em and percent. Because rem always measures against the root element while em measures against the immediate parent, the two only match when that parent's own font size happens to be 16px.

Points = px x 0.75. rem = px / 16. em = px / parent font size (px). Percent = (px / parent font size) x 100.

Examples

Default 16px Text

At the default 16px with a 16px parent, the result is 12pt, 1rem, 1em and 100%, since every unit lines up exactly at the browser's base size.

20px Text Inside a 10px Parent

A 20px heading placed inside an element with a 10px font size converts to 15pt and 1.25rem, both fixed relative to the 16px root, but to 2em and 200% relative to its own parent, showing how em and rem diverge once the parent isn't 16px.

Advantages

  • Shows rem, em, points and percent side by side from one pixel value, instead of doing four separate manual conversions.
  • Makes the difference between rem (root-relative) and em (parent-relative) concrete with an actual number rather than just the general rule.
  • Useful for translating a pixel-based mockup into the relative units a maintainable stylesheet should use.

Common Mistakes

  • Assuming rem and em will always match, when they only match if the parent element's font size is also exactly 16px.
  • Forgetting that a browser or user accessibility setting can change the root font size, which silently changes what a rem value renders as.
  • Using em for deeply nested components without accounting for compounding, since each parent's em stacks multiplicatively down the tree.

Edge Cases to Watch For

  • If the parent font size field is left at 0 or blank, the calculator falls back to 16px so the em and percent figures do not divide by zero.
  • rem is always calculated against a fixed 16px root, so it will read wrong for any project that has changed the html element's own font size away from the browser default.
  • Because em compounds with each level of nesting in real CSS, a single em value from this tool describes only one parent-child relationship, not a deeply nested chain.

Common Use Cases

  • Front-end developers converting a Figma or Sketch pixel spec into rem-based CSS.
  • Designers checking how a font size will scale relative to a component's parent before handing off to development.
  • Developers auditing an existing stylesheet by seeing the pixel equivalent of a given rem or em value.
Written & fact-checked by the Calculateus TeamLast updated August 5, 2026How we verify our formulas

Frequently asked questions

Should I use rem or em in my CSS?

rem is generally more predictable since it always scales from the root font size regardless of nesting, while em compounds with each nested parent's font size - most developers default to rem for font sizes and reserve em for spacing that should scale with a specific component's own text size.

Related calculators

Length ConverterConvert between millimeters, centimeters, meters, kilometers, inches, feet, yards and miles.Weight ConverterConvert between milligrams, grams, kilograms, ounces, pounds and stone.Temperature ConverterConvert temperatures between Celsius, Fahrenheit and Kelvin.Volume ConverterConvert between milliliters, liters, teaspoons, tablespoons, cups, pints, quarts and gallons.

Conclusion

This converter turns a single pixel measurement into the full set of units modern CSS relies on, making the practical difference between root-relative and parent-relative sizing visible rather than theoretical. It works as a quick reference for keeping typography consistent through a design-to-code handoff.

References