Responsive web design demands fluid typography and spacing. However, many developers still rely entirely on absolute units like pixels (px), which breaks accessibility for users who scale their browser's default font size. Understanding CSS units is not just a stylistic preference—it is a WCAG 2.1 accessibility compliance issue that can affect your search ranking and user experience.
The CSS Unit Taxonomy
CSS units fall into two major categories:
- Absolute units: Fixed sizes that do not change based on context. px, pt, cm, mm, in.
- Relative units: Sizes that scale based on some reference value. em, rem, vw, vh, vmin, vmax, ch, ex, %.
Pixels (px): Absolute Precision
Pixels (px) are absolute. If you set a font size to 16px, it stays 16px regardless of the user's OS accessibility settings. This is poor practice for typography. However, px is excellent for:
- Border widths:
border: 1px solid #ccc - Box shadows:
box-shadow: 0 2px 4px rgba(0,0,0,0.1) - Specific layout constraints that must not scale
- Media query breakpoints in older codebases (though REM is better here too)
REM (Root EM): The Modern Standard
REM (Root EM) is relative to the root <html> font size. If the user's browser is set to 16px, 1rem equals 16px. If they need larger text and set it to 24px, 1rem scales to 24px automatically. This is essential for WCAG 2.1 Success Criterion 1.4.4 (Resize text), which requires text to be resizable up to 200% without assistive technology.
To convert from px to rem, use the formula: rem = px ÷ 16 (at default root). Use our PX to REM Converter to convert all your pixel values at once.
REM vs PX Reference Table
| Pixels (px) | REM (16px base) | Common Use |
|---|---|---|
| 12px | 0.75rem | Small labels, captions |
| 14px | 0.875rem | Secondary text |
| 16px | 1rem | Body text (default) |
| 18px | 1.125rem | Large body text |
| 20px | 1.25rem | Subheadings |
| 24px | 1.5rem | H3 headings |
| 32px | 2rem | H2 headings |
| 48px | 3rem | H1 headings, heroes |
When to Use EM
The EM unit is relative to its direct parent element's font size. This makes it powerful for modular components (like buttons or cards) where the padding should scale proportionally to the component's own font size. However, EM compounds when nested—a 1.2em element inside a 1.2em container becomes 1.44em of the root. This compounding behavior makes EM tricky and is why REM is preferred for most global sizing. Test these relationships using our PX to EM Tool.
Viewport Units: VW and VH
For layout constraints, viewport units (vw, vh) map to the percentage of the browser window. 1vw = 1% of the viewport width. 1vh = 1% of the viewport height. They are essential for full-screen hero sections (height: 100vh), and fluid typography (font-size: clamp(1rem, 4vw, 3rem)). Translate your Figma designs accurately using the PX to VH/VW Calculator.
The clamp() Function: Responsive Typography
CSS clamp() allows you to set a fluid value that scales between a minimum and maximum: font-size: clamp(1rem, 2.5vw, 3rem). This creates typography that scales smoothly from mobile to desktop without media queries.
Frequently Asked Questions
Should I use REM in media queries?
Yes, and this is often overlooked. Using REM in media queries means breakpoints also respond to user font size preferences, improving accessibility at the layout level—not just the text level. @media (min-width: 48rem) is equivalent to 768px at default but scales with user settings.
What is the pt unit and when should I use it?
Points (pt) are a print unit: 1pt = 1/72 inch. Use pt only for print stylesheets (@media print). On screens, always use px or rem. Convert using our PX to PT Converter.