Color & CSS
PX to REM Converter
24px1.5rem1.5em150%18pt| px | rem |
|---|---|
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
Paste a stylesheet above, or try the sample.
Convert any size between px, rem, em, percent, and pt for your base font size, or paste a stylesheet and convert every px value at once.
How to use this tool
Set the Base font size (px), type a Value, and choose the unit it is in: px, rem, em, % or pt.
Every other unit is shown at once, each with its own Copy button (Copy px, Copy rem, Copy em, Copy Percent, Copy pt), with a table of common sizes to use as a reference.
To convert a whole stylesheet, paste it under CSS to convert or press Sample CSS, choose rem or em, and turn on Keep 1px or Skip @media as needed. Then Copy CSS.
How to use this tool
Set the Base font size (px), type a Value, and choose the unit it is in: px, rem, em, % or pt.
Every other unit is shown at once, each with its own Copy button (Copy px, Copy rem, Copy em, Copy Percent, Copy pt), with a table of common sizes to use as a reference.
To convert a whole stylesheet, paste it under CSS to convert or press Sample CSS, choose rem or em, and turn on Keep 1px or Skip @media as needed. Then Copy CSS.
Was this tool helpful?
Suggest an improvementHelp keep ConduitTools free
Every tool here is free, private and built by a solo developer. If this one saved you time, a small tip keeps the site running and new tools coming.
Sizes that scale, without the arithmetic.
rem and em units follow the reader's font size, which keeps layouts accessible. Converting from the px values in a design takes only a base size and a division, and this does it for you.
- Any base size
- Change the base font size from the default 16px, and every result updates, so it matches your own root size.
- Whole stylesheets
- Paste CSS and every px value becomes rem or em. Keep 1px hairlines as they are, and skip media queries, where you usually want to leave them alone.
- A ready reference
- A table of common pixel sizes and their rem equivalents sits under the converter, for the values you look up all the time.
Frequently asked questions
Why use rem instead of px?
rem is relative to the root font size, so text and spacing scale when someone increases their browser's default size. Fixed px values ignore that setting.
What is the difference between rem and em?
rem is always relative to the root element. em is relative to the current element's font size, so nested em values compound. Most people use rem for sizing and em for values that should follow the local text size.
Should media queries use rem or em?
Many teams do, so breakpoints respond to zoom and font settings. This tool skips them by default because in a media query rem and em both mean the browser's default size, so converting them needs care.
Why keep 1px borders as px?
A 1px line converted to a fraction of a rem can render blurry or disappear at some sizes. Hairlines are conventionally left in px.