PX to REM Converter
Enter pixel or rem values and a base font size to convert between px and rem.
| You entered | px | rem |
|---|
Reference table at the base size
| px | rem |
|---|---|
| 10px | |
| 12px | |
| 14px | |
| 16px | |
| 18px | |
| 20px | |
| 24px | |
| 28px | |
| 32px | |
| 36px | |
| 40px | |
| 48px | |
| 56px | |
| 64px | |
| 72px | |
| 96px |
What this tool does
rem = pixels ÷ base font size. With the browser default of 16px, 24px is 1.5rem and 14px is 0.875rem; to convert back, multiply rem by the base size. Set your own base size, paste a list of values and read the results.
Converts pixel, rem and em values using the base font size you set.
Handles a list at a time and shows a reference table for the common sizes.
How to use it
- Set the base font size (16 by default).
- Enter values one per line, such as 24px or 1.5rem.
- Read the pixel and rem equivalents.
- Copy the results or download a CSV.
Why use this converter
Converts pixels to rem (and rem or em back to pixels) for any base font size, a list at a time, with a reference table of common sizes. Sizes written in rem scale with the user's chosen font size, which is better for readability and accessibility than fixed pixels. Designers hand over pixel values, so developers convert constantly.
Why we built it
We built the px to rem converter to convert a list at a time for any base font size and to explain why rem respects user settings. Style with the CSS snippet generator and tidy the code with the CSS formatter.
For a neighbouring job there is also the CSS Grid Generator.
Who this tool is for
- Front-end developers translating design values
- Designers handing off specs
- Students learning responsive CSS
When to use it
- Turning a design in pixels into CSS in rem.
- Setting a fluid type scale.
- Checking spacing and breakpoint values.
- Converting a legacy px stylesheet.
How it works
A rem is the root element's font size. Browsers default to 16px, so 1rem = 16px. Some sites set html { font-size: 62.5% } so that 1rem = 10px and the arithmetic is simpler.
An em is relative to the parent element's font size. In this tool em is treated like rem (a parent at the base size), which is only true for the root; nested elements compound.
Setting the root font-size in px overrides the user's browser setting. Prefer a percentage, such as 100% or 62.5%.
What you give it, and what you get back
| Item | Details |
|---|---|
| Base size | The root font size in pixels, default 16. |
| Values | One per line, with px, rem or em; a bare number is px. |
| Output | Each value in px and rem, and a reference table. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| Results are off by a constant | The base size is not what your CSS uses. | Set the base size to match. |
| em differs in a nested element | em compounds through parents. | Use rem for predictable sizing. |
| Line not read | A unit or a number is missing. | Use values like 14px or 1.25rem. |
Assumptions and limitations
- Treats em as relative to the base size.
- Does not convert viewport units or percentages.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the base font size, normally 16.
What is 16px in rem?
1rem at the default base size.
What is the difference between rem and em?
rem is relative to the root font size; em is relative to the parent element's font size.
What is the 62.5% trick?
Setting the root font size to 62.5% makes 1rem equal 10px, which simplifies conversions.
Should I use rem for everything?
Rem is best for type and spacing that should scale; px is fine for hairline borders.
Is my text or file sent anywhere?
No. Everything runs in your browser and nothing leaves the page.