JWT decoder
A token's header and payload, with readable dates and glossed claims. The signature is not verified, and the tool says so.
en / tools / px-rem-converter
px, rem, em converter
The three units live together, with a configurable base and the typographic scale of the value on exact ratios.
Free, in the browser, no account
The size of `html`. Sixteen is every browser’s factory setting; ten and 62.5% are the two shortcuts you meet most often.
The size of the PARENT element, which is what `em` refers to. When it matches the root, `em` and `rem` give the same number — and that is the case where mixing them up does not show.
| Step | px | rem | Copy |
|---|---|---|---|
| -2 | 13.5 | 0.8438 | |
| -1 | 18 | 1.125 | |
| 0 | 24 | 1.5 | |
| +1 | 32 | 2 | |
| +2 | 42.67 | 2.6667 | |
| +3 | 56.89 | 3.5556 | |
| +4 | 75.85 | 4.7407 | |
| +5 | 101.14 | 6.321 |
`rem` looks at the document root and means the same everywhere — which is why it is used. `em` looks at the context, so it compounds: half an em inside a 1.5em inside a 2em is not half of anything.
The ratios are exact fractions — 5:4, 4:3, 3:2 — not the rounded decimals you find about. Over six steps "×1.333" accumulates: 5.610233 against the true fourth’s 5.618656, which is thirteen hundredths of a pixel on the top step at base sixteen. Not much, and still not much that carries a doubt with it.
Everything happens in your browser: no data is sent anywhere.
How it works
- Type the number you have, into the box of the unit you have. The other two follow.
- If the root is not at 16, change it: and if you need ems, say how big the context is too.
- Below is the typographic scale from that value: step zero is always your number.
Why it exists
Because it is a trivial sum you do twenty times in an afternoon and still get wrong, always in the same way: with the wrong base.
And because the second question arrives right after the first. Once the value is converted, what you need is not the value — it is the scale around it: if the heading is 34 px, how big should the subheading be, and the caption.
About rem and em, which are not the same thing
rem looks at the root of the document — the html element — and means the same everywhere.
That is exactly why it is used: a measurement in rem does not depend on where you write it.
em looks at the context, that is, at the size of the parent element. So it compounds: half an
em inside a 1.5em element inside a 2em one is not half of anything, it is half of three times
something else.
That is why there are two bases here and not one. With a single base, the tool would answer the question about ems using the root — which is the right answer only when the context is the root, which is precisely the case where mixing the two up does not show.
This site knows the trap well from elsewhere: calc(1em * something) is right only where the element
inherits its size, and where it declares one instead, 1em is the parent’s size and the factor lands
on the wrong number.
About the scale, and its ratios
The three ratios are musical intervals, and that is not a party fact: the modular scale in typography was born by copying harmony. The major third is 5:4, the perfect fourth 4:3, the perfect fifth 3:2 — and it is the same 3:2 fifth this site’s drone plays above the fundamental, for the same reason: they are ratios the eye and the ear read as order rather than as accident.
They are written as fractions, not as the rounded decimals you find about. “×1.333” is the perfect fourth rounded, and over six steps the rounding accumulates: 5.610233 against the true fourth’s 5.618656, which is thirteen hundredths of a pixel on the top step at base sixteen. It is not much. But it is not-much that carries a doubt with it, and the fraction costs nothing.
Step zero is always the number you start from. A scale that does not contain the value it was generated from is a scale of something else.
About decimals
Values in rem show four decimals rather than two, and there is a practical reason: on a base of sixteen, one pixel is 0.0625rem. With two decimals it would become 0.06 — which, converted back, is no longer one pixel. A converter that does not round-trip is not a converter.
About your data
Everything happens in your browser. This site is made of static files and has no server to send anything to, even if it wanted one.
From here you also go here
Subnet calculator
Network, broadcast, range and usable hosts of an IPv4 block, with the two exceptions almost no calculator explains.
UUID generator
Version 4 UUIDs, one at a time or in batches, in lowercase, uppercase, without hyphens or in braces.