Change the base font size from the default 16px, and every result updates, so it matches your own root size.
Color & CSS
PX to REM Converter
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.
Convert a sizeBetween px, rem, em, % and pt
Convert from
px
24pxrem
1.5remem
1.5emPercent
150%pt
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 |
Convert a stylesheetPaste CSS and every px value is rewritten
Converted CSS appears here
Paste a stylesheet above, or try the sample.
What it handles
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.
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 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.