Report Tool or Give Us Suggestions

Point to Percent Converter

Convert typographic points to percent CSS units with configurable root font size.

L ading . . .

Convert typographic points (pt) to CSS percent (%), pixels (px), em, and rem using a configurable root font size. The math follows the standard CSS mapping of 96 px per inch and 72 pt per inch.

How the conversion works

CSS treats 1 inch as 96 px. The print world treats 1 inch as 72 pt. Combining the two gives:

\[ 1\,\text{pt} = \frac{96}{72}\,\text{px} = 1.3333\overline{3}\,\text{px} \]

To express a point value as a percent of the root font size:

\[ \% = \frac{\text{pt} \times \frac{96}{72}}{\text{root font size in px}} \times 100 \]

EM and REM share the same relative formula. They equal px ÷ root_px when the parent font size matches the root.

Common point sizes (root = 16 px)

  • 8 pt → ≈ 10.67 px → ≈ 66.67%
  • 10 pt → ≈ 13.33 px → ≈ 83.33%
  • 12 pt → 16 px → 100%
  • 14 pt → ≈ 18.67 px → ≈ 116.67%
  • 18 pt → 24 px → 150%
  • 24 pt → 32 px → 200%

When to use point-to-percent

  • Porting print-design type scales (specced in pt) to responsive CSS layouts.
  • Translating WCAG or accessibility guidance expressed in points to relative web units.
  • Aligning email or document templates with web style sheets when you cannot use absolute pixel sizes.

Frequently Asked Questions

Why use percent instead of px for font-size?

Percent inherits from the root font size, so users who scale browser text get a proportional layout. This is the default behavior expected by accessibility guidelines.

Does the root font size in this tool have to be 16 px?

No. 16 px is the typical browser default, but you can change it to match a custom html { font-size: ... } declaration. The other outputs (em, rem) recompute live.

How is 1 pt = 1.333… px derived?

CSS treats 1 in = 96 px and the print world treats 1 in = 72 pt. The ratio 96 / 72 simplifies to 4 / 3 ≈ 1.3333… so 1 pt = 4/3 px.

Are em and rem always equal here?

The tool assumes the parent and root font sizes match, which is typical for top-level body text. Nested elements with their own font-size break that assumption and would change em values.

Is my input sent anywhere?

No. The conversion runs in your browser and nothing is transmitted to any server.

logo OnlineMiniTools

OnlineMiniTools.com is your ultimate destination for a wide range of web-based tools, all available for free.

Feel free to reach out with any suggestions or improvements for any tool at admin@onlineminitools.com. We value your feedback and are continuously striving to enhance the tool's functionality.

© 2026 OnlineMiniTools . All rights reserved.

Hosted on Hostinger

v1.10.0