Percent to Point Converter

Q: How do I convert percent (%) to points (pt)?

Resolve the percentage against the parent size, then convert: 150% of 16px = 24px = 18pt. The tool does this for you and lets you change the reference size, because that reference is what makes the answer different from one project to the next.

Q: What root font size should I use?

Browsers default to 16px, so 16 is the right starting point unless your stylesheet sets a different size on the html element. If your CSS sets `html { font-size: 62.5% }` — a common trick to make 1rem equal 10px — set the root size to 10 here instead.

Q: Should I use px or a relative unit?

Use relative units (rem, em) for anything that should scale with the reader's font-size preference: type, spacing, and container widths. Pixels are fine for things that genuinely should not scale, such as hairline borders and some shadow offsets. The accessibility rule of thumb is that a user who sets a larger default font size in their browser should see your layout grow with it.

Q: Is my data sent anywhere?

No. The conversion is arithmetic done in your browser — nothing is uploaded, and the page works offline once loaded.

Q: My percentages are nested. Which parent size do I enter?

The computed size of the immediate parent, not the root. If a 150% heading sits inside a container that is itself 125% of a 16px body, the parent size to enter is 20px — and the heading is 30px, or 22.5pt. Inspect the element in dev tools to read its parent's computed font size rather than working it out from the file.

Q: Do I need a print stylesheet at all?

If people print your pages — recipes, invoices, documentation, tickets — yes, and it is usually a short one. Converting type to points, removing navigation and backgrounds, and forcing black-on-white covers most of the value in a few dozen lines.

Convert a percentage font size into points for print, resolved against the parent font size.

Value to convert (%)

Result (pt)

Root / parent font size

Browsers default to 16px. Use 10 if your CSS sets html { font-size: 62.5% }.

About this conversion

The same value at other root sizes

Root size	Result

Common conversions at 16 px

%	pt

What It Does

Older stylesheets size type in percentages, and print specs are written in points, so this conversion comes up whenever a long-standing site gains a print stylesheet. A percentage means nothing until it is resolved against a parent size, which the tool asks for; from there the point conversion is exact. Because percentages compound through nesting, it is worth checking the size an element is really inheriting before trusting the number — the tool flags that assumption with every result.

When to Use It

You are converting a design handed over in percent (%) into a stylesheet that uses points (pt) for accessibility.
You inherited a codebase that mixes units and you need the pt equivalent of an existing % value.
You want to check what a % value becomes when the user changes their browser's default font size.
You are writing a design-token scale and need the same step expressed in both units.

Worked Examples

150

150% of a 16px parent is 24px, which is 18pt on paper.

100

100% is 12pt at the default parent size — printed body text.

75

75% is 9pt, small print in the literal sense.

Features

Instant two-way conversion

Configurable root/parent font size

Full conversion table for common root sizes

Fractional-pixel rounding warning

Copy the value or the whole table

Works offline in your browser

No uploads or tracking

How to Use

1. Enter the percent (%) value you want to convert. 2. Set the root (or parent) font size the value should be measured against — 16px is the browser default. 3. Read the points (pt) result, or copy the whole conversion table for the sizes you use.

Common Mistakes

Assuming the conversion is fixed. 100% equals the parent element's font size, so the same percentage maps to different point values — the same % value converts differently depending on that size.
Confusing em with rem. `em` is relative to the *parent* element's font size and therefore compounds when nested; `rem` is always relative to the root element and does not.
Setting a px font size on the root element. That overrides the user's browser font-size preference, which defeats the accessibility reason for using relative units at all.
Rounding too early. Keep the fraction (1.375rem, not 1.4rem) — the browser resolves sub-pixel values fine and the rounding error compounds across a scale.

Frequently Asked Questions

How do I convert percent (%) to points (pt)?

What root font size should I use?

Should I use px or a relative unit?

Is my data sent anywhere?

My percentages are nested. Which parent size do I enter?

Do I need a print stylesheet at all?

The conversion runs entirely in your browser. Nothing is uploaded and nothing is stored.