Font Size Calculator
Enter a font size in any unit and the root size your page uses. The calculator converts it to pixels, points, rem and percent and shows how big the text looks.
- px, pt, em, rem
- Custom root size
- Readable size guide
The root size is the html font size. Browsers default to 16 px unless the user changes it.
Web and print use different units for the same text. Designers in print work in points, while browsers use pixels. CSS also has em and rem, which scale with the parent or root size. Getting them right keeps text readable and lets users zoom without breaking the layout.
Font size conversion chart
At a 16 px root. Search for a size.
| px | pt | rem | % | Use |
|---|---|---|---|---|
| 10 | 7.5 | 0.625 | 62.5 | Fine print |
| 12 | 9 | 0.75 | 75 | Captions |
| 14 | 10.5 | 0.875 | 87.5 | Small text |
| 16 | 12 | 1 | 100 | Body text |
| 18 | 13.5 | 1.125 | 112.5 | Large body |
| 20 | 15 | 1.25 | 125 | Lead text |
| 24 | 18 | 1.5 | 150 | H3 |
| 32 | 24 | 2 | 200 | H2 |
| 40 | 30 | 2.5 | 250 | H1 |
| 48 | 36 | 3 | 300 | Display |
1 pt = 1.333 px, 1 rem = 16 px by default, and 100% = 1 em = the parent size.
Size preview
Drawn at true size. Slide the size.
The dashed line marks the cap height. A 16 px reference sits beside the sample so you can compare.
How to convert font sizes
Through pixels. Step through it.
Pick the source
px, pt, em, rem or %.
Use rem for most font sizes on the web. It respects the user's browser setting and keeps the scale consistent.
px, rem or em
CSS units. Compare them.
Fixed size. Simple but ignores user preferences.
Relative to the root. The best default for type.
Relative to the parent. Good for padding that scales.
em compounds inside nested elements, which can surprise you. rem always refers back to the root.
Readable type
Accessibility basics. Tick each item.
Tick each item as you go.
WCAG asks that text can be zoomed to 200% without loss of content. Relative units make that much easier.
What you get
Every unit at once. Each tile explains one result.
For screens.
For print.
For CSS.
Of the root.
What the size suits.
The millimetre value is the em height, roughly from the top of capitals to the bottom of descenders.
Frequently Asked Questions
No question matches that search.
How many pixels is 12 pt?
16 px.
How do I convert px to rem?
Divide by the root size, usually 16. 24 px = 1.5 rem.
What is the default font size in browsers?
16 px.
What font size is best for body text?
16 to 18 px on screens, 10 to 12 pt in print.
What is the difference between em and rem?
em is relative to the parent element; rem is relative to the root.
How many points is 16 px?
12 pt.
Is 14 px too small?
It is fine for captions but small for long reading.
Font sizes in any unit
Enter a size, set your root and get every unit with a true-size preview. Use rem for the web, keep body text at 16 px or more, and your type will stay readable everywhere.
More size calculators
Each one has its own calculator, worked examples and answers to common questions.