Root Font Size:
PX to REM & Type Scale
Convert between PX, REM, EM, and PT units and generate harmonious CSS typographic scales.
Bidirectional Unit Converter
PX ↔ REM / PT / %
Quick Reference Table
Common Spacing & Font Sizes (Base 16px)
| Pixels (px) | REM | Percent (%) | Action |
|---|---|---|---|
| 4px | 0.25rem | 25% | |
| 8px | 0.5rem | 50% | |
| 10px | 0.625rem | 63% | |
| 12px | 0.75rem | 75% | |
| 14px | 0.875rem | 88% | |
| 16px | 1rem | 100% | |
| 18px | 1.125rem | 113% | |
| 20px | 1.25rem | 125% | |
| 24px | 1.5rem | 150% | |
| 28px | 1.75rem | 175% | |
| 32px | 2rem | 200% | |
| 36px | 2.25rem | 225% | |
| 40px | 2.5rem | 250% | |
| 48px | 3rem | 300% | |
| 64px | 4rem | 400% | |
| 72px | 4.5rem | 450% | |
| 96px | 6rem | 600% |
Modular Typography Scale
Type Hierarchy & CSS Custom Properties
Hero display headline
Page feature heading
Section title
Subsection heading
Lead paragraph & card title
Base body paragraph typography
Secondary UI interface copy
Caption & metadata label
CSS Custom Properties (:root)
:root {
font-size: 16px;
--text-xs: 0.640rem; /* 10.2px */
--text-sm: 0.800rem; /* 12.8px */
--text-base: 1.000rem; /* 16.0px */
--text-lg: 1.250rem; /* 20.0px */
--text-xl: 1.563rem; /* 25.0px */
--text-2xl: 1.953rem; /* 31.3px */
--text-3xl: 2.441rem; /* 39.1px */
--text-4xl: 3.052rem; /* 48.8px */
}Related in Images & Design
More tools in this category
Color Palette
Convert between HEX, RGB, HSL, and HWB color formats and verify WCAG contrast ratios.
Image Converter
Convert images between PNG, JPG, and WebP formats locally with adjustable quality.
Image Resizer
Resize images by exact pixel dimensions or percentage scale while preserving aspect ratio.
Image Cropper
Crop, rotate, and flip images using common aspect ratio presets or freeform selection.