Convert px to rem, em, pt and vw with any base size
The PX to REM Converter turns pixel values into rem (and back) using whatever root font size your project uses — 16px by default, or 10px if you follow the “62.5%” convention. It shows the matching em, pt, mm, inch, vw and percentage values at the same time, so it also works as a px to pt converter and font size unit converter for screen and print.
Need to migrate a whole stylesheet? Paste any CSS into the bulk box and every px value is rewritten as rem (or every rem back to px). Hairline 1px borders stay in pixels unless you choose otherwise, because a border that scales with the font size usually looks wrong. A 1–96 px reference table at the bottom is handy for Tailwind spacing scales and design-token files.
How to use the PX to REM Converter
- Set your root font size (the
font-sizeonhtml; 16px unless you changed it) and, if you need vw, your design’s viewport width. - Type a value and pick its unit — px, rem, em, pt or vw. The main answer and the full breakdown update immediately.
- To convert many values, paste CSS into “Bulk convert a CSS snippet”, choose px → rem or rem → px, and decide whether 1px borders should be kept.
- Press “Copy” to take the converted CSS, or scan the reference table for common sizes.
- For print units, enter the DPI (96 for CSS, or 300 for a print file); pt, mm and in follow it.
- Change the decimal places if you want shorter output such as 1.13rem instead of 1.125rem.
PX to REM Converter features
Any root font size
Works with 16px, 10px, 62.5% setups or any custom base; the whole page, including the table, recalculates when you change it.
Eight units at once
Every conversion shows px, rem, em, pt, mm, in, vw and % so you can pick the right unit for the job.
Any DPI
The default 96 dpi is the CSS reference; set 72, 150 or 300 to size text or images for print.
Bulk CSS conversion
Rewrites every pixel value in a pasted snippet while leaving hex colours, numbers inside comments and (optionally) 1px borders untouched.
Reference table
1 to 96 px in rem and pt, laid out in three columns for quick scanning.
The px to rem formula
rem = px ÷ root font size, and px = rem × root font size. With the browser default of 16px, 24px is 24 ÷ 16 = 1.5rem, 18px is 1.125rem and 12px is 0.75rem. If you set html { font-size: 62.5% } the root becomes 10px, so 24px is simply 2.4rem.
em uses the same formula but relative to the parent element’s font size rather than the root, which is why nested em values compound. The em figure shown here assumes the parent has the root size. pt is a print unit fixed by CSS at 1pt = 1⁄72 inch and 1px = 1⁄96 inch, so 1px = 0.75pt and 12pt = 16px. vw is 1% of the viewport width: at 1440px wide, 72px is 5vw.
Why use rem instead of px?
- Accessibility: people who raise their browser’s default font size get larger text and spacing when you use rem; pixel sizes ignore that preference.
- Consistent scale: changing one root value rescales the whole interface — useful for compact or large-text modes.
- Media queries: em-based breakpoints respond to zoom and font-size changes more predictably than px.
- Keep px for: 1px borders, box shadows, border radius on small elements, and anything that must stay crisp regardless of text size.
px to pt and mm for print
CSS defines 1 inch as 96px and as 72pt, so px × 0.75 = pt and pt × 1.3333 = px, at any screen size or zoom level. Millimetres follow from 1 inch = 25.4mm: 16px = 12pt = 4.233mm. A printer or image editor works in dots per inch instead, so a 12pt font on a 300 dpi file is 50 pixels tall. Enter that DPI above to convert for it.
| pt | px (96 dpi) | mm | Typical use |
|---|---|---|---|
| 8pt | 10.67px | 2.82mm | Footnotes |
| 10pt | 13.33px | 3.53mm | Small print |
| 12pt | 16px | 4.23mm | Body text |
| 14pt | 18.67px | 4.94mm | Lead text |
| 18pt | 24px | 6.35mm | Subheads |
| 24pt | 32px | 8.47mm | Headings |
| 36pt | 48px | 12.7mm | Titles |
Common px to rem values (16px root)
| px | rem | Typical use |
|---|---|---|
| 12px | 0.75rem | Captions, labels |
| 14px | 0.875rem | Secondary text, buttons |
| 16px | 1rem | Body text |
| 18px | 1.125rem | Lead paragraphs |
| 20px | 1.25rem | H4 / card titles |
| 24px | 1.5rem | H3, section spacing |
| 32px | 2rem | H2 |
| 48px | 3rem | H1, hero spacing |
| 64px | 4rem | Large display headings |
PX to REM Converter FAQ
How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px, 32px ÷ 16 = 2rem. Type the pixels into the px to rem converter above and the answer appears instantly, along with em, pt and vw.
How do I convert px to pt?
Multiply pixels by 0.75 at the CSS standard of 96 px per inch: 16px × 0.75 = 12pt. To go back, divide points by 0.75. Enter another DPI to convert for a print file.
What is 1rem in pixels?
16px in every major browser’s default settings. It changes only if the page sets a different font-size on the html element or the user changes their default text size.
What is the difference between rem and em?
rem is relative to the root (html) font size, so it is the same everywhere on the page. em is relative to the parent element, so nested elements multiply their sizes. Use rem for layout and spacing.
Should I use 62.5% on the html element?
Setting html { font-size: 62.5% } makes 1rem = 10px, which is easier to calculate in your head. It works, but any third-party component that assumes 1rem = 16px will look smaller.
Why should 1px borders stay in px?
A 0.0625rem border becomes 0.0625 × 20 = 1.25px when the root is 20px, which browsers render as a blurry or inconsistent line. Keeping hairlines in pixels avoids that; the “Keep 1px values” option does it for you.
Does the bulk converter change colours or media queries?
It only touches numbers followed by px (or rem in the other direction). Hex colours like #ddd, numbers inside comments and unitless values are left as they are. Pixel widths inside media queries are converted too, so review those if you prefer px breakpoints.