General calculator
Pixels to REM Converter
Free online Pixels to REM converter. Convert CSS px to rem or rem to px based on any root font-size base (default 16px). Built for front-end developers.
Introduction
In modern front-end web development, choosing the right units for typography, spacing, and layout is critical. Our Pixels to REM Converter is a simple, free developer utility that translates absolute pixel (px) values into relative root em (rem) values, and vice versa. It supports custom base sizes (defaulting to the standard 16px) to help you build accessible, responsive stylesheets.
How to Use
This converter operates in two directions. Mode 1: PX to REM. Enter the value in pixels (px) and your document's root font size (base, default 16px) to get the REM equivalent. Mode 2: REM to PX. Select the REM to PX option, input your REM value, and check the pixel equivalent. Click "Calculate" to view the converted value along with a full reference table.
Formula
The conversion formulas are: REM = Pixels / Base Font Size. Pixels = REM × Base Font Size. The default base size for most browsers is 16px, meaning 1rem is equal to 16px.
Examples
Example 1 (PX to REM): Convert 24px to REM using a standard 16px base. REM = 24 / 16 = 1.5rem. Example 2 (REM to PX): Convert 1.25rem to PX with a 16px base. Pixels = 1.25 × 16 = 20px.
Results Explained
The output displays: (1) Converted Value: the translated size in REM or PX. (2) Base Size: the root element size used for reference. (3) CSS Snippet: a pre-written CSS rule (e.g. font-size: 1.5rem; /* 24px */) ready to paste into your code.
Related Calculators
PX vs. REM: Understanding Web Layout Units
When styling web pages with CSS, developers choose between absolute units and relative units. The two most common are pixels (px) and root em (rem):
- Pixels (px): An absolute unit of measurement representing a single dot on a screen. Pixels are fixed and do not scale automatically when a user adjusts their browser preferences or device zoom.
- Root EM (rem): A relative unit of measurement. The "r" stands for "root", meaning it is relative to the font-size of the root element (usually the HTML tag). If the HTML tag has a font-size of 16px, then 1rem is 16px, 2rem is 32px, and 0.5rem is 8px.
Why Use REM Instead of PX?
Using REM units is a best practice for modern web development, primarily due to **accessibility (a11y)** and **responsiveness**:
- User Preferences: Many users with visual impairments increase the default font size in their browser settings (e.g., from 16px to 20px or 24px). If your website uses absolute pixels (px) for typography, the text will stay locked at your specified pixel size, ignoring the user's preference. If you use REM, the text scales up dynamically relative to their setting.
- Consistent Scale: By basing all sizes (typography, padding, margins, media queries) on a single root base, you can scale the entire layout up or down simply by changing the font-size of the HTML element.
What is the Difference Between REM and EM?
While REM is relative to the **root** element (HTML), EM is relative to the font-size of its **parent** element. If a parent container has a font-size of 20px, and you set a child element's padding to 1.5em, the padding will be 30px (1.5 × 20). If you nest multiple elements using EM, the sizes compound, making it difficult to maintain layout consistency. REM prevents this compounding effect by always referencing the root.
Standard PX to REM Conversion Reference Table (Base 16px)
For quick reference, here is a table mapping common pixel sizes to REM using the standard 16px browser base:
| Pixels (px) | REM Equivalent | Common Usage |
|---|---|---|
| 4px | 0.25rem | Tiny padding/margins |
| 8px | 0.50rem | Small spacing |
| 12px | 0.75rem | Captions / Small text |
| 14px | 0.875rem | Body text (compact) |
| 16px | 1.00rem | Default base body text |
| 20px | 1.25rem | Sub-headings (H3/H4) |
| 24px | 1.50rem | Medium headings (H2) |
| 32px | 2.00rem | Large headings (H1) |
| 48px | 3.00rem | Hero / Page titles |
| 64px | 4.00rem | Banner layouts |
Three Detailed Worked Examples
Example 1: Designing a Mobile Menu (PX to REM)
A designer requests a button with a height of 40px and a padding of 18px. Convert these values to REM using base 16px:
1. Height: 40 / 16 = 2.5rem.
2. Padding: 18 / 16 = 1.125rem.
The CSS output is: height: 2.5rem; padding: 1.125rem;.
Example 2: Reading Tailwind Layouts (REM to PX)
Tailwind CSS uses a spacing scale where 1 unit is 0.25rem. You see a class p-6, which translates to a padding of 1.5rem (6 × 0.25). What is this padding in pixels?
1. Identify REM = 1.5, Base = 16.
2. Multiply REM by Base: 1.5 × 16 = 24.
The padding is equivalent to 24px.
Example 3: Custom Base 10px Sizing (PX to REM)
Some developers set the root font-size of their project to 62.5% in CSS (which changes the default 16px base to 10px). This makes converting pixel values to REM easier in their heads. If a developer wants to set a section width to 320px with this base, what is the REM value?
1. Identify PX = 320, Base = 10.
2. Divide PX by Base: 320 / 10 = 30.
The width is 32rem.
Frequently Asked Questions
What is a pixel (px)?
A pixel is a single point in a raster image or on a computer display. In CSS, it is an absolute unit of measurement equal to 1/96th of an inch.
What is REM?
REM stands for "root EM". It is a CSS unit of measurement relative to the font size of the root element (usually the <html> element).
What is EM?
EM is a relative CSS unit of measurement. Unlike REM (which is always relative to the root HTML tag), EM is relative to the font size of the parent element.
What is the default base font size in browsers?
Most modern web browsers have a default root font size of 16 pixels (16px).
Why should I use REM instead of pixels for font sizes?
Using REM units improves web accessibility. If a user changes their browser's default font size (due to visual impairment), text set in REM units will scale accordingly, whereas text set in absolute pixels (px) will remain locked.
How do you convert pixels to REM?
Divide the pixel value by the base font size. The formula is: REM = Pixels / Base.
How do you convert REM to pixels?
Multiply the REM value by the base font size. The formula is: Pixels = REM × Base.
What is the 62.5% trick in CSS?
Setting the HTML font size to 62.5% in CSS changes the root base from 16px to 10px (since 62.5% of 16 is 10). This makes pixel-to-rem conversions easy to do mentally (e.g. 14px becomes 1.4rem).
Does REM affect page performance?
No. The conversion from REM to pixels is computed instantly by the browser rendering engine and has no impact on performance.
Should I use REM for borders?
It depends, but many developers prefer using pixels (px) for extremely thin borders (like 1px or 2px) to prevent them from disappearing or rendering inconsistently due to sub-pixel rounding errors.
Can I use decimal values with REM?
Yes. Decimals are fully supported and very common (e.g., 0.875rem or 1.125rem).
Does REM work in all browsers?
Yes, REM units have been fully supported by all major modern browsers for over a decade.
Are Tailwind CSS spacing values in REM?
Yes, Tailwind spacing classes are based on REM units. 1 spacing unit is equal to 0.25rem (which translates to 4px on a standard 16px base).
Should I use REM in media queries?
Yes. Using REM in media queries allows the layout breakpoints to scale with browser zoom and font size preferences, ensuring a consistent user experience.
How do I change the root font size in CSS?
You can change the root font size using the html selector. For example: html { font-size: 18px; } will change the base size for all REM units on your site to 18px.