REM to PX Converter (and PX to REM Calculator)
Convert rem to px and px to rem in one step. Type a value in either box, set the base font size to match your site, and the other value updates as you type. Copy the result as a plain value or a ready-to-paste CSS line.
Everything runs in your browser. Nothing you type is sent or stored.
Pixels are the fixed unit browsers use to draw things on screen. Type a pixel size here to see its rem equivalent.
REM is a relative unit: 1rem equals the base font size (16px by default). Sizes in rem scale with a visitor's font settings. Type a rem value here to see pixels.
Why it's here: REM isn't a fixed size. 1rem equals your site's base font size, so the calculator needs it to convert in either direction (rem = px ÷ base). Browsers default to 16px, which makes 24px = 1.5rem. If your site uses a different base, enter it here and the results update. The 10 chip is for the "62.5%" CSS trick.
How many decimal places to show and copy. Trailing zeros are trimmed, so you see 1.5 instead of 1.5000. Full precision is kept behind the scenes.
Base 10 is for the "62.5%" CSS trick.
REM result
-
PX result
-
The quick brown fox jumps over the lazy dog
| PX | REM | Copy |
|---|
About this tool
This REM to PX converter turns pixel sizes into rem and back again, using the base font size you choose. It is made for web designers, developers and anyone adjusting font sizes and spacing in CSS or a website builder.
How it works
1. Set the baseStart at 16px, the browser default, or type your site's base. Quick chips cover 16, 14, 18, 20 and 10 (the "62.5%" trick).
2. Type a valueEnter a number in PX or REM and the other box updates instantly. Decimals, commas and negatives work, and stray "px" or "rem" text is ignored.
3. Check the previewA sample line of text shows the size you entered. Very large sizes are capped at 120px so the preview stays tidy.
4. Copy itCopy the bare value or a full CSS declaration, or copy any row in the common sizes table. Choose 0 to 8 decimal places.
The formulas
rem = px ÷ base font size and px = rem × base font size. At the default 16px base, 24px ÷ 16 = 1.5rem and 2.5rem × 16 = 40px. At a 10px base, 12px = 1.2rem and 1.6rem = 16px.
Why use rem instead of px?
Pixel sizes stay fixed no matter what a visitor prefers. Rem sizes scale from the base font size, so if someone raises their browser's default text size, your type and spacing grow with it. That makes rem a better choice for font sizes and layout spacing, while px still suits fine details such as 1px borders.
Want to read more? See MDN's guide to CSS length units and the WCAG explanation of resizing text.
Frequently asked questions
What is a rem in CSS?
A rem is a CSS unit that stands for "root em". One rem equals the font size of the root element (the html element), which is 16px by default in most browsers. Because rem is relative, anything sized in rem scales when the base font size changes.
How do I convert px to rem?
Divide the pixel value by the base font size. With the default base of 16px, 24px is 24 ÷ 16 = 1.5rem. Type the pixel value into the converter and the rem value appears instantly.
How do I convert rem to px?
Multiply the rem value by the base font size. With a base of 16px, 2.5rem is 2.5 × 16 = 40px. Type the rem value into the converter and the pixel value appears instantly.
What is the default base font size?
Most browsers default to 16px, so 1rem is 16px unless a site or the visitor changes it. The converter starts at 16px and lets you change it to match your own site.
Why does the converter need a base font size?
REM is not a fixed size. It is a multiple of the base font size, so the same pixel value gives a different rem value at a different base. For example, 24px is 1.5rem at a base of 16px but 2.4rem at a base of 10px. Set the base to match your site to get accurate results.
How do I find my site's base font size?
Open your browser's developer tools, select the html element in the Elements panel, and look at its computed font-size. That number is your base. If nothing has been changed, it is usually 16px.
What is the 62.5% trick?
Setting the html font size to 62.5% makes 1rem equal 10px at the default browser size, which makes mental math easier (1.6rem is 16px). If your site uses this trick, choose 10 as the base in the converter. Remember to set your body text back to a readable size, such as 1.6rem.
Should I use rem or px?
Rem is generally better for font sizes and spacing because it respects the font size a visitor has chosen in their browser, which helps accessibility. Pixels still make sense for fine details such as 1px borders. Many teams use rem for type and layout spacing and px for hairlines.
What is the difference between rem and em?
Rem is relative to the root font size, so it stays consistent across the whole page. Em is relative to the font size of the current element (or its parent, when used for font-size), so nested em values can compound. Rem is usually easier to predict.
Can I enter decimals or negative numbers?
Yes. Decimals work with a period or a comma, and negative values are supported for things like negative margins. If you type px or rem after a number, the converter ignores it.
How many decimal places does the converter show?
Four by default, adjustable from 0 to 8 with the precision menu. Trailing zeros are removed, so you see 1.5 instead of 1.5000. Full precision is kept internally, and copied values use the number of decimals shown.
What do the copy buttons do?
Copy value copies the bare value, such as
1.5rem or 24px. Copy CSS copies a ready-to-paste declaration, such as font-size: 1.5rem;. You can also copy any row in the common sizes table.Does the converter store or send my data?
No. Everything is calculated in your browser, and nothing you type is sent to a server or saved.