CSS Unit Converter
px, rem, em, pt, %, vw and vh — converted against your own root and parent font sizes.
4px
0.25rem
8px
0.5rem
12px
0.75rem
16px
1rem
20px
1.25rem
24px
1.5rem
32px
2rem
40px
2.5rem
48px
3rem
64px
4rem
How to Use
- 1. Enter the value you want to convert and pick its unit.
- 2. Adjust the root font size if your project does not use the 16px default.
- 3. Set the parent font size for accurate em and % results.
- 4. Copy any converted value with one click.
Choosing the Right CSS Unit
CSS length units differ in what they are measured against, which is why a converter needs to know your context. rem resolves against the root element's font size, em against the parent's, and vw/vh against the viewport. Change the base and every derived value changes with it.
The practical consequence is that em compounds. Nest three elements each set to 1.2em and the innermost renders at 1.728× the base, not 1.2×. rem sidesteps this entirely, which is why it has become the default for type scales.
Point values come from print: 1pt is 1/72 of an inch, and CSS pins 1 inch to exactly 96px, so 12pt lands on 16px. They are worth keeping for print stylesheets and little else on screen.
One accessibility note: sizing text in px ignores a reader's browser font-size preference, while rem respects it. That is the strongest practical argument for rem over px in body copy.
Related: CSS Gradient Generator, CSS to Tailwind Color, and Aspect Ratio Calculator.
Frequently Asked Questions
What is the difference between rem and em?
Both scale with a font size, but a different one. rem is always relative to the root <html> font size, so it stays predictable everywhere. em is relative to the font size of the element’s parent, which means nested elements compound — three levels of 1.2em becomes 1.728 times the base, not 1.2.
Why is 16px the default root size?
Every major browser ships with a default root font size of 16px. That is why 1rem equals 16px unless you change it — and why overriding the root to 10px "for easier maths" is discouraged: it breaks the user’s own accessibility setting if they have increased their default text size.
How does pt relate to px in CSS?
A point is 1/72 of an inch, and CSS defines 1 inch as exactly 96px. So 1pt = 96/72 = 1.333px, and 12pt = 16px. Points come from print and are best left to print stylesheets.
When should I use vw and vh?
For sizing that should track the viewport rather than the text — full-height heroes, fluid spacing, responsive type. Be careful with vh on mobile, where browser chrome appearing and disappearing changes the viewport height mid-scroll.
Which unit should I use for font sizes?
rem, in almost all cases. It respects the reader’s browser font-size preference, which px does not, and it avoids the compounding surprise of em.
Was this tool helpful?
More Tools
Related Developer Tools
JS & CSS Minifier
JSON Formatter
Regex Tester
SQL Formatter
You Might Also Like