px to rem, em and pt, against your root font size.
▸ More about
Uses of CSS unit conversion
- Converting a pixel-based design spec into rem for scalable CSS
- Translating a points measurement from a design tool into web pixels
- Building a spacing scale in rem from pixel values
- Checking what a rem value resolves to at a custom root size
CSS unit conversion pitfalls
- Assuming 1rem is always 16px regardless of the root font size
- Using em for global spacing and getting compounding from nested elements
CSS unit conversion questions (5)
How do I convert px to rem?
Divide the pixel value by the root font size. At the browser default of 16px, 24px is 24 / 16 = 1.5rem. Enter your value here and the rem, em, pt, and percent equivalents appear at once. If your CSS sets a different root size, change the root field and every result updates.
What is the difference between rem and em?
A rem is always relative to the root (html) font size, so it stays predictable across the whole page. An em is relative to the font size of its own element, which means ems can compound when nested. This converter treats both against your chosen root size, which matches the common case of using them for spacing and typography.
Why should I use rem instead of px?
When you size text and spacing in rem, everything scales together if a user increases their browser font size for readability. Fixed px values ignore that preference. Using rem is a simple, widely recommended way to make a layout respect accessibility settings.
What root font size should I use?
Leave it at 16, the browser default, unless your CSS explicitly changes html { font-size }. A common pattern sets the root to 62.5% (10px) so that 1rem equals 10px for easier mental math; if you do that, set the root field to 10 here and the numbers will match your stylesheet.
How does pt relate to px?
On the web, 1 inch is defined as 96px and 72pt, so 1px equals 0.75pt and 16px equals 12pt. Points mostly appear in print styles and design handoffs from tools that measure in points, so the pt column helps you translate those specs into web pixels.