A typography converter changes a font or spacing size between the units used in web and print design — pixels to rem, em to pixels, or points to pixels. Front-end developers and designers need it constantly, because a design handed over in points or pixels has to become the relative units that make a layout scale and stay accessible. This tool covers px, rem, em, pt and percent.
The formula. Everything is converted through the pixel, using the browser default root font size of 16px. That gives 1 rem = 16px, 1 em = 16px, 100% = 16px and 1 pt = 1.3333px (since CSS defines 1 inch as 96px and 72pt, so the ratio is 96 ÷ 72). The important difference is that rem always resolves against the root element, while em resolves against the parent — so nested em values compound, and a 0.9em inside a 0.9em is 0.81 of the original.
Worked example. A heading specified as 24px is 24 ÷ 16 = 1.5rem. A 12pt body size from a print spec is 12 × 1.3333 = 16px, which is 1rem — that is why 12pt and 16px both read as "normal" body text. Going the other way, 0.875rem is 14px, the common size for captions and helper text.
Where it's used. Using rem for font sizes is a real accessibility win: a reader who raises their browser's default text size scales the whole interface, which fixed pixel values ignore. Points survive from print and still appear in PDFs, Word documents and design tools, while em is useful for spacing that should track its own element's font size — padding inside a button, for instance. Note that if your CSS changes the root font size away from 16px, every rem value shifts with it.