Developer Tools Platform
Skip to content
Categories

CSS Unit Converter

Convert between px, rem, em, and pt.

Overview

  • Converts CSS units between px, rem, em, and pt.
  • Uses a base font size (default 16px) to convert between rem/em and px. If your site's root element uses a different font size, you can change this value.
  • Enter just one number, and the value in all four units is displayed at once.

Usage

  1. Enter the number you want to convert into "Value".
  2. Select px, rem, em, or pt as the "From unit".
  3. Set the "Base font size" used to convert to/from rem and em (default is 16px).
  4. Click "Convert" to see the value in all four units.

Example

Input

16px (base font size 16px)

Output

1rem / 1em / 12pt

Use Cases

  • Converting a px value from a design mockup into rem for CSS implementation
  • Converting a pt value used in print or PDF into px/rem for web production
  • Recalculating existing px values into rem for a project whose root font size has changed

FAQ

Why are the rem and em results the same?

Since this tool has no information about a parent element's font size, it calculates em the same way as rem, based on the base font size. Note that actual em values depend on the parent element's font size.

What formula is used to convert pt?

Based on the CSS specification (1in = 96px = 72pt), it converts using 1pt = 96/72 px.

What is the base font size used for?

It is used to convert between rem/em and px. Browsers default to 16px, but change it if your site's root font size differs.

Notes

  • em is calculated based on the base font size the same way as rem. Actual em values depend on the parent element's font size, so this may differ from the exact value.
  • pt is converted based on the CSS specification's definition (1in = 96px = 72pt).
  • The base font size is used only for converting between rem/em and px; it has no effect on pt conversion.

Related Tools

Color Converter

Convert color codes between HEX, RGB, and HSL.

Recommended
CSS Gradient Generator

Generate linear-gradient or radial-gradient CSS from colors and positions.

CSS Grid Generator

Generate CSS Grid styles from column count, row count, and gap.

Favicon Generator

Generate multi-size favicon PNGs, a manifest, and HTML tags from an image.