Percent to Point Converter Online

Percent to Point Converter changes CSS percentage font sizes to typographic pt values while exposing the matching px, em, and rem equivalents. Percent is relative to the parent font size in CSS, so the tool first multiplies the percent by your configurable root font size in pixels and then normalises to points using the CSS specification (96 px per inch, 72 pt per inch).

How the math works

Given a percentage $ P $ and a root font size in pixels $ R $, the intermediate pixel value is:

$$ \text{px} = \frac{P}{100} \times R $$

Because CSS treats 1 inch as 96 px while typography treats 1 inch as 72 pt, points follow:

$$ \text{pt} = \text{px} \times \frac{72}{96} = \text{px} \times \frac{3}{4} $$

With the default root size of 16 px, a value of 100% resolves to 16 px and exactly 12 pt, while 150% becomes 24 px or 18 pt. Adjust the root font size when designing for accessibility scales such as 18 px or 20 px—the points output adjusts immediately.

When to convert between percent and points

Print + web parity: Translate web mocks built in percent into PDF or Word styles which speak point sizes.
Design tokens: Cross-check typography scale tokens before exporting from Figma to CSS.
Email templates: Some HTML email clients honour pt reliably while web layouts stick to %.
Accessibility audits: Show absolute pt values used in WCAG large-text thresholds (18 pt or 14 pt bold).

Frequently Asked Questions

Why does 100% equal 12 pt with a 16 px root?

CSS treats 96 px as one inch and typography treats 72 pt as one inch. 16 px × (72/96) equals 12 pt, so 100% of the 16 px root resolves to 12 pt.

Should I edit the root font size?

Yes if your site overrides the html font size. Browsers default to 16 px, but pages with global typographic scales (for example 18 px or 20 px) need that same number here so the px and pt outputs match.

Is EM the same as percent here?

For font sizes EM and percent express the same ratio relative to the parent. 100% equals 1 em and 150% equals 1.5 em. The tool prints both for convenience.

Is the math done on my device?

Yes. All conversion happens locally in your browser, so values you type are never uploaded.