PX to REM converter
Convert pixels to rem units instantly using your preferred root font size. Calculate individual values or convert multiple CSS measurements at once, then copy your results directly into your stylesheet.
| Pixels | REM | Copy |
|---|
All Developer Tools
Browse free online tools for JSON, HTML, CSS, XML, JavaScript, data conversion, and everyday development tasks.
Try a different search term or select another category.
What Is a PX to REM Converter?
A PX to REM converter is a tool that converts pixel values into rem units for use in CSS. It helps web designers and developers create scalable typography, spacing, margins, padding, and component dimensions without calculating every value manually.
PX stands for pixels, an absolute-length CSS unit. REM stands for root em and is a relative CSS unit based on the computed font size of the root HTML element. In a typical browser setup with a 16px root font size, 1rem equals 16px, 24px equals 1.5rem, and 32px equals 2rem.
Use this PX to REM converter to calculate equivalent values for your stylesheets. You can choose a root font size that matches your project, convert pixels into rem units, and use the resulting values in a responsive design system.
Remember: The conversion depends on the root font size. A value converted using a 16px root will produce a different rem result when the root font size is changed to 10px, 12px, or another value.
How to Convert PX to REM Online
Converting pixel values to rem units is straightforward. Enter the pixel amount, set the root font size, and use the calculated value in your CSS.
Type the number of pixels you want to convert, such as 12, 16, 24, or 32, into the PX input field.
Use 16px for the common default setup, or enter your project's root font size if it uses a custom value.
Divide the pixel value by the selected root font size. The result is the equivalent rem value for your CSS.
Use the converted number in declarations for font sizes, spacing, padding, margins, or other properties where a rem unit is appropriate.
PX to REM Conversion Formula
For example, to convert 24px to rem using a 16px root font size:
The result is 24px = 1.5rem when the root font size is 16px.
PX to REM Conversion Examples
The following examples use a 16px root font size. These common values are useful when converting design measurements into CSS typography and spacing units.
Pixels to REM
Smaller rem values are useful for compact spacing, small text, and selected interface dimensions.
Pixels to REM
Larger rem values are commonly used for headings, generous spacing, containers, and component dimensions.
Quick calculation: When the root font size is 16px, divide any pixel value by 16. For a different root font size, replace 16 with your selected base value.
PX to REM Conversion Table
Use this reference table to find the equivalent rem value for frequently used pixel measurements. All results are calculated with a root font size of 16px.
| Pixels (PX) | REM at 16px Root | CSS Example |
|---|---|---|
| 4px | 0.25rem | padding: 0.25rem; |
| 8px | 0.5rem | gap: 0.5rem; |
| 10px | 0.625rem | font-size: 0.625rem; |
| 12px | 0.75rem | font-size: 0.75rem; |
| 14px | 0.875rem | font-size: 0.875rem; |
| 16px | 1rem | font-size: 1rem; |
| 18px | 1.125rem | font-size: 1.125rem; |
| 20px | 1.25rem | margin: 1.25rem; |
| 24px | 1.5rem | font-size: 1.5rem; |
| 28px | 1.75rem | gap: 1.75rem; |
| 32px | 2rem | padding: 2rem; |
| 40px | 2.5rem | margin: 2.5rem; |
| 48px | 3rem | font-size: 3rem; |
| 64px | 4rem | padding: 4rem; |
| 80px | 5rem | margin: 5rem; |
| 96px | 6rem | gap: 6rem; |
The table provides common reference values rather than a limit on conversion. Any numeric pixel value can be converted by dividing it by the root font size.
How to Convert REM to PX
REM to PX conversion works in the opposite direction. Multiply the rem value by the root font size to calculate the equivalent pixel measurement.
For example, when the root font size is 16px, converting 1.5rem to pixels gives the following result:
Therefore, 1.5rem = 24px with a 16px root font size.
Common REM to PX Values
| REM | PX at 16px Root |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 0.875rem | 14px |
| 1rem | 16px |
| 1.125rem | 18px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
A bidirectional converter makes it easier to switch between design measurements in pixels and implementation values in rem units.
Understanding the Root Font Size
The root font size is the computed font size of the root HTML element. REM units are calculated relative to that size, which means the same rem value can represent different pixel measurements in different projects.
Many browsers use 16px as the initial default font size. If your stylesheet sets the root font size to another value, the conversion changes accordingly.
Standard Conversion
When the computed root font size is 16px, 1.5rem equals 24px.
Custom Conversion
If the computed root font size is 10px, 2.4rem equals 24px. The percentage declaration shown assumes an initial 16px font size.
Important: A 62.5% root font-size declaration is a common technique for obtaining a 10px root from a 16px initial size, but it should be used deliberately. Keeping the root at 100% generally better preserves the browser's default text-size preference.
Converting PX to REM with a Custom Root Size
You do not have to use 16px as your root font size. Select the value used by your project to calculate a result that corresponds to its CSS settings.
| Pixel Value | 10px Root | 12px Root | 14px Root | 16px Root |
|---|---|---|---|---|
| 8px | 0.8rem | 0.6667rem | 0.5714rem | 0.5rem |
| 12px | 1.2rem | 1rem | 0.8571rem | 0.75rem |
| 16px | 1.6rem | 1.3333rem | 1.1429rem | 1rem |
| 20px | 2rem | 1.6667rem | 1.4286rem | 1.25rem |
| 24px | 2.4rem | 2rem | 1.7143rem | 1.5rem |
| 32px | 3.2rem | 2.6667rem | 2.2857rem | 2rem |
| 48px | 4.8rem | 4rem | 3.4286rem | 3rem |
Values are shown to four decimal places where necessary. The actual conversion is calculated using the full numeric values, so rounding can create small differences when converting a displayed result back to pixels.
Why Use REM Instead of PX?
Both pixels and rem units are useful in CSS, but they behave differently. Pixels express a fixed CSS length, while rem values are tied to the computed root font size. REM can therefore make a design system easier to scale consistently.
Consistent Design Systems
Use a shared scale of rem values for typography, spacing, and component dimensions to create consistent relationships across a website.
Flexible Typography
REM-based font sizes respond to changes in the root font size, helping maintain proportional text sizing across supported settings.
Easier Global Adjustments
When a project intentionally changes its root font size, rem-based dimensions can scale together without updating every declaration individually.
Reusable Spacing Values
Use rem units for padding, margins, gaps, and other dimensions when you want those measurements to follow the root font-size scale.
When Should You Use PX?
Pixels remain useful for dimensions that are intended to stay tied to a fixed CSS length, including thin borders, small strokes, and precise details. Choose the unit based on how the element should behave rather than converting every pixel value automatically.
Practical tip: Use rem for scalable typography and spacing where appropriate, and retain px for fine details when a fixed CSS length is the more suitable choice.
PX to REM for Responsive Design and Accessibility
Responsive design involves more than changing dimensions for different screen sizes. Text readability, spacing, and the ability to accommodate user preferences are also important. REM units provide a consistent way to define sizes relative to the root font size.
When a stylesheet respects the browser's initial font-size preference, rem-based typography can scale when that preference changes. This can support users who need larger text and help maintain the intended hierarchy between headings, paragraphs, and interface labels.
Example CSS Using REM
With a computed root font size of 16px, the title is 32px, the content font size is 16px, the card padding is 24px, and the button's horizontal padding is 20px.
REM units do not automatically make a website accessible. Also consider sufficient contrast, readable line lengths, flexible layouts, appropriate line height, and whether text remains usable when users increase its size.
Common Uses of a PX to REM Converter
A pixel-to-rem calculator is useful whenever measurements from a visual design need to be translated into CSS relative units. It can support new projects as well as the gradual modernization of existing stylesheets.
Convert Design Measurements
Translate pixel dimensions from a design file into rem values for use in a website or application interface.
Build Typography Scales
Convert font sizes into a consistent rem-based scale for headings, paragraphs, labels, and other text elements.
Update Legacy CSS
Calculate equivalent rem values when gradually migrating a stylesheet from pixel-based typography and spacing.
Standardize Component Spacing
Convert padding, margins, and gaps into reusable values for buttons, cards, forms, and layout components.
Work with Custom Root Sizes
Calculate accurate results for projects using a custom computed root font size instead of the common 16px setup.
Check CSS Values Quickly
Convert an individual measurement without manually performing the same division or multiplication repeatedly.
Features of an Online PX to REM Converter
A useful pixel-to-rem tool makes unit conversion straightforward and provides results that can be applied directly to everyday CSS work.
- PX to REM conversion: Calculate the equivalent rem value from a pixel measurement.
- REM to PX conversion: Convert rem values back into their equivalent pixel measurements.
- Custom root font size: Use 10px, 12px, 14px, 16px, or another supported root size.
- Live calculations: See updated results as you change values when live conversion is supported.
- Precise decimal output: Display fractional rem values to a suitable level of precision.
- CSS-ready results: Use converted numbers in CSS declarations without calculating them manually.
- Common-value reference: Compare frequently used pixel sizes with their rem equivalents.
- Simple workflow: Convert measurements quickly while working on layouts, stylesheets, or design systems.
Frequently Asked Questions
What is a PX to REM converter?
A PX to REM converter calculates the equivalent rem value for a pixel measurement using a selected root font size. It helps developers use relative units in CSS without doing each calculation manually.
How do I convert PX to REM?
Divide the pixel value by the computed root font size. For example, 24px divided by 16px equals 1.5rem when the root font size is 16px.
What is 1rem in pixels?
When the computed root font size is 16px, 1rem equals 16px. If the root font size is 10px, 1rem equals 10px instead.
How much is 24px in REM?
With a 16px root font size, 24px equals 1.5rem. With a 10px root font size, the same 24px measurement equals 2.4rem.
What is the default root font size?
Browsers commonly start with an initial root font size of 16px, but user preferences and CSS declarations can change the computed size. Use the actual root font size of your project for accurate conversion.
Can I use a custom root font size?
Yes. Select or enter the root font size used by your project, such as 10px, 12px, 14px, or 18px, if the converter supports custom input. The equivalent rem value changes with the selected size.
How do I convert REM to PX?
Multiply the rem value by the computed root font size. For example, 2rem multiplied by 16px equals 32px.
Is REM better than PX?
Neither unit is best for every situation. REM is useful for scalable typography and spacing tied to the root font size. PX is useful when a fixed CSS length is appropriate for a visual detail.
Does REM change when the browser font size changes?
REM follows the computed font size of the root HTML element. When that computed size changes, the pixel equivalent of rem-based dimensions changes as well. The effect depends on the browser settings and your CSS.
How many decimal places should I use for REM?
Four decimal places are often sufficient for practical CSS conversions. Many common values, such as 16px to 1rem and 24px to 1.5rem, convert to exact terminating decimal values with a 16px root.
Can I use REM for margins and padding?
Yes. REM can be used for margins, padding, gaps, font sizes, and many other CSS length properties. The best unit depends on the intended behavior of each element.
Should I convert every PX value to REM?
No. Convert values when relative scaling is useful for the design. Small borders, icon strokes, and other fixed visual details may remain in pixels when that better fits the intended result.
Does changing the root font size affect every REM value?
Yes. REM lengths are calculated relative to the computed root font size. When that size changes, rem-based dimensions change their pixel equivalents, while ordinary fixed pixel lengths do not change solely because of that root-size adjustment.
Is this converter useful for responsive web design?
Yes. It helps create rem-based typography and spacing that follow the root font size. Responsive layouts may also need flexible widths, media queries, and other CSS techniques for different viewport sizes.