Quick units map
What to use and when to avoid rigid designs.
Absolute units like px are predictable, but do not scale well on screens and user preferences.
Relative units (rem, em, %, vw, vh, fr) adapt to context and make the design breathe better.
- px: useful for borders and shadows, avoid in typography.
- rem: global scale, ideal base for text.
- em: local scale, perfect for components.
- %: depends on container, useful for widths and paddings.
- vw/vh: relative to viewport, useful for hero and layouts.
- fr: Grid unit representing a fraction of available space.
- ch: useful for inputs and monospace.
- min()/max()/clamp(): limits and fluid sizes.
