PX to REM Converter
Convert between PX, REM, EM, Percent (%), and Points (pt) units with customizable base font size
Live Font Size Preview
Hello
Conversion Reference
1 unit equals how many pixels
px
1
pixels
rem
16
pixels
em
16
pixels
%
0.16
pixels
pt
1.3333
pixels
CSS Style Properties
Pixels (px)
h1 {
font-size: 16px;
}Root Em (rem)
h1 {
font-size: 16rem;
}Em (em)
h1 {
font-size: 16em;
}Percentage (%)
h1 {
font-size: 16%;
}Points (pt)
h1 {
font-size: 16pt;
}About PX to REM Conversion
What is PX?
PX (Pixels) is an absolute unit that represents a fixed size on the screen. It doesn't scale with user preferences or parent elements, making it useful for precise measurements.
What is REM?
REM (Root Em) is a relative CSS unit that is based on the font size of the root element (typically 16px by default). It's useful for creating scalable, responsive designs that adapt to user preferences.
The Conversion Formula
PX ÷ Base Font Size = REM
If you have 32px and your base font size is 16px, then: 32 ÷ 16 = 2 REM
Unit Conversion Table for PX to REM
| Pixel | REM | EM | Percent | Point |
|---|---|---|---|---|
| 8px | 0.5000rem | 0.5000em | 50.00% | 6.00pt |
| 10px | 0.6250rem | 0.6250em | 62.50% | 7.50pt |
| 12px | 0.7500rem | 0.7500em | 75.00% | 9.00pt |
| 14px | 0.8750rem | 0.8750em | 87.50% | 10.50pt |
| 16px | 1.0000rem | 1.0000em | 100.00% | 12.00pt |
| 18px | 1.1250rem | 1.1250em | 112.50% | 13.50pt |
| 20px | 1.2500rem | 1.2500em | 125.00% | 15.00pt |
| 22px | 1.3750rem | 1.3750em | 137.50% | 16.50pt |
| 24px | 1.5000rem | 1.5000em | 150.00% | 18.00pt |
| 26px | 1.6250rem | 1.6250em | 162.50% | 19.50pt |
| 28px | 1.7500rem | 1.7500em | 175.00% | 21.00pt |
| 30px | 1.8750rem | 1.8750em | 187.50% | 22.50pt |
| 32px | 2.0000rem | 2.0000em | 200.00% | 24.00pt |
| 34px | 2.1250rem | 2.1250em | 212.50% | 25.50pt |
| 36px | 2.2500rem | 2.2500em | 225.00% | 27.00pt |
| 38px | 2.3750rem | 2.3750em | 237.50% | 28.50pt |
| 40px | 2.5000rem | 2.5000em | 250.00% | 30.00pt |
| 42px | 2.6250rem | 2.6250em | 262.50% | 31.50pt |
| 44px | 2.7500rem | 2.7500em | 275.00% | 33.00pt |
| 46px | 2.8750rem | 2.8750em | 287.50% | 34.50pt |
| 48px | 3.0000rem | 3.0000em | 300.00% | 36.00pt |
| 50px | 3.1250rem | 3.1250em | 312.50% | 37.50pt |
| 52px | 3.2500rem | 3.2500em | 325.00% | 39.00pt |
| 54px | 3.3750rem | 3.3750em | 337.50% | 40.50pt |
| 56px | 3.5000rem | 3.5000em | 350.00% | 42.00pt |
| 58px | 3.6250rem | 3.6250em | 362.50% | 43.50pt |
How to Convert PX to REM Online
- 1
Enter your pixel value
Type any pixel value into the "From Value" field. The default is 16px — the browser's standard base font size and equal to 1rem.
- 2
Select PX as source and REM as target
Choose "Pixels (px)" in the first dropdown and "Root Em (rem)" in the second. This converter also supports EM, Percent (%), and Points (pt) so you can compare all units at once.
- 3
Set your base font size if needed
Click "Show Settings" to change the base font size from the default 16px. If your project sets a custom root font size (e.g., 10px), enter it here to get accurate REM values.
- 4
Copy the result to your clipboard
Click Copy to grab the REM value and paste it directly into your CSS. Use the swap button to reverse the conversion direction from REM back to PX.
Common Use Cases for PX to REM Conversion
Accessible Font Sizes
Convert pixel font sizes to REM so text scales when users increase their browser's default font size. This is a key requirement for WCAG 1.4.4 (Resize text) accessibility compliance.
Translating Figma Designs to CSS
Design tools like Figma output pixel measurements. Convert those values to REM before writing your CSS to produce a scalable implementation that matches the design spec.
Building a Spacing Scale
Convert a pixel-based spacing system (4px, 8px, 12px, 16px…) to REM for use in design tokens or Tailwind config. REM-based spacing ensures your layout adapts proportionally.
Modernising Legacy CSS
Replace hardcoded pixel values in old stylesheets with REM equivalents to make your site more accessible and easier to maintain with a single root font size change.
Tailwind Custom Theme Configuration
Tailwind's default scale uses REM. When adding custom values to tailwind.config.js, convert your pixel specs to REM to stay consistent with the rest of the framework's utility classes.
Responsive Media Queries
Write breakpoints in REM instead of PX for more reliable cross-browser behaviour. Convert your pixel breakpoints (e.g., 768px → 48rem) to ensure layouts respond correctly when the browser font size changes.
Frequently Asked Questions
What is the formula to convert PX to REM?
The formula is: REM = PX ÷ Base Font Size. With the default 16px base: 32px = 2rem, 24px = 1.5rem, 14px = 0.875rem. To convert back: PX = REM × Base Font Size.
How many REM is 16px?
With the default 16px base font size, 16px = 1rem. Other common values: 8px = 0.5rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem.
What is the difference between REM and EM?
REM is always relative to the root HTML element's font size, making it predictable everywhere on the page. EM is relative to the parent element's font size, which compounds inside nested elements. Use REM for global sizing and EM for component-level scaling.
Why should I use REM instead of PX for font sizes?
PX is an absolute unit that ignores the user's browser font size preference. REM scales with the root font size, so users who set a larger default font in their browser will see proportionally larger text — improving readability and meeting accessibility standards (WCAG 1.4.4).
What base font size should I use?
The default browser base is 16px. Some projects use 10px (set via html { font-size: 62.5%; }) to make mental arithmetic easier (1rem = 10px). If you use a custom base, enter it in the Settings panel so the converter gives accurate results.
Should I use REM for padding and margin too?
Yes — using REM for spacing creates layouts that scale proportionally with the root font size. Fine details like border widths (1–2px) and box shadows are fine in PX since they don't need to grow with typography.
How do I convert multiple PX values to REM quickly?
Use the conversion table in the About section above — it lists 8px through 58px with their REM, EM, percent, and point equivalents. For values outside the table, enter them one at a time in the converter above or divide each pixel value by your base font size manually.