Font Size Converter
Convert between px, rem, em, and pt with a configurable base font size.
Common Sizes Reference
| Name | px | rem | em | pt |
|---|---|---|---|---|
| xs text | 12 | 0.75 | 0.75 | 9 |
| sm text | 14 | 0.875 | 0.875 | 10.5 |
| base text | 16 | 1 | 1 | 12 |
| lg text | 18 | 1.125 | 1.125 | 13.5 |
| xl text | 20 | 1.25 | 1.25 | 15 |
| 2xl heading | 24 | 1.5 | 1.5 | 18 |
| 3xl heading | 30 | 1.875 | 1.875 | 22.5 |
| 4xl heading | 36 | 2.25 | 2.25 | 27 |
| 5xl heading | 48 | 3 | 3 | 36 |
| 6xl heading | 60 | 3.75 | 3.75 | 45 |
Click a row to load that size into the converter.
What Is a Font Size Converter?
A font size converter translates between CSS length units: px (pixels), rem (root em), em (relative em), and pt (points). Each unit serves a different purpose in web and print design. px is absolute and device-independent; rem and em are relative to a base font size and scale with user preferences; pt is a print unit equal to 1/72 of an inch.
How to Use This Tool
- Set the Base Font Size (default 16px, matching most browsers).
- Type a value in any of the four unit fields — the other three update instantly.
- Use the Common Sizes table as a quick reference for typical UI text sizes.
- Change the base font size to match your project's
htmlfont-size if it differs from 16px.
Key Features
- Instant bidirectional conversion — edit any field
- Configurable base font size for accurate rem/em math
- Common size reference table with Tailwind CSS class names
- pt conversion for print stylesheets (1px = 0.75pt at 96dpi)
FAQ
What is the default browser font size?
Most browsers default to 16px for the root element. This means 1rem = 16px unless the user or stylesheet overrides the html font-size.
What is the difference between rem and em?
rem is always relative to the root (html) element font size. em is relative to the font size of the nearest parent element. For this converter, both use the configured base size since the parent context is not known.
When should I use pt instead of px?
pt (points) is a print unit. Use it in print stylesheets (@media print) where physical dimensions matter. For screen layouts, stick with px, rem, or em.