REM to Point Converter

How many points is 1rem?

Twelve, at the browser default root of 16px. Every rem to pt conversion runs on one line:

pt = rem × root size in px × 0.75

The 0.75 never changes. The CSS specification sets 1 inch to 96px and also to 72pt, so 1px is always three quarters of a point. CSS Values Level 4 lists the ratios. The root size is the only number you need to check.

Your rem values already print

Test what you have before you convert anything. Browsers lay out print pages on the same 96px inch they use on screen, so 1rem at a default root prints at 12pt when the dialog sits at 100% scale. A rem stylesheet reaches paper with no conversion at all.

Converting to pt earns its place in three cases:

• A brief names a size. A style guide asks for 11pt body with 9pt captions. Write those numbers into the print block so a reviewer reads the spec straight from the code.
• Fixed boxes on the page. Labels, certificates, tickets and invoices break when a reader with a 20px browser default pushes 1rem up to 15pt. Point values hold the layout.
• The number leaves CSS. Word, InDesign and printer quotes all speak in points.

Long reading pages go the other way. A reader who set a bigger browser font wants bigger text on paper too. Rem respects this choice and pt overrides it.

The one line alternative

Need fixed sizes across a whole document? Skip converting each value and pin the root inside the print block:

@media print {html { font-size: 12pt; }}

Every rem now resolves against 12pt, so 1.5rem prints at 18pt on every machine and your type scale keeps its ratios. A site on a 62.5% root wants 7.5pt here, since 1rem stood for 10px. Reach for the stylesheet converter when print needs different ratios from screen, or when sign off calls for each pt value in writing.

Find the real root before you trust the number

Typing 16 out of habit causes most wrong answers. Check the rule on html first. Percent roots build on the reader's browser default, so this table assumes 16px:

To read the live value, open DevTools, select html, then find font-size in the Computed panel.

Fluid roots need one more step. With clamp() or vw on html, the root follows the viewport, and a printed page has its own width. Set the viewport to about 794px, the CSS width of an A4 sheet before margins, then read the computed size. Chrome's Rendering panel has an Emulate CSS media type option for checking print rules at the same time.

Round for whatever receives the number

Browsers and PDF engines accept decimals, so a stylesheet keeps the exact value. Other targets are pickier:

• Word sets type in half point steps. Pick 0.5pt, and 0.8125rem lands on 10pt rather than 9.75pt.
• InDesign takes decimals. Pick 0.1pt to keep a spec sheet tidy.
• Client briefs read best in whole points, once the design has settled.

Rounding type sizes is safe. Rounding leading is not. A 13.125pt line height pushed up to 13.5pt adds 15pt across 40 lines, which is one full line of text and a different page break.

What the stylesheet converter leaves alone

The converter reads your source text, so it has no view of computed styles. Everything runs in your browser and nothing gets uploaded. Expect these gaps:

• Media query conditions.(min-width: 48rem) stays as written, because rem inside a query uses the browser default, not your root.
• Screen and print blocks. The print block output skips @media screen rules and any existing @media print rules.
• Tokens.font-size: var(--step-2) holds no rem to convert. Paste the rule defining the token as well.
• Sass nesting. Nested rules get flagged and skipped. Run the source through SCSS to CSS first.
• Fluid values.clamp(1.25rem, 2vw + 1rem, 1.75rem) converts the rem parts, and the vw part still follows the page width. The tool flags these.
• Other units.em, % and px stay put. EM to Point and PX to Point cover those.
• Large files. Input stops at 200KB. For a framework bundle, paste only your type rules.