Px to percent converter
Convert pixel values to relative percentages and back. Set your base container or font size and keep both values synchronized in real time.
px
%
16px equals 100% of a 16px base.
The container width or parent font size that equals 100%.
Common basesFor typography, standard browser base is
16px. For responsive layout containers, typical desktop widths range from 1024px to 1200px.Tip: press Enter in either field to copy the percentage value.
Common sizes
Based on a base size of 16px.
| Use | Pixels | Percentage | Actions |
|---|---|---|---|
| Caption | 12px | 75% | |
| Small text | 14px | 87.5% | |
| Body text | 16px | 100% | |
| Large body | 18px | 112.5% | |
| Subheading | 24px | 150% | |
| Heading | 32px | 200% | |
| Large heading | 48px | 300% | |
| Display | 64px | 400% |
How it works
1
Set the base size
Choose a base container width (e.g., 1200px) or root font size (16px) that represents 100%.
2
Type pixels or percent
Enter a pixel value or percentage. The opposite field updates dynamically.
3
Copy the result
Copy the percentage value ready to paste into responsive CSS layouts or typography.