Pixels, ems & web measurements
px, em, rem, vh, vw, pt: the units used in web design explained in plain English.
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.
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. On phones, 100vh matches the window at its largest, so with the address bar showing, some content can end up hidden. That's the problem dvh solves. | 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 (keeps lines short and easy to read) |
| 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 computed line-height. Supported in all current major browsers (Chrome and Edge 109+, Safari 16.4+, Firefox 120+). | 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. It matters when something is printed; on screen what counts is an image's pixel dimensions, not its DPI setting. Often confused with PPI. |
| 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 | A hexadecimal color code, and the most common color format in web design. Six characters is the usual form; three-, four- and eight-character versions are also valid, the longer two adding an opacity value. |
| RGB | rgb(59, 130, 246) | Red, Green, Blue values from 0 to 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 to 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
When should I use px vs. rem?
Use rem for font sizes and most spacing. It respects the user's browser accessibility settings (if they've increased their default font size, rem units scale with it). Use px for small, precise values like borders where scaling isn't desirable.
What does 'responsive' mean for measurements?
A responsive design uses relative units (%, em, rem, vw) so elements scale proportionally as the screen size changes, rather than staying a fixed pixel size. This is why your site looks good on both a phone and a wide monitor.
Why do images sometimes look blurry on retina screens?
Because the image file isn't large enough. A 100×100px image displayed on a retina screen needs a 200×200px file (2x) to look sharp. WordPress and modern image tools handle this automatically when you upload properly sized images.
Related guides
Was this page helpful?
Go deeper on chykalophia.com
Done for you
Rather not do this yourself?
This is everyday work for our team. Book a free discovery call and we'll tell you honestly whether it's worth paying someone for.
Already a client? Email support@chykalophia.com.
Last updated