CSS Units Reference Guide

Name: SCOUTb2
Author: bee2.io LLC

Complete reference for all CSS units (px, em, rem, vw, vh, %, pt, and more). Includes type, description, best use cases, and interactive converter.

100% client-side - your data never leaves your browser.

Absolute Units

Unit	Description	Example	When to use
px	Pixels. 1px = 1/96th of an inch on screen. Most common absolute unit.	font-size: 16px	Borders, shadows, precise fixed sizes. Avoid for font sizes and layout (prefer rem).
pt	Points. 1pt = 1/72nd of an inch. Common in print.	font-size: 12pt	Print stylesheets only. Avoid on screen.
cm	Centimeters. 1cm = ~37.8px.	margin: 1cm	Print layouts.
mm	Millimeters. 1mm = ~3.78px.	border: 1mm solid	Print layouts.
in	Inches. 1in = 96px on screen.	width: 8.5in	Print page sizes (letter, A4).
pc	Picas. 1pc = 12pt = 1/6th inch.	margin: 1pc	Traditional typographic unit. Rarely used.

Unit	Description	Example	When to use
em	Relative to the font-size of the element (or parent if used in font-size). Compounds with nesting.	padding: 1.5em	Spacing proportional to the element font size (padding, margin on components). Beware nesting.
rem	Relative to the root (<html>) font-size. Does not compound. Default root = 16px.	font-size: 1.25rem	Font sizes, spacing. Preferred over em for consistency across components.
ex	Relative to x-height (lowercase letter height) of the current font.	line-height: 2ex	Fine typographic adjustments. Rarely used.
ch	Relative to the width of the "0" glyph in the current font.	max-width: 60ch	Optimal line length for readability (50-75ch is ideal for body text).
lh	Relative to the line-height of the element.	margin-top: 1lh	Spacing that aligns with the text rhythm.

Unit	Description	Example	When to use
vw	1% of the viewport width.	width: 50vw	Full-width sections, responsive typography. Beware horizontal scrollbar affecting vw.
vh	1% of the viewport height.	height: 100vh	Full-screen sections. Can be unreliable on mobile (address bar).
vmin	1% of the smaller viewport dimension (width or height).	font-size: 5vmin	Elements that must fit in both orientations.
vmax	1% of the larger viewport dimension.	width: 50vmax	Rarely used. Square elements that scale with viewport.
svw	Small viewport width - excludes mobile browser UI.	width: 100svw	Mobile layouts where the address bar changes height.
svh	Small viewport height - excludes mobile browser UI (address bar shown).	min-height: 100svh	Safe full-height on mobile with browser chrome visible.
dvw	Dynamic viewport width - updates as browser UI shows/hides.	width: 100dvw	When you need the exact current viewport with live browser chrome changes.
dvh	Dynamic viewport height - updates as browser UI changes.	height: 100dvh	Most accurate full-height on mobile. May cause layout shifts when scrolling.
lvw	Large viewport width - assumes browser UI is hidden.	max-width: 100lvw	When designing for the maximum possible viewport.
lvh	Large viewport height - assumes browser UI is hidden.	height: 100lvh	Maximum possible height (browser chrome hidden).

Unit	Description	Example	When to use
cqw	1% of the query container width. Requires container-type on ancestor.	font-size: 5cqw	Component-level responsive design. Scales with container, not viewport.
cqh	1% of the query container height.	height: 50cqh	Container height-relative sizing. Container must have a defined height.
cqi	1% of the container inline size (usually width).	padding: 2cqi	Writing-mode agnostic container width.
cqb	1% of the container block size (usually height).	margin: 1cqb	Writing-mode agnostic container height.

Unit	Description	Example	When to use
fr	Fraction of remaining free space in a grid container. Only valid in grid-template-* and grid contexts.	grid-template-columns: 1fr 2fr 1fr	CSS Grid column and row sizing. Distributes leftover space proportionally.
%	Percentage of the parent element dimension (width, font-size, etc). Context-sensitive.	width: 50%	Fluid layouts. Relative to parent dimension. Use carefully (behavior differs per property).

SCOUTb2 runs 25+ accessibility, performance, SEO, and security checks on any page automatically.