PX to Percent
Convert pixel font sizes to percentages.
Convert Pixels (px) to Percent (%). Results update as you type.
px
Browser default is 16px
px to % conversion table (base 16px)
| Pixels | Percent |
|---|---|
| 1px | 6.25% |
| 2px | 12.5% |
| 4px | 25% |
| 8px | 50% |
| 10px | 62.5% |
| 12px | 75% |
| 14px | 87.5% |
| 16px | 100% |
| 18px | 112.5% |
| 20px | 125% |
| 24px | 150% |
| 28px | 175% |
| 32px | 200% |
| 36px | 225% |
| 40px | 250% |
| 48px | 300% |
| 56px | 350% |
| 64px | 400% |
| 72px | 450% |
| 96px | 600% |
PX to Percent Converter
This tool converts pixel font sizes into percentages of a base font size – the kind of value you write as font-size: 87.5%. Enter a pixel value, adjust the base if your parent element is not 16px, and copy the result. Paste several values into the bulk box to convert a complete type scale in one go.
The formula
percent = px ÷ base font size × 100
Note that this is a font-size percentage. It describes text size relative to the parent's text, not a width relative to a container. For layout widths, a percentage depends on the container width instead.
| Pixels | Percent (16px base) |
|---|---|
| 10px | 62.5% |
| 12px | 75% |
| 14px | 87.5% |
| 18px | 112.5% |
| 24px | 150% |
Worked example: the 62.5% root trick
Many stylesheets start with html { font-size: 62.5%; }. The reason becomes obvious when you convert: 10px ÷ 16 × 100 = 62.5%. With a 10px root, 1rem equals 10px, so 14px text becomes 1.4rem and 32px becomes 3.2rem. Because the value is a percentage rather than a fixed 10px, users who raise their browser's default text size still get bigger text.
Where percentage font sizes appear
- Root declarations such as
html { font-size: 100%; }in CSS resets - Older stylesheets and email templates written before rem was widely supported
- Relative adjustments like
small { font-size: 87.5%; }, which scale with any surrounding text
For the font-size property, 100% is equivalent to 1em, so 150% and 1.5em produce identical text. Some teams simply prefer the percentage notation for readability.
Related converters
To reverse the calculation use Percent to PX, or convert to root-relative units with PX to REM.
Frequently Asked Questions
How do I convert pixels to a percentage font size?
Divide the pixel value by the base (parent) font size and multiply by 100. With a 16px base, 14px ÷ 16 × 100 = 87.5%.
What does font-size: 62.5% mean?
It sets the root font size to 62.5% of the 16px browser default, which is 10px. Many developers use it so that 1rem equals 10px.
Is a percentage font size the same as em?
For the font-size property, yes: 100% equals 1em, so 150% gives the same result as 1.5em. For other properties such as width, percentages refer to the containing block instead of the font size.