Percent to PX
Convert percentage font sizes to pixels.
Convert Percent (%) to Pixels (px). Results update as you type.
%
Browser default is 16px
% to px conversion table (base 16px)
| Percent | Pixels |
|---|---|
| 25% | 4px |
| 50% | 8px |
| 62.5% | 10px |
| 75% | 12px |
| 87.5% | 14px |
| 100% | 16px |
| 112.5% | 18px |
| 125% | 20px |
| 150% | 24px |
| 175% | 28px |
| 200% | 32px |
| 250% | 40px |
| 300% | 48px |
Percent to PX Converter
Find out how many pixels a percentage font size really renders at. Enter a value such as 125 and the converter returns 20px for the default 16px base. Adjust the base font size to match the parent element you are working inside, paste a column of percentages into the bulk box, or pick a value from the conversion table.
How percentage font sizes are calculated
In CSS, font-size: 125% means "125% of the font size I inherited". The formula is:
px = percent × parent font size ÷ 100
| Percent | Pixels (16px base) |
|---|---|
| 62.5% | 10px |
| 75% | 12px |
| 87.5% | 14px |
| 112.5% | 18px |
| 150% | 24px |
| 200% | 32px |
Worked example: auditing a legacy stylesheet
Older themes often set body { font-size: 87.5%; } and then size headings with more percentages, such as h2 { font-size: 171.43%; }. The body text resolves to 87.5% × 16 = 14px. The heading is relative to that 14px body, so it becomes 171.43% × 14 ≈ 24px. Enter 14 as the base and 171.43 as the value to confirm the heading size before rewriting the theme in modern units.
When you need pixel values
- Handing sizes to a designer who works in Figma or Sketch, where everything is measured in pixels.
- Debugging why nested elements look larger or smaller than expected – percentages compound at every level.
- Checking that body text computes to at least 16px on mobile, a common readability target.
Percentages behave exactly like em for font sizes (100% = 1em), so if you are modernizing old CSS, the PX to REM converter helps you move the resulting pixel values to root-relative units. To go the other way, use PX to Percent.
Frequently Asked Questions
How do I convert a percentage font size to pixels?
Multiply the percentage by the parent font size and divide by 100. With a 16px parent, 125% × 16 ÷ 100 = 20px and 87.5% × 16 ÷ 100 = 14px.
What is 100% font size in pixels?
100% equals the font size of the parent element. On the html element with no user or author changes, that is the browser default of 16px.
Why does 62.5% equal 10px?
Because 62.5% of the default 16px is exactly 10px. Setting html { font-size: 62.5% } is a common trick that makes 1rem equal 10px, which simplifies mental math.
Does a percentage font size always produce the same pixel size?
No. A percentage is relative to the parent's computed font size, so 150% inside a 20px container is 30px, while 150% inside a 16px container is 24px.