Choosing CSS units affects scalability, accessibility, and interface consistency. px, rem, em, vw, and vh each serve different purposes. This article explains when to use each, how accessibility relates to rem for font sizes, and why the base font-size is critical for responsive typography.
For quick value conversions, use the px ↔ rem converter on reChecker — an interactive tool with a configurable base size.
px — pixels
px is an absolute unit. One pixel corresponds to one pixel on the screen (taking device pixel density into account). The value 16px will always be 16 pixels, regardless of the user's settings.
When to use px
- Borders, shadows, and spacing — where scaling with the font size is not required
- Fixed-size icons — when precise alignment to a grid is needed
- Small decorative elements — lines, dividers, and thin outlines
.card {
border: 1px solid #e5e7eb;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 16px;
}Limitations of px for typography
If a user increases the font size in their browser (accessibility settings), values in px do not scale. Text set to font-size: 14px will remain 14px even when «Large font» is enabled. This violates WCAG 2.1 (criterion 1.4.4) — content must be scalable to 200% without loss of functionality.
rem — root em
rem (root em) is a relative unit tied to the font-size of the root element (html). By default, browsers use html { font-size: 16px }, so 1rem = 16px.
Benefits of rem
- Scales with user settings — when the base font size increases, all rem values scale proportionally
- A single point of control — change
font-sizetohtml, and the entire interface is recalculated - Predictability — rem does not depend on the parent context, unlike em
When to use rem
- Font sizes — essential for accessibility
- Spacing and sizes related to typography — padding, margin, and text container width
- Responsive interfaces — when changing the base size at breakpoints
:root {
font-size: 16px; /* или 100% — наследует настройки пользователя */
}
body {
font-size: 1rem; /* 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
.container {
padding: 1.5rem; /* 24px */
max-width: 60rem; /* 960px */
}em — relative em
em is a relative unit tied to the font-size of the current element (or the nearest parent with a specified font-size). 1em = the current font size of the element.
em characteristics
- Cascading inheritance —
2eminside an element withfont-size: 14px= 28px; inside an element withfont-size: 20px= 40px - Complex calculations — values multiply when nested, making the result harder to predict
- Convenient for components — a button with
padding: 0.5em 1emscales relative to its own font-size
When to use em
- Inside components — button, input, and card padding and margin relative to their own font-size
- Media queries —
@media (min-width: 40em)are tied to the font size (an outdated approach; px is more commonly used) - Icons next to text —
width: 1em; height: 1emfor alignment with the line height
.button {
font-size: 1rem;
padding: 0.5em 1.25em; /* 8px 20px — масштабируется с font-size кнопки */
border-radius: 0.25em;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}vw and vh — viewport units
vw (viewport width) is 1% of the browser window's width. vh (viewport height) is 1% of its height. vmin and vmax are the smaller and larger of vw and vh, respectively.
Using vw/vh
- Full-screen sections —
min-height: 100vhfor hero sections - Responsive typography —
font-size: clamp(1rem, 2vw + 1rem, 2rem)for smooth scaling - Elements tied to the screen — modals and sidebars
Be careful with vw for text
font-size: 5vw will produce text that is too small on a narrow screen and too large on a wide one. Use clamp() to constrain the range:
.hero-title {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}The importance of the base font-size
The base size on html determines all rem calculations. Recommendations:
- Do not set it below 16px — this reduces readability and can conflict with browser zoom
- Use 100% or 16px — inherits the user's settings
- Adjust responsively at breakpoints — for dense interfaces, you can reduce it on mobile, but do so carefully
html {
font-size: 100%; /* 16px по умолчанию, учитывает настройки пользователя */
}
@media (min-width: 1200px) {
html {
font-size: 18px; /* крупнее на больших экранах */
}
}A hybrid approach
The best practice is to combine units:
| Property | Recommendation | Reason |
|---|---|---|
| font-size | rem | Accessibility, scaling |
| padding, margin | rem or em | rem — globally; em — inside components |
| border, box-shadow | px | Fixed thickness |
| width, max-width | rem, %, vw | Flexibility |
| Media queries | px or em | px — simpler; em — for font-size-dependent breakpoints |
Percentage values and inheritance
Percentages for font-size are calculated relative to the parent. font-size: 150% is 1.5 × the parent's font size. If the parent is 16px, the result is 24px. Percentages create a cascade similar to em: values multiply when nested. For global sizes, rem is preferable; percentages are suitable for local components where sizing «relative to the parent» is needed.
Units for media queries
In @media, you can use both px and em. @media (min-width: 40em) is tied to the font size: with a 16px base, it equals 640px. If the user increases the font size, the breakpoint shifts — the layout adapts to readability. For most projects, @media (min-width: 768px) in px is sufficient and simpler. Use em in media queries for typography-oriented designs.
px ↔ rem converter
Converting values manually is tedious. The px ↔ rem converter on reChecker lets you:
- Enter values in px or rem
- Set the base font-size (16px by default)
- Get equivalents in both directions
- Copy ready-to-use CSS
The tool is useful when migrating from px to rem, working with pixel-based design mockups, and setting up a typographic scale.
Accessibility (a11y)
WCAG 2.1 requires content to be scalable to 200% without loss of information. Using rem for font-size, line-height, and spacing in text blocks ensures proper scaling when the font size is increased in browser settings or through zoom. Using px for font sizes prevents this behavior. People with low vision often set their system or browser font size above the default — rem and em respect these settings, while px does not.
Migrating from px to rem
When converting existing code, divide the px value by 16 (or by your base size). 24px → 1.5rem; 12px → 0.75rem. For fractional values (18px → 1.125rem), use the reChecker converter. Start with font-size and key spacing values; leave borders and shadows in px. Check the interface at 150% and 200% zoom — everything should remain readable and functional.
FAQ
Should I convert everything from px to rem?
No. Borders, shadows, and small spacing values can stay in px. Use rem for font-size and key spacing in text content. For everything else, it depends on the situation.
What base font-size should I use?
16px or 100%. A size below 16px reduces readability. 100% inherits the user's settings, making it preferable for accessibility.
What is the difference between rem and em?
rem is tied to the root element's (html) font-size; em is tied to the current element's font-size. rem is more predictable, while em is convenient inside components for padding and margin relative to their own size.
When should I use vw/vh for fonts?
Use them with caution. It is better to use clamp(1rem, 2vw + 1rem, 2rem) — it limits the minimum and maximum size. Plain vw can produce unreadable text on narrow screens.
Where can I convert px to rem?
The px ↔ rem converter on reChecker is a free online tool. Set the base size, enter a value in px or rem, and get its equivalent. It is suitable for migrating styles and working with design mockups.