Typography Converter
Convert between typography units. Convert pixels to rem, em, pt, and percentage. Calculate responsive font sizes.
Font Preview
The quick brown fox jumps over the lazy dog
Typography Scale Generator
Common Typography Conversions
| Pixels | REM | EM | Points | Percent |
|---|---|---|---|---|
| 10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
| 12px | 0.75rem | 0.75em | 9pt | 75% |
| 14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
| 16px | 1rem | 1em | 12pt | 100% |
| 18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
| 20px | 1.25rem | 1.25em | 15pt | 125% |
| 24px | 1.5rem | 1.5em | 18pt | 150% |
| 32px | 2rem | 2em | 24pt | 200% |
| 48px | 3rem | 3em | 36pt | 300% |
| 64px | 4rem | 4em | 48pt | 400% |
About Typography Units
Pixels (px)
Pixels are an absolute unit in CSS. They provide a fixed size regardless of the parent element or root font size. While precise, they do not scale with user preferences and can cause accessibility issues.
REM (Root EM)
REM units are relative to the root element (html) font size. If the root font size is 16px, 1rem equals 16px. REM is ideal for responsive typography as it respects user browser settings and scales consistently.
EM
EM units are relative to the font size of the parent element. They compound when nested, which can be both powerful and tricky. 1em equals the current font size of the element.
Points (pt)
Points are traditionally used in print design. 1 point equals 1/72 of an inch. While supported in CSS, points are generally better suited for print stylesheets than screen displays.
Percentage (%)
Percentage units for font-size are relative to the parent element. 100% equals the parent font size. Like em, percentages compound when nested.
Viewport Width (vw)
VW units are relative to 1% of the viewport width. They create truly responsive typography that scales with screen size. Often used with clamp() for fluid typography.
Key Conversion Formulas
- PX to REM: rem = px / base-font-size
- REM to PX: px = rem x base-font-size
- PX to PT: pt = px x 0.75 (at 96 DPI)
- PT to PX: px = pt x 1.333 (at 96 DPI)
- PX to VW: vw = (px / viewport-width) x 100