Why Use This Tool?
CSS units confuse everyone eventually: 16px equals 12pt equals 1rem at the default 16px root font — but change the root and the rem math changes with it. This converter converts against your actual base font size, which is what makes the rem results meaningful.
The pt unit is a print holdover (1pt = 1/72 inch), while rem and em scale with typography — that's why accessible designs prefer rem, and why this tool lets you set the base instead of assuming 16px.
How It Works
- Enter the value and pick its unit.
- Set your site's base font size in px (16 is the browser default).
- Read the same size in all four units.
Frequently Asked Questions
How do I convert px to rem?
Divide px by your root font size: at the default 16px, 32px is 2rem. Enter your actual base in the field — sites with 18px roots give different rem values.
What's the difference between rem and em?
Both scale with font size, but rem references the root element while em references the parent element — em compounds inside nested elements, which is why rem is more predictable.
How do px and pt relate?
1pt = 4/3 px exactly (1pt is 1/72 inch, 96px = 1 inch in CSS). Print stylesheets use pt; screens use px.
Tips & Things to Watch
- Designing for accessibility: rem units respect the user's browser font-size setting.
- The 62.5% trick (base 10px) makes rem math mental-arithmetic friendly.
- pt units are for print CSS — screens render them as their px equivalent.