Type a pixel value and read the rem, or the other way round, against whatever root font size you are working with. Everything runs in this tab, so nothing is uploaded anywhere.
16 is the default in every desktop browser, and the root is the only thing a rem is measured against. Both fields take a unit if you paste one, so 24px and 1.5rem both work.
These are the numbers for the last value that parsed. The message above says what is wrong with the one in the field.
Against a 16px root.
| Pixels | Rem | Copy |
|---|---|---|
| 0.75rem | ||
| 0.875rem | ||
| 1rem | ||
| 1.125rem | ||
| 1.25rem | ||
| 1.5rem | ||
| 2rem | ||
| 3rem | ||
| 4rem |
This is the last scale that generated. The message above says what is wrong with the settings.
Step 0 is the base. Sizes are major third (1.25) from 16px, expressed in rem against a 16px root.
| Step | Pixels | Rem | Preview |
|---|---|---|---|
| --step--2 | 10.24px | 0.64rem | Ag |
| --step--1 | 12.8px | 0.8rem | Ag |
| --step-0 | 16px | 1rem | Ag |
| --step-1 | 20px | 1.25rem | Ag |
| --step-2 | 25px | 1.5625rem | Ag |
| --step-3 | 31.25px | ≈1.9531rem | Ag |
| --step-4 | ≈39.06px | ≈2.4414rem | Ag |
| --step-5 | ≈48.83px | ≈3.0518rem | Ag |
/* Type scale: major third (1.25), 16px base, 16px root */
:root {
--step--2: 0.64rem; /* 10.24px */
--step--1: 0.8rem; /* 12.8px */
--step-0: 1rem; /* 16px */
--step-1: 1.25rem; /* 20px */
--step-2: 1.5625rem; /* 25px */
--step-3: 1.9531rem; /* 31.25px */
--step-4: 2.4414rem; /* 39.06px */
--step-5: 3.0518rem; /* 48.83px */
}
One rem is the computed font size of the root element — the <html> tag — and nothing else. There is one such number for the whole document, which is why converting px to rem is a single division rather than a lookup.
Its sibling em is where people get hurt, and it is usually what sends someone looking for a converter. An em measures against the font size of the element it sits on, which is inherited, so it compounds down a tree: put font-size: 0.9em on a list item and a list nested three levels deep renders at 0.729 of the size you meant, with nothing in the stylesheet admitting it. A rem cannot compound. It resolves against the root wherever it appears, so 1.5rem is the same size in a footer as in a hero.
A browser’s default font size is a preference, and people change it — for long sight, for a dense screen, for a bad monitor at the end of a long day. When they do, the root element’s computed size changes and every length written in rem changes with it. Type set in px does not move: it is 14px whether the reader asked for 20px text or not.
Be precise about the lever, because most writing on this gets it wrong. Page zoom is not the font-size preference. Zoom scales the px unit itself, so a zoomed page still reports a 16px root and rem buys nothing there; the preference does change the root, and that is the case rem answers. The Read this browser button above measures the real value here, so it prints something other than 16 only when that preference has been changed. Font sizes and the space around text belong in rem; line heights are better left unitless.
Set html { font-size: 62.5% } and the root becomes 10px, so 1.6rem is 16px and the mental arithmetic disappears. The usual objection — that it overrides the reader’s setting — is wrong, because 62.5% is a percentage of that setting and scales with it.
The real cost is that it redefines what a rem is worth for every stylesheet on the page, including the ones you did not write. A framework or embedded widget sized against a 16px root arrives at 62.5% of its intended size, and anything escaping your own reset lands at 10px. A converter solves the arithmetic once; redefining the unit solves it everywhere and charges you later.
Rem is not a universal replacement, and reaching for it everywhere produces its own bugs.
em inside a media query resolves against the browser’s initial font size and not against your html rule, so the two spellings are not related the way people assume.A type scale is one base size multiplied by one ratio, over and over. Base 16 at 1.25 gives 20, 25 and 31.25 going up, and 12.8 and 10.24 going down. The ratios come from musical intervals, and several of the decimals are rounded: 1.067 stands in for 16:15, 1.333 for 4:3, 1.414 for the square root of two, and 1.618 for the golden ratio. The names are decoration; what the multiplication buys is sizes related to each other, which six sizes picked by eye rarely are.
Choosing the ratio is the only real decision. A small one, 1.125 or 1.2, keeps adjacent steps close and suits a dense interface; 1.5 or the golden ratio reaches display sizes within two steps and suits a page built around one headline. The steps below the base are the ones people forget and then miss, because captions and labels have to come from somewhere.
Name the steps by position rather than by size: --step-2 survives a change of ratio, while --text-25 becomes a lie the moment you touch anything. The double hyphen on the negative names — --step--1 — is legal CSS: the custom property prefix, then a name beginning with a minus. Spacing scales the same way, and the CSS Grid generator writes its gaps in px, so run those through the converter above if the rest of your spacing is in rem.
CSS Grid generator
Draw a grid, copy the CSS. Flexbox on a second tab.
Aspect ratio calculator
Solve for a missing dimension, or reduce pixels to the ratio behind them.
SVG to PNG
Convert SVG files to PNG at any scale, in the browser. Batch and transparent background.
HEX to RGB
Paste a hex colour, get RGB, HSL and CSS you can copy.
RGB to HEX
The other direction, with the same converter underneath.
PNG to SVG
Trace a bitmap into vector paths, in the browser. Honest about when it works.
Designing a site? Siter.io builds it from Figma.