CSS Sizing & Spacing
Understanding CSS sizing and spacing helps designers communicate with developers and create more robust designs. This guide covers the practical knowledge designers need.
Last updated: August 2024
Why designers should understand CSS units
When designers understand how CSS works, they can:
- Specify designs that work across screen sizes
- Communicate intent more clearly in handoffs
- Troubleshoot layout issues more effectively
- Design systems that scale properly
You don't need to write CSS, but knowing how it thinks helps you design for it.
CSS length units explained
For comprehensive technical details on CSS length units, see the MDN documentation on CSS values and units.
Absolute units
Pixels (px): Fixed-size units. 1px is roughly 1/96th of an inch on most screens, though high-DPI displays complicate this. Pixels don't scale with user preferences.
Points (pt): Primarily for print. 1pt = 1/72 of an inch. Rarely used for screen design.
When to use absolute units: When you need exact control regardless of context—borders, shadows, minimum sizes.
Relative units
Em (em): Relative to the current element's font size. If font-size is 16px, 1em = 16px. Useful for sizing that should scale with text.
Rem (rem): Relative to the root element's font size (usually 16px by default). More predictable than em because it doesn't compound.
Percentage (%): Relative to the parent element. 50% width means half the parent's width.
Viewport units (vw, vh): Relative to the viewport. 100vw = full viewport width. 100vh = full viewport height.
Using rem for font sizes allows users who've changed their browser's default font size to see appropriately scaled text. Fixed pixel sizes ignore this preference.
Which unit when?
| Use case | Recommended unit |
|---|---|
| Font sizes | rem |
| Spacing around text | em or rem |
| Component dimensions | rem or px |
| Borders, shadows | px |
| Full-screen layouts | vw, vh, % |
| Container widths | %, max-width in rem or px |
Building a spacing system
Consistent spacing makes designs feel cohesive. Spacing systems provide predictable, reusable values.
The 8-point grid
A common approach: base all spacing on multiples of 8px.
4px - tight spacing (half step)
8px - extra small
16px - small
24px - medium
32px - large
48px - extra large
64px - huge
Why 8? It's divisible by 2 and 4, making half-steps possible. It aligns well with common screen sizes. And it's easy to remember.
Applying spacing systematically
Component internal spacing: The padding inside cards, buttons, form fields.
Component external spacing: The margins between components.
Layout spacing: The gaps between sections, columns, and major page areas.
Using consistent values across all three creates visual harmony without requiring exact matching.
Spacing tokens
In design systems, name your spacing values:
space-1: 4px
space-2: 8px
space-3: 16px
space-4: 24px
space-5: 32px
space-6: 48px
space-7: 64px
This abstraction makes the system easier to use and adjust. If you decide 8px is too tight, you change one value, not hundreds.
Responsive considerations
Fluid vs. fixed
Fixed widths work at specific sizes. Good for components that shouldn't stretch.
Fluid widths (percentages, viewport units) adapt to available space. Good for containers and layouts.
Most designs combine both: fluid containers with fixed or constrained components inside.
Breakpoints
Breakpoints define where your layout changes. Common breakpoints:
Mobile: up to 639px
Tablet: 640px – 1023px
Desktop: 1024px – 1279px
Large desktop: 1280px+
These are guidelines, not rules. Base breakpoints on where your content needs to change, not arbitrary device categories.
Mobile-first design
Start with the mobile layout, then add complexity for larger screens. This approach tends to produce cleaner, more focused designs.
In CSS terms, write base styles for mobile, then use min-width media queries to add desktop styles.
Typography sizing
Type scale
Like spacing, typography benefits from a systematic scale:
xs: 12px (0.75rem)
sm: 14px (0.875rem)
base: 16px (1rem)
lg: 18px (1.125rem)
xl: 20px (1.25rem)
2xl: 24px (1.5rem)
3xl: 30px (1.875rem)
4xl: 36px (2.25rem)
Scales based on ratios (major third, perfect fourth) create harmonious relationships.
Line height
Line height affects readability:
- Body text: 1.5 to 1.7 times the font size
- Headings: 1.1 to 1.3 times the font size
- Tight settings for buttons/labels: 1.2 to 1.4
Smaller text needs more line height proportionally. Large headings can be tighter.
Measure (line length)
Optimal line length for body text: 45-75 characters. Longer lines are harder to track from line to line. Shorter lines create too many line breaks.
Set max-width on text containers to control measure:
max-width: 65ch; /* approximately 65 characters */
Common sizing mistakes
Fixed heights on text containers
Setting fixed heights on elements containing text breaks when text wraps or when users increase font size. Use min-height if you need a minimum, and let the container grow.
Pixel font sizes
Users who've set larger default fonts in their browser have that preference ignored when you use pixel font sizes. Use rem for accessibility.
Viewport unit typography
Setting font sizes in vw seems clever (scales with screen!) but produces unreadable text at extremes. If you use vw, combine it with clamp() to set minimum and maximum values.
Inconsistent spacing
Using arbitrary values (17px here, 23px there) creates visual noise. Stick to your spacing system even when something "looks right" at a different value.
Forgetting touch targets
Minimum touch target size is 44×44 pixels (48×48 recommended). Small tap targets frustrate users and create accessibility barriers.
Working with developers
Specifying designs
When handing off designs:
- Use consistent spacing values from your system
- Specify font sizes in rem (or note the pixel equivalent)
- Call out responsive behavior explicitly
- Note which dimensions are fixed vs. fluid
Design tokens
If your team uses design tokens, these become the shared language. Designers specify space-4 and developers apply the corresponding value without manual translation.
Inspecting implementations
When reviewing implementations:
- Check that spacing matches the system
- Verify text scales with browser font settings
- Test at various viewport widths
- Confirm touch targets are adequate
It depends on your tools and workflow. Many designers work at 1x and export at 2x/3x for high-DPI screens. What matters is consistent sizing—a 16px font should be specified as 16px regardless of your canvas zoom.
Define spacing for each breakpoint in your system. For example, section padding might be 16px on mobile and 48px on desktop. Document these variations so they're applied consistently.
Padding is inside the element (between content and border). Margin is outside (space between this element and neighbors). Padding affects background color area; margin doesn't.
Usually because of fixed dimensions that can't accommodate enlarged text, or media queries based on pixels rather than ems. Test at 200% zoom to catch these issues.
Both. Grid is best for two-dimensional layouts (rows and columns). Flexbox is best for one-dimensional layouts (a row or a column). They work well together.