About the PX to Percent Converter
Percentage font sizes are measured against the parent element, which makes them a relative unit much like em but written the way many designers already think. This converter turns a pixel target into the percentage that produces it, given whatever parent size you specify.
With a 16px parent, 100% is 16px, 87.5% is 14px and 125% is 20px. Change the parent field to match the real context and the percentages adjust with it, so inside a 14px card a 12px target works out at about 85.71%. Percentages and em describe the same relationship, which is why 1.25em and 125% render identically for font-size.
One practical use is the root reset that many stylesheets still carry: applying html { font-size: 62.5% } makes the root 10px, because 62.5 percent of the 16px default is 10. Percentages also appear on widths and heights, but there they refer to the containing block instead of a font size, so a width figure converts against a completely different reference. The reverse direction lives in Percent to PX.
How to use
- Enter the pixel font sizes, one per line.
- Set the parent font size in the base field.
- Copy the percentage values.
- Check the table for the ratios you use most.
Common questions
- What percentage is 14px?
- 87.5% of a 16px parent. Adjust the base field when the parent uses a different size.
- Is a percentage the same as an em?
- For font-size, yes. A rule of 150% and a rule of 1.5em produce the same result.
- Does this work for widths?
- No. A percentage width refers to the containing block rather than a font size, so you would need the container width as your base.
- Where does 62.5% come from?
- It is 10 divided by 16, a common reset that makes the root font size 10px so rem values read easily.