OneTaskBy Tim King · Updated
CSS Units Cheat Sheet
Font, Viewport, Container, Grid, Angle and Time Units, Printable or Downloadable
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Units Cheat Sheet works
This CSS units cheat sheet lists every unit you can write in a stylesheet — absolute lengths, font-relative units, the new small, large and dynamic viewport units, container query units, fr, angles, times and resolutions — with what each is relative to and a typical use. Search for a unit or a job and convert values with the tools linked below.
Choosing from the CSS units cheat sheet
Use rem for font sizes and most spacing, because it follows the user's browser font setting and scales the whole layout together. Use em when something should grow with the text of its own component, such as padding on a button. Keep px for borders, hairlines and shadows that should stay crisp, and ch to cap line length for readable text.
Viewport units on phones
The classic vh unit caused jumpy layouts on mobile, because the browser toolbar grows and shrinks as you scroll. CSS now has three versions: svh assumes the toolbar is showing, lvh assumes it is hidden, and dvh follows it as it moves. svh is the safe choice for a full-height hero; dvh can cause reflow while scrolling.
Container query units
Units such as cqi and cqw measure the nearest element with container-type set, instead of the viewport. They let a card size its heading to the column it sits in, so the same component works in a sidebar and a wide main area. Combined with clamp(), they give fluid type without media queries.
FAQ
What is the difference between rem and em?
rem is always relative to the root element's font size, usually 16px, so 1.5rem is the same everywhere on the page. em is relative to the current element's font size, so it compounds when nested: 1.5em inside 1.5em is 2.25 times the root size. That compounding is useful for components and confusing for page-wide spacing.
Is 1px always one screen pixel?
No. A CSS pixel is a reference unit of 1/96 inch at arm's length, and high-density screens draw one CSS pixel with two, three or more device pixels. The dppx resolution unit in media queries tells you the ratio, which is how sites serve sharper images to high-density screens.
Can I print or reuse this CSS units table?
Yes. Print the page as a desk reference, or download the CSV or JSON for your design system docs. The table is written by OneTask and released under CC0, so there is nothing to license and no credit required.
See also: all Tech Data tools, Everyday Data.
Related tools
PX To REM Converter
Batch convert pixels to rem and back.
CSS Clamp() Calculator
Fluid font sizes with clamp(), no breakpoints needed.
Line Clamp Helper
Truncate text after a set number of lines with an ellipsis.
Tailwind To CSS
Turn Tailwind utility classes into plain CSS declarations.
ASCII Table
All 128 ASCII codes in decimal, hex, octal and binary.