Reference
Pixels, ems & web measurements
px, em, rem, vh, vw, pt — the units used in web design explained in plain English.
referencebeginnerglossarydesign
Web designers and developers use a variety of units to measure size, spacing, and layout. You don't need to use these yourself, but knowing what they mean helps you understand feedback, proposals, and style settings.
Quick summary
The most common web measurement units are: px (pixels — a fixed size), em and rem (relative to font size — scale with the design), % (relative to a parent element), vh/vw (relative to the browser window). Relative units (em, rem, %) are generally preferred for accessible, flexible designs.
Screen & layout units
| Unit | Name | What it means | Example use |
|---|---|---|---|
| px | Pixel | A fixed-size unit. 1px is one screen pixel at standard resolution. On high-DPI screens, 1px may cover multiple physical pixels. | font-size: 16px, border: 1px solid |
| % | Percent | Relative to the parent element's size. A column that is 50% wide fills half its container. | width: 100%, margin: 5% |
| vw | Viewport width | 1vw = 1% of the browser window's width. 100vw = the full window width. | Full-width hero sections |
| vh | Viewport height | 1vh = 1% of the browser window's height. 100vh = the full visible window height. | Full-screen sections |
| vmin | Viewport minimum | 1vmin = 1% of the smaller of vw or vh. Useful for elements that should fit in any orientation. | Fluid squares |
| vmax | Viewport maximum | 1vmax = 1% of the larger of vw or vh. | Less common |
| dvh | Dynamic viewport height | Like vh, but accounts for mobile browser chrome (address bar) appearing and disappearing. More reliable on mobile. | Mobile full-screen layouts |
Typography units
| Unit | Name | What it means | Example use |
|---|---|---|---|
| em | Em | Relative to the current element's font size. If the font size is 16px, then 1em = 16px, 2em = 32px. Can compound (nested elements multiply). | padding: 1em, margin: 0.5em |
| rem | Root em | Relative to the root (html) element's font size — typically 16px by default. Unlike em, it doesn't compound. More predictable. | font-size: 1.25rem, gap: 2rem |
| pt | Point | A print unit. 1pt = 1/72 of an inch. Used in email design and print stylesheets; avoid in web layouts. | Email templates |
| ch | Character | The width of the "0" character in the current font. Useful for limiting line length. | max-width: 65ch (ideal reading width) |
| ex | Ex-height | The height of the lowercase "x" in the current font. Rarely used in practice. | Advanced typography |
| lh | Line height | Equal to the element's line-height value. Very new; limited support currently. | Vertical rhythm |
Image & screen resolution units
| Term | What it means |
|---|---|
| PPI (pixels per inch) | How many pixels fit in one inch of screen. Higher PPI = sharper display. iPhones and modern laptops have high PPI screens. |
| DPI (dots per inch) | The print equivalent of PPI. 72dpi was the traditional web standard; print needs 300dpi+. Not directly relevant to web but often confused. |
| Retina / HiDPI | Apple's marketing term for high-resolution screens. Typically 2x or 3x the standard pixel density. Images need to be provided at larger sizes to look sharp. |
| 1x / 2x / 3x images | The same image at different resolutions for different screen densities. A 1x image is 100×100px; a 2x version is 200×200px but displayed at the same visual size. |
Layout & spacing concepts
| Term | What it means |
|---|---|
| Margin | Space outside an element — between it and neighboring elements. |
| Padding | Space inside an element — between the content and the element's border. |
| Gap | Space between items in a grid or flex layout. |
| Border | The line drawn around an element. Can have width (in px), style (solid, dashed), and color. |
| Max-width | The maximum width an element will grow to. Common for content areas: max-width: 1200px keeps wide-screen layouts from stretching too far. |
| Min-width / min-height | The minimum size an element will shrink to before the layout breaks or scrolls. |
| Breakpoint | A screen width at which a responsive layout changes. E.g. at 768px, a two-column layout might stack into one column for mobile. |
Color measurement
| Format | Example | What it is |
|---|---|---|
| HEX | #3B82F6 | Six-character hexadecimal color code. The most common color format in web design. |
| RGB | rgb(59, 130, 246) | Red, Green, Blue values from 0–255. |
| RGBA | rgba(59, 130, 246, 0.5) | RGB plus an opacity (alpha) value from 0 (transparent) to 1 (opaque). |
| HSL | hsl(217, 91%, 60%) | Hue (0–360°), Saturation (%), Lightness (%). More intuitive for designers to adjust. |
| oklch / lch | oklch(0.6 0.18 250) | Modern color format with better perceptual uniformity. Increasingly used in advanced design systems. |
Common questions
Related guides
Need a hand?
If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.