Font Size Unit Converter (PX, REM, EM, %, PT)
Professional bi-directional CSS unit converter. Instantly translate Pixels to REM, EM, Points, and Percentages with a live typography preview and dynamic scale generator.
| PX | REM | Example Usage |
|---|
About
In modern web development, managing typography requires a precise understanding of both absolute and relative units. While pixels (px) offer fixed precision, relative units like rem and em are critical for creating accessible, responsive designs that respect a user's browser settings.
This tool acts as a bridge between design files and code. Unlike simple calculators, it simultaneously synchronizes five distinct CSS units based on your project's Root Base Size. It includes a real-time visual sandbox to verify readability and a dynamic reference scale to assist in defining type systems for design systems.
Accuracy is paramount: calculations use floating-point precision to ensure your layouts remain pixel-perfect across varying viewport widths and resolutions.
Formulas
The conversion logic relies on the relationship between the target size and the Base font size (typically 16px in most browsers).
Where Base is the root font size defined in the html or parent selector. pt is calculated based on the standard web definition where 1in = 96px = 72pt.
Reference Data
| Pixel px | REM rem | Percent % | Point pt | Tailwind Class |
|---|---|---|---|---|
| 12px | 0.75rem | 75% | 9pt | text-xs |
| 14px | 0.875rem | 87.5% | 10.5pt | text-sm |
| 16px | 1rem | 100% | 12pt | text-base |
| 18px | 1.125rem | 112.5% | 13.5pt | - |
| 20px | 1.25rem | 125% | 15pt | text-xl |
| 24px | 1.5rem | 150% | 18pt | text-2xl |
| 30px | 1.875rem | 187.5% | 22.5pt | text-3xl |
| 36px | 2.25rem | 225% | 27pt | text-4xl |
| 48px | 3rem | 300% | 36pt | text-5xl |
| 60px | 3.75rem | 375% | 45pt | text-6xl |