BrentList logo BrentList

CSS Unit Converter (px, rem, em, pt, %)

Convert between px, rem, em, pt, and % using a configurable base font-size

1rem, 1em, and 100% all equal the base font-size in this model.

Equivalent values

UnitValue

Common px → rem values (16px base)

pxrem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
24px1.5rem
32px2rem

How to use the CSS Unit Converter

To convert CSS units, set your base font size, enter a value, and pick its unit, and the tool shows the equivalent in px, rem, em, pt, and percent. At a 16px base, 24px equals 1.5rem. It runs in your browser and is free with no signup.

  1. Set the base font size Enter the root font size your project uses, commonly 16px.
  2. Enter a value and unit Type the measurement you want to convert and choose its unit.
  3. Read the conversions See the equivalent value in px, rem, em, pt, and percent at once.
  4. Copy into your CSS Use the converted unit that fits your stylesheet.

About CSS Units

CSS offers several length units. px (pixels) is an absolute unit. rem is relative to the root font-size, and em is relative to the current element's font-size. pt (points) is a print-oriented unit where 1pt equals 1/72 of an inch, and CSS defines 96px per inch, so 1pt = 96/72 = 1.3333px. Percentages are relative to a base value.

This converter uses a single configurable base font-size (default 16px). In this simplified model, 1rem, 1em, and 100% all equal the base. For example, at a 16px base, 24px = 1.5rem and 12pt = 16px.

Using relative units like rem instead of fixed pixels helps your typography scale with the user's browser settings, improving accessibility.

Frequently Asked Questions

Divide the pixel value by the base font-size. With the standard 16px base, rem = px / 16. So 24px = 24 / 16 = 1.5rem and 32px = 2rem. Enter a value in px above to see the rem equivalent instantly.

rem is always relative to the root element's font-size, while em is relative to the font-size of the current element, so em can compound when elements are nested. This tool uses a single base for both to keep conversions simple and predictable.

In CSS, 1pt equals 1.3333px because there are 72 points per inch and 96 CSS pixels per inch (96 / 72 = 1.3333). This means 12pt equals 16px, which is why 12pt is a common default body text size.

Relative units like rem, em, and % are all calculated from a base font-size. The browser default is 16px, but if you change your root font-size in CSS, the conversions change too. Set the base above to match your project for accurate results.

rem is generally preferred for font sizes because it scales with the user's browser font-size preference, which improves accessibility. px gives you pixel-perfect control but ignores user settings. Many developers use rem for typography and spacing, and px for borders and fine details.

Related Tools

Color Converter
HEX, RGB, HSL
Base64 Encoder
Encode & decode Base64
UUID Generator
Generate unique IDs
JWT Decoder
Decode JSON Web Tokens