Point to Percent Converter

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

Convert points to pixels, then express that as a share of the parent size: 12pt = 16px = 100% of a 16px parent. 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: Why would I convert to percent rather than rem?

Consistency with an existing codebase is the honest answer. If a stylesheet already sizes everything in percentages, adding one rem value creates two mental models for the next person. For anything new, rem is the better target: it does not compound through nesting and it is easier to reason about.

Q: Does the percentage change if the parent changes?

The percentage you write stays the same, but the rendered size changes with it — that is the point of a relative unit. If you need a specific point size to survive whatever container it lands in, you need an absolute unit, and on screen the honest choice is px, with the accessibility cost that comes with it.

Convert points to a percentage font size, relative to whatever parent size you specify.

Value to convert (pt)

Result (%)

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

Turning a point size into a percentage gives you a value that scales with its surroundings instead of being frozen for print. The tool converts points to pixels using the fixed CSS ratio, then expresses that as a percentage of the parent font size you supply. It is the right conversion when you are matching a print-derived spec inside an existing percentage-based stylesheet — though for new work, rem is usually the better destination, and the tool says so rather than pretending percentages are the modern choice.

When to Use It

You are converting a design handed over in points (pt) into a stylesheet that uses percent (%) for accessibility.
You inherited a codebase that mixes units and you need the % equivalent of an existing pt value.
You want to check what a pt 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

12

12pt is 100% of a 16px parent — the two defaults coincide.

18

18pt is 150% at a 16px parent.

9

9pt is 75%. Inside a smaller parent the same 9pt becomes a much larger percentage — that is the trade you make with relative units.

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 points (pt) 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 percent (%) 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 point value maps to different percentages — the same pt 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 points (pt) to percent (%)?

What root font size should I use?

Should I use px or a relative unit?

Is my data sent anywhere?

Why would I convert to percent rather than rem?

Does the percentage change if the parent changes?

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