CSS Unit Converter
Convert px, rem, em, pt and percent together, with a configurable root font size.
What this tool does
A CSS unit converter translates between px, rem, em, pt and percent using one root font size: px = rem × root, so at the default 16 px root, 2.5 rem is 40 px. The converter changes every unit at once rather than one pair per lookup, and shows the default 16 px assumption explicitly, since that is where rem conversions break - a page with a 10 px root turns the same 2.5 rem into 25 px, not 40.
Converts between px, rem, em, pt and percent with a configurable root font size.
Converts a whole value at once rather than one unit pair per lookup.
Shows the default 16px root assumption explicitly, since that is where rem conversions break.
Handles points against pixels for print styles, where 1 pt is 1.333 px at the standard root.
How to use it
- Enter a value in any unit field.
- Set the root font size if it is not the default 16 px.
- Read every other unit update together.
- Check the pt result for print styles at 96 DPI.
Why use this calculator
Converting CSS units is the small arithmetic that sits under every design handoff: a Figma frame in px has to become rem for responsive type, a pt figure from a print stylesheet has to become px, and em has to be judged against its own context. Doing it as five separate lookups invites five separate rounding errors - and the rem conversions silently assume a 16 px root that the page may not actually use, which is where conversions break.
Why we built it
We built the CSS unit converter to convert every unit together with the root font size in view, because the pairs are all the same conversion viewed from different angles and seeing them at once removes the doubt. The px to rem converter runs the single most common pair on its own, the pixels to inches converter handles the physical side for print, and the percentage calculator works the percent arithmetic when a value becomes a proportion.
For measurements outside the stylesheet, the length converter and the mm to inches converter carry the physical units.
Who this tool is for
- Front-end developers converting design values into rem
- Designers handing px figures to an engineering team
- Anyone writing print styles in points
- Developers auditing a site that sets a non-default root font size
When to use it
- Turning a px mockup measurement into rem values.
- Checking what em resolves to against the parent size.
- Converting pt figures from a print stylesheet.
- Auditing a page whose root font size is not 16 px.
How it is calculated
Everything resolves through the root font size: px = rem × root, rem = px ÷ root. Em multiplies against the current element's font size rather than the root - the converter treats it against the same reference for comparison and flags the difference. Points convert at 96 DPI: px = pt × 96 ÷ 72, so 1 pt is 1.333 px. Percent is the value as a proportion of 100, matching how percent units work against the parent.
Worked example: 2.5 rem at the default 16 px root is 40 px, which is 30 pt, and 250%. At a 10 px root the same 2.5 rem is 25 px - the number on screen changed without the stylesheet changing, which is exactly why the root is shown rather than assumed.
em and rem differ by what they resolve against: rem always uses the root font size, em uses the element's own inherited font size. They agree only when every ancestor uses the same size - the converter's em figure assumes that, so nested scaling contexts need checking by hand.
The unit reference
| Unit | Resolves against | 2.5 of it at 16 px root |
|---|---|---|
| px | Nothing - absolute | 2.5 px |
| rem | Root font size | 40 px |
| em | Element's own font size | 40 px (if 16 px) |
| pt | 1/72 inch (print) | 1.875 pt |
| % | Parent value | 2.5% of parent |
A worked example
These are the values the calculator opens with, so you can see exactly what it does with them. Change any value on the page and the result updates; the figures below come from the same calculation.
| Input | Value |
|---|---|
| Value | 2.5 rem |
| Root font size | 16 px |
With those inputs, the calculator returns:
- Pixels: 40 px
- Points: 30 pt
- Percent: 250%
- At a 10 px root: 25 px instead
Common conversions
| px | rem at 16 px | rem at 10 px | pt |
|---|---|---|---|
| 8 | 0.5 | 0.8 | 6 |
| 16 | 1 | 1.6 | 12 |
| 24 | 1.5 | 2.4 | 18 |
| 40 | 2.5 | 4 | 30 |
| 64 | 4 | 6.4 | 48 |
The 10 px column exists because several frameworks set a smaller root for denser interfaces - reading a rem figure without knowing which root applies is how type comes out wrong.
What you enter, and what you get back
| Item | Details |
|---|---|
| Value in any unit | Type into px, rem, em, pt or percent - whichever you have. |
| Root font size | Defaults to 16 px; set it if the page overrides it. |
| Result | Every other unit at once, plus the alt-root comparison. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| rem values render wrong | Root font size not 16 px. | Set the actual root in the calculator and re-read. |
| em sizes compound | Each level resolves against its own parent. | Audit the nesting; rem removes the problem. |
| Print styles off by a third | pt and px confused (72 vs 96). | 1 pt = 1.333 px - use the pt result. |
| Percent drifts | Percent resolved against the parent, not root. | Confirm what the parent value is. |
Assumptions and limitations
- em is resolved against the same reference as rem for comparison; nested font-size contexts can differ.
- Percent depends on what the parent value actually is - the figure is a proportion, not an absolute.
- Browser minimum font sizes and user zoom settings can override computed values.
- Point conversion assumes the standard 96 DPI CSS-to-print mapping.
Frequently asked questions
How do I convert px to rem?
Divide pixels by the root font size. At the default 16 px root, 40 px is 2.5 rem (40 ÷ 16). If the page sets a different root - 10 px, say - the same 40 px is 4 rem, which is why the converter takes the root as an input.
How do I convert rem to px?
Multiply rem by the root font size. 2.5 rem at 16 px is 40 px; at a 10 px root the same 2.5 rem is 25 px. The calculator runs both directions from whichever value you type.
What is the difference between rem and em?
rem resolves against the root font size, always; em resolves against the element's own inherited font size. rem is predictable at any nesting depth, while em compounds as sizes change up the tree - which makes it right for scaling local text and risky for global spacing.
How do I convert points to pixels?
Multiply points by 96 ÷ 72, which is 1.333. So 12 pt is 16 px and 9 pt is 12 px. The ratio comes from CSS defining px as 1/96 inch while print defines pt as 1/72 inch.
What is the default root font size?
16 pixels - the browser default for html font-size, and the assumption behind every rem conversion. Pages and frameworks can override it (many set 10 px for easier mental arithmetic), so confirm the root before trusting a rem figure.
How do I convert px to pt?
Divide pixels by 1.333, or multiply by 0.75: 16 px is 12 pt and 40 px is 30 pt. It is the same 96-to-72 ratio as px to rem's inverse, since points and the CSS pixel are both defined against physical inch fractions.