The Complete CSS Units Cheatsheet: Understanding px, em, rem, %, vw, vh

Introduction: What Are CSS Units?

CSS units are measurements that define the size, spacing, and positioning of elements on a webpage. Using the right units is crucial for creating responsive, accessible designs that work across different devices and screen sizes. This cheatsheet covers the most important CSS units: pixels (px), ems (em), root ems (rem), percentages (%), viewport width (vw), and viewport height (vh).

Core Concepts of CSS Units

Types of CSS Units

CSS units fall into two main categories:

• Absolute Units: Fixed measurements that appear the same size regardless of context (px, mm, cm, in, pt, pc)
• Relative Units: Dynamic measurements that scale based on other elements (em, rem, %, vw, vh, vmin, vmax)

When to Use Each Type

• Absolute Units: Best for fixed-size elements, print layouts, and pixel-perfect designs
• Relative Units: Ideal for responsive designs, accessibility, and fluid layouts

Detailed Breakdown of Common CSS Units

Absolute Units

Pixels (px)

.element {
    width: 300px;
    margin: 20px;
    font-size: 16px;
}

• Definition: One pixel on the display
• Characteristics: Fixed size, doesn’t scale with user preferences
• Best for: Borders, shadows, small decorative elements, fixed-width layouts

Relative Units

Ems (em)

.element {
    font-size: 1.2em;    /* 1.2 times parent's font size */
    margin: 1em;         /* Equal to the element's font size */
    padding: 0.5em;      /* Half of the element's font size */
}

• Definition: Relative to the font-size of the element itself
• Characteristics: Compounds when nested (cascading effect)
• Best for: Typography, padding, margins related to text elements

Root Ems (rem)

:root {
    font-size: 16px;     /* Base size - often browser default */
}

.element {
    font-size: 1.5rem;   /* 1.5 times root font size (24px) */
    margin: 2rem;        /* 2 times root font size (32px) */
}

• Definition: Relative to the font-size of the root (html) element
• Characteristics: Consistent scaling regardless of nesting
• Best for: Global sizing, consistent spacing, accessible layouts

Percentages (%)

.container {
    width: 80%;          /* 80% of parent width */
    margin: 0 auto;      /* Center horizontally */
}

.child {
    width: 50%;          /* 50% of parent width */
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

• Definition: Relative to the parent element’s dimensions
• Characteristics: Creates fluid layouts that adapt to containers
• Best for: Responsive layouts, flexible widths, maintaining aspect ratios

Viewport Units

.hero {
    height: 100vh;       /* 100% of viewport height */
    width: 100vw;        /* 100% of viewport width */
}

.text {
    font-size: 5vw;      /* 5% of viewport width */
    margin-left: 10vw;   /* 10% of viewport width */
}

• Viewport Width (vw): 1vw equals 1% of viewport width
• Viewport Height (vh): 1vh equals 1% of viewport height
• vmin: 1% of the smaller dimension (width or height)
• vmax: 1% of the larger dimension (width or height)
• Best for: Full-screen layouts, hero sections, responsive typography

How to Choose the Right CSS Unit: Step-by-Step Process

1. Identify the purpose of the measurement (typography, layout, decoration)
2. Consider the context (Does it need to scale with text? With viewport?)
3. Determine relationships (Should it be relative to parent, root, or viewport?)
4. Consider accessibility (Will users need to resize text?)
5. Test across devices (How does it respond to different screen sizes?)
6. Check browser compatibility (Are there any issues with specific units?)

Key Techniques by Category

Typography

body {
    font-size: 16px;              /* Base font size */
}

h1 {
    font-size: 2.5rem;            /* Scales with root */
    margin-bottom: 1.5rem;        /* Consistent spacing */
}

p {
    font-size: 1rem;              /* Default paragraph size */
    line-height: 1.5;             /* Unitless (relative to font size) */
    margin-bottom: 1em;           /* Relative to element's font size */
}

.responsive-text {
    font-size: calc(1rem + 1vw);  /* Responsive but with minimum size */
}

Layout & Containers

.container {
    width: 90%;                  /* Relative to parent */
    max-width: 1200px;           /* Maximum absolute width */
    margin: 0 auto;              /* Center horizontally */
}

.sidebar {
    width: 25%;                  /* Percentage of parent */
    padding: 1rem;               /* Consistent padding */
}

.main-content {
    width: 75%;                  /* Percentage of parent */
}

.full-screen {
    width: 100vw;                /* Full viewport width */
    height: 100vh;               /* Full viewport height */
}

Responsive Elements

.card {
    width: calc(33.333% - 2rem); /* Flexible with fixed margin */
    margin: 1rem;
    min-height: 10rem;           /* Minimum height */
}

.hero-image {
    height: 50vh;                /* Half viewport height */
    min-height: 300px;           /* Minimum height */
}

.video-container {
    width: 100%;                 /* Full width of parent */
    padding-bottom: 56.25%;      /* 16:9 aspect ratio */
    position: relative;
}

Comparison: CSS Units Side-by-Side

Common Challenges and Solutions

Challenge: Text Resizing Issues

Problem: Text is too small on mobile or doesn’t scale properly.

Solution:

/* Avoid fixed pixel sizes for text */
p {
    font-size: 16px;             /* BAD: fixed size */
}

p {
    font-size: 1rem;             /* BETTER: respects user preferences */
}

/* For responsive headlines */
h1 {
    font-size: calc(1.5rem + 2vw); /* BEST: scales with viewport but has minimum */
}

Challenge: Layout Breaking on Resize

Problem: Elements overflow or break layout when resizing.

Solution:

.container {
    width: 90%;                  /* Flexible width */
    max-width: 1200px;           /* With maximum */
}

.element {
    width: 100%;                 /* Full width */
    box-sizing: border-box;      /* Include padding in width */
    padding: 5%;                 /* Relative padding */
}

Challenge: Mobile Viewport Issues

Problem: 100vh creates overflow on mobile browsers.

Solution:

.full-height {
    height: 100vh;               /* Works on desktop */
    height: -webkit-fill-available; /* Better for mobile Safari */
    min-height: 600px;           /* Fallback minimum */
}

Challenge: Maintaining Aspect Ratios

Problem: Images or videos need to maintain aspect ratio.

Solution:

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;      /* 16:9 aspect ratio */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Best Practices and Practical Tips

General Guidelines

• Use relative units (rem, em, %) for most measurements to create scalable designs
• Combine units strategically (e.g., calc(1rem + 2vw)) for responsive but controlled sizing
• Set a base font size on the html/root element (commonly 16px or 62.5% for easy rem calculation)
• Use media queries to adjust values at different breakpoints
• Avoid mixing too many different units in the same component

For Accessibility

• Use rem for font sizes to respect user font size preferences
• Avoid fixed pixel heights on text containers
• Test with browser text zoom (up to 200%)

For Responsive Design

• Use % for layout widths combined with max-width constraints
• Use viewport units sparingly and with fallbacks
• Set reasonable min and max values when using flexible units

For Maintainability

• Be consistent with unit choices throughout your project
• Document your unit strategy for team projects
• Use CSS custom properties (variables) to store common values

Unit Conversion Guide

Code Snippets: Common Patterns

Responsive Typography System

:root {
    font-size: 16px;             /* Base size for rem calculations */
}

@media (max-width: 768px) {
    :root {
        font-size: 14px;         /* Smaller base on mobile */
    }
}

h1 { font-size: 2.5rem; }        /* 40px on desktop, 35px on mobile */
h2 { font-size: 2rem; }          /* 32px on desktop, 28px on mobile */
h3 { font-size: 1.75rem; }       /* 28px on desktop, 24.5px on mobile */
h4 { font-size: 1.5rem; }        /* 24px on desktop, 21px on mobile */

Flexible Grid System

.grid {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;               /* Compensate for item margins */
}

.grid-item {
    flex: 0 0 calc(33.333% - 2rem); /* One-third width minus margins */
    margin: 1rem;
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        flex: 0 0 calc(50% - 2rem); /* Half width on tablets */
    }
    
    @media (max-width: 480px) {
        flex: 0 0 100%;            /* Full width on mobile */
    }
}

Resources for Further Learning

• MDN Web Docs: CSS Values and Units
• CSS-Tricks: A Complete Guide to CSS Units
• Smashing Magazine: Understanding CSS Units
• W3C Specification: CSS Values and Units Module Level 4
• Can I Use: CSS Units
• CSS Tricks: Viewport Units

By understanding the unique properties and appropriate use cases for each CSS unit, you can create more responsive, accessible, and maintainable web designs that work beautifully across all devices and screen sizes.