px, rem & em Converter

Convert CSS font-size values between px, rem, em, pt, pica, and percent using a configurable base font size.

Design

CSS font-size unit converter

Convert CSS font-size values between px, rem, em, pt, pica, and percent using a selected base font size.

Base presets

Result

1 rem

16 px equals 1 rem at a 16 px base font size.

Source unit
px
Base font size
16 px

Absolute

Pixels (px) 16
Points (pt) 12
Picas (pc) 1

Relative

Root Em (rem) 1
Em (em) 1
Percent (%) 100

Conversion note

This calculator treats rem, em, and % as font-size relationships against the selected base. Absolute print units use the CSS standard of 96 pixels per inch.

Also in Typography & Design

Case Converter Color Converter Digital Image Resolution Converter Image Format Converter Paper Size Converter Pixels To Inches Converter Point / Pixel / mm Converter Resolution & Print Size Helper Typography Unit Converter

CSS Units

px rem em converter: how CSS font units map to root font size

A px rem em converter helps you move the same CSS font-size value between absolute pixel values and font-relative units. This calculator treats `rem`, `em`, and `%` as font-size relationships against the selected base size, which is useful for token planning, design audits, and type-scale checks.

How px, rem, em, and percent relate

Pixels are the most direct size label in CSS, but `rem`, `em`, and `%` are relative. This calculator models all three relative units against the selected base font size so you can compare font-size values without recalculating the ratios manually.

In many design systems, the practical starting point is a 16 px root size. Under that assumption, 16 px equals 1 rem, 24 px equals 1.5 rem, and 32 px equals 2 rem. If the root size changes, those relationships change too.

rem = px / root font size

Converts a pixel value into root-relative units.

px = rem × root font size

Converts a rem value back into pixels.

percent = (px / root font size) × 100

Expresses the same size as a percentage of the base font size.

When each unit is useful

Pixels are often easiest for exact handoff, quick prototypes, and assets that need a fixed numeric target. `rem` is useful when you want a scale that follows the root font size, which helps with accessibility-minded typography systems and consistent spacing tokens.

`em` is often used when a component should scale relative to its own text size. This converter uses the selected base as a planning assumption for `em` and `%`, so it is best suited to font-size comparisons rather than every possible CSS layout context.

Worked example: 24 px on a 16 px base

If the base font size is 16 px, then 24 px equals 1.5 rem and 150%. The same number can also be written in points or picas for print-oriented reference, but the web layout behaviour comes primarily from the CSS-relative units.

If that base rises to 20 px, the same 24 px value becomes 1.2 rem instead of 1.5 rem. That is why the base size matters whenever you convert between absolute and relative CSS units.

Frequently asked questions

Is rem always better than px?

Not automatically. `rem` is often better for scalable typography systems because it follows the root font size, but `px` is still useful for fixed targets, borders, raster assets, and exact spacing decisions. The better unit depends on whether the size should stay fixed or scale with type.

 What is the difference between rem and em?

`rem` is based on the root font size of the document, while `em` is based on the current element context. This page uses the selected base size as a planning assumption for both, which makes it useful for type-scale comparison rather than for modelling every nested CSS context.

 Why does changing the base font size change the conversion?

Because relative units are ratios, not fixed measurements. If the base changes, the number of rem, em, or percent units needed to represent the same pixel size also changes.

 Why does this page also show pt and pica values?

Those units are still useful in typography and print-reference work. Showing them alongside px, rem, and percent makes it easier to compare web and print-oriented unit systems from the same input.

Related

More from nearby categories

These related calculators come from the same leaf category, nearby sibling categories, or the same top-level topic.

Digital Image Resolution Converter

Convert raster image density between DPI, PPI, DPCM, DPMM, and LPI without changing physical print size.

Open calculator

Case Converter

Convert text between lowercase, UPPERCASE, Title Case, sentence case, camelCase, PascalCase, snake_case, and kebab-case formats.

Open calculator

Color Converter

Convert one colour between HEX, RGB, HSL, HSV, and CMYK with normalized output for web and print handoff.

Open calculator

Point / Pixel / mm Converter

Convert typography measurements between points, pixels, millimetres, centimetres, inches, and picas with selectable DPI assumptions.

Open calculator

Privacy choices

If you allow analytics, we may use Google Analytics and Microsoft Clarity to better understand how the site is used. Analytics remain off unless you accept.