Skip to content

CSS Units

CSS units are used to define measurements in web design. They control font size, spacing, layout width, height, borders, media sizes, responsive containers, and viewport-based designs. Learning CSS units helps you build flexible, accessible, and responsive websites.

What Are CSS Units?

CSS units define the size or measurement of a CSS property. For example, when you set font-size, width, margin, padding, or height, you usually use a CSS unit. 

.card {
  width: 300px;
  padding: 1rem;
  font-size: 1rem;
}

CSS units are mainly divided into two groups: absolute units and relative units.

Why CSS Units Are Important

  • Units control element size, spacing, and layout.
  • Responsive units help websites adapt to different screen sizes.
  • Relative units improve accessibility and browser zoom support.
  • Correct units reduce layout problems on mobile devices.
  • Units like rem, %, vw, and fr help create scalable layouts.
  • Good unit choices improve readability, usability, and maintainability.

CSS Units Cheatsheet

The following table explains the most common CSS units and when to use them.

Unit Type Example Best Use
px Absolute font-size: 16px; Precise borders, icons, shadows, and fixed measurements.
% Relative width: 100%; Fluid widths and responsive containers.
em Relative padding: 1em; Spacing based on the current element’s font size.
rem Relative font-size: 1rem; Accessible typography and scalable spacing.
vw Viewport width: 100vw; Viewport-based widths and full-screen sections.
vh Viewport min-height: 100vh; Hero sections and full-screen layouts.
vmin Viewport font-size: 5vmin; Responsive sizing based on the smaller viewport side.
vmax Viewport font-size: 5vmax; Responsive sizing based on the larger viewport side.
ch Font Relative max-width: 70ch; Readable text line length.
fr Grid grid-template-columns: 1fr 2fr; CSS Grid flexible columns and rows.

Absolute CSS Units

Absolute units have fixed values. They do not scale based on the parent element or viewport. The most common absolute unit in web design is px.

Unit Name Common Use
px Pixels Most common screen unit.
pt Points Print styles.
cm Centimeters Print-specific layouts.
mm Millimeters Print-specific layouts.
in Inches Print styles. 
.box {
  width: 300px;
  border: 1px solid #dee2e6;
}

Relative CSS Units

Relative units are based on another value such as the parent size, root font size, current font size, or viewport size. They are useful for responsive and accessible design. 

.article {
  max-width: 70ch;
  padding: 2rem;
  font-size: 1rem;
}

Relative units are recommended for font sizes, spacing, layout widths, and responsive sections.

CSS px Unit

The px unit stands for pixels. It is useful when you need precise control. 

.icon {
  width: 24px;
  height: 24px;
}

.card {
  border: 1px solid #dee2e6;
}

Use px for borders, icons, shadows, and exact UI details. For typography, rem is often more scalable.

CSS em Unit

The em unit is relative to the font size of the current element. It is useful for spacing that should scale with text size. 

.button {
  font-size: 1rem;
  padding: 0.75em 1em;
}

If the button font size changes, the padding scales with it.

CSS rem Unit

The rem unit is relative to the root font size, usually the <html> element. It is commonly used for scalable typography and spacing. 

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
}

rem units are easier to manage than deeply nested em units.

CSS Percentage Unit

The percentage unit is relative to another value, often the parent element’s size. 

.container {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

.image {
  width: 100%;
  height: auto;
}

Percentages are useful for fluid layouts and responsive images.

Viewport Units: vw, vh, vmin, vmax

Viewport units are based on the size of the browser viewport.

Unit Meaning Example Use
vw 1% of viewport width. Full-width sections.
vh 1% of viewport height. Hero sections.
vmin 1% of the smaller viewport side. Responsive typography or shapes.
vmax 1% of the larger viewport side. Large visual elements. 
.hero {
  min-height: 100vh;
  padding: 5vw;
}

Modern Viewport Units: svh, lvh, dvh

Modern CSS includes viewport units that help solve mobile browser address bar issues.

Unit Meaning Best Use
svh Small viewport height. Stable mobile layouts when browser UI is visible.
lvh Large viewport height. Layouts when browser UI is hidden.
dvh Dynamic viewport height. Layouts that adapt as browser UI changes. 
.mobile-hero {
  min-height: 100dvh;
}

CSS ch Unit

The ch unit is based on the width of the 0 character in the current font. It is very useful for readable text widths. 

.article-content {
  max-width: 70ch;
  line-height: 1.7;
}

A content width around 60ch to 75ch is often comfortable for reading.

CSS fr Unit

The fr unit is used in CSS Grid. It represents a fraction of available space. 

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

In this example, the second column gets twice as much available space as the first column.

CSS Units with calc(), min(), max(), and clamp()

CSS functions can combine units to create flexible layouts and responsive typography. 

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
}

.sidebar-layout {
  grid-template-columns: minmax(240px, 320px) 1fr;
}
  • calc() performs calculations using different units.
  • min() picks the smallest value.
  • max() picks the largest value.
  • clamp() sets a minimum, preferred, and maximum value.

Which CSS Unit Should You Use?

Use Case Recommended Unit Why
Body text rem Scales well with user preferences.
Component spacing rem or em Creates scalable spacing.
Fluid containers %, min(), max-width Adapts to screen size.
Hero height dvh, vh, or min-height Uses viewport height responsibly.
Text line width ch Improves reading comfort.
Grid columns fr Distributes available space.
Borders px Provides precise visual control.
Responsive font size clamp() with rem and vw Scales between safe minimum and maximum sizes.

CSS Units and Accessibility

Relative units like rem, em, and percentages support better accessibility because they adapt more naturally to browser settings and zoom. 

body {
  font-size: 1rem;
  line-height: 1.6;
}

.button {
  min-height: 2.75rem;
  padding: 0.75em 1em;
}
  • Use readable font sizes.
  • Do not lock layouts with fixed pixel widths.
  • Support browser zoom and user font preferences.
  • Use enough spacing for touch targets.
  • Avoid tiny text and cramped layouts.

CSS Units and SEO

CSS units do not directly create SEO metadata, but they affect mobile usability, readability, page experience, accessibility, and Core Web Vitals.

  • Responsive units improve mobile-friendly layouts.
  • Readable widths and font sizes improve content engagement.
  • Stable sizing reduces layout shift.
  • Viewport units help create flexible sections.
  • Accessible sizing supports better user experience.

Common CSS Unit Mistakes

  • Using fixed pixel widths for full layouts.
  • Using 100vw and causing horizontal scrolling.
  • Using 100vh on mobile without considering browser UI.
  • Using too many nested em values and causing unexpected scaling.
  • Using tiny fixed font sizes that hurt readability.
  • Not setting max widths for readable content.
  • Using percentage heights without a defined parent height.
  • Forgetting to test zoom, mobile, and different screen sizes.

CSS Units Best Practices

  • Use rem for most font sizes and spacing.
  • Use em when spacing should scale with the element’s font size.
  • Use % and max-width for fluid containers.
  • Use ch to control readable line length.
  • Use fr for CSS Grid layouts.
  • Use clamp() for responsive typography.
  • Use px for borders, small icons, and exact details.
  • Use dvh carefully for mobile full-height layouts.
  • Test layouts on mobile, desktop, zoomed text, and different viewport sizes.

Key Takeaways

  • CSS units define size, spacing, layout, and typography.
  • Absolute units like px are fixed.
  • Relative units like rem, em, and % are flexible.
  • Viewport units like vw, vh, and dvh depend on screen size.
  • The fr unit is useful for CSS Grid layouts.
  • Choosing the right unit improves responsiveness, accessibility, readability, and maintainability.

Pro Tip

A simple beginner rule: use rem for text and spacing, % for fluid widths, fr for grid columns, ch for readable text width, and px for small precise details.

You now understand CSS units, absolute units, relative units, viewport units, px, em, rem, percentages, vw, vh, dvh, ch, fr, responsive sizing, accessibility, SEO benefits, best practices, and common mistakes.