About the Point to REM Converter
Brand books and editorial style guides define type in points because they were written with print in mind. A web implementation of the same scale usually wants rem, so the sizes respond when a reader raises the browser font size. This converter maps one to the other for a whole scale at a time.
Rem is measured against the root element rather than the parent, which is what makes it predictable inside nested components. The chain here is points to pixels at 1.3333 per point, then pixels divided by the root size. With the default 16 pixel root, 12pt is 1rem, 18pt is 1.5rem and 36pt is 3rem, so a display heading in a print guide lands on a clean number.
Odd sizes are where judgement comes in. A 10pt caption converts to 0.8333333333rem, and most teams round that to 0.833rem or snap it to 0.875rem to keep the scale tidy. Rounding to three decimals moves the rendered size by well under a tenth of a pixel. If the project sets the root to 10 pixels with the 62.5 percent trick, enter 10 in the base field and the numbers change accordingly. The parent relative alternative lives on Point to EM.
How to use
- Paste the point sizes from the style guide, one per line.
- Enter the project root font size in Base font size.
- Round the rem values to three decimals if you want a tidy scale.
- Copy them into your type tokens or stylesheet.
Common questions
- What is 18pt in rem?
- 1.5rem with a 16 pixel root font size.
- Does the parent font size affect the result?
- No. Rem always resolves against the root element, so nesting is irrelevant.
- How much rounding is safe?
- Three decimal places changes the rendered size by a small fraction of a pixel, which no reader will notice.
- What if the project root is 10 pixels?
- Enter 10 in the base field. Then 12pt becomes 1.6rem rather than 1rem.