Why Typography Units Matter
The Dimension Converter bridges the gap between design tools (which output PX values) and modern, accessible CSS (which relies on relative units like REM and EM). Understanding the difference between these units is fundamental for building UIs that respect user preferences and scale gracefully across devices.
Unit Deep Dive
Absolute units. 1px is always 1 device pixel. Warning: Does not scale with browser zoom or user accessibility settings.
Relative to the <html> font size. Ideal for global sizing, spacing, and layouts. Respects user's browser settings.
Relative to the parent element's font size. Useful for component-level scaling (e.g., buttons, padding within text) but can lead to compounding issues.
Developer Reference
Modern CSS frameworks like Tailwind use REM under the hood. Here's how to set up your own scalable system.
/* Set the base for your project */
html {
font-size: 16px;
}
/* Now 1rem = 16px */
.button {
padding: 0.75rem 1.5rem;
/* = 12px 24px */
}
Common Sizing Reference
| Use Case | PX | REM | Tailwind Class |
|---|---|---|---|
| Body Text | 16px | 1rem | text-base |
| Small / Caption | 14px | 0.875rem | text-sm |
| Large / Lead | 18px | 1.125rem | text-lg |
| H3 Heading | 24px | 1.5rem | text-2xl |
| H1 Heading | 36px | 2.25rem | text-4xl |
Accessibility (A11y)
Using REM for all sizing ensures that users who set a larger default font size in their browser (for vision impairment) will see your entire UI scale proportionally.
The 62.5% Trick
Some developers set html { font-size: 62.5%; } to make 1rem = 10px for easier math. While convenient, this can break user preferences and is generally not recommended.
When to Use PX
Pixels are still appropriate for very small, fixed details: 1px borders, box shadows, and specific icon sizes that should not scale.
Frequently Asked Questions
What is the default browser font size?
The default in virtually all modern browsers is 16px. This is the value used when computing REM units unless the user or developer has overridden it.
Should I use EM for media queries?
Yes! Using EM or REM in media queries ensures breakpoints also scale with user font size preferences, creating a more robust responsive design.
Why does Tailwind use REM?
Tailwind CSS, like most modern frameworks, uses REM-based sizing (e.g., p-4 = 1rem = 16px) to ensure accessibility and consistent scaling across the entire design system.
What about viewport units (VW/VH)?
Viewport units are great for layout sizing (e.g., full-screen sections) but should be used sparingly for typography as they don't respect user zoom or font settings.