Details
For a full version of this blog, please read "The Measure of All Things: A Definitive Guide to Design and Development Units" >>
Absolute Units: The Anchors
These units are fixed and do not change based on any other element or setting. They provide a stable, predictable measure, but this is both their greatest strength and their biggest weakness in a responsive world.
px (Pixels)
The most common unit in digital design. A 'CSS pixel' is an abstract unit, not to be confused with a 'hardware pixel' (the physical dot on your screen). On a high-resolution (HiDPI or Retina) display, one CSS pixel might be represented by a 2x2 or 3x3 grid of hardware pixels. This abstraction allows designs to look sharp on all screens.
Use When: You need fine-grained, pixel-perfect control that should *not* scale, such as for borders, dividers, or shadows (`border: 1px solid...`). Limitation: Using `px` for text sizing is an accessibility issue, as it doesn't respect a user's browser-level font size preferences.pt (Points)
A holdover from print typography. One point is physically 1/72nd of an inch. While dominant in print, branding guidelines, and PDF generation, its use in screen design is more nuanced. Apple's Human Interface Guidelines (HIG) use 'points' to abstract away resolution entirely. An iPhone 13's screen is 390 'points' wide, even though it's 1170 'hardware pixels' wide (a @3x scale).
Use When: Designing for print, or when working within an ecosystem like Apple's where 'points' are the standard abstraction layer. Limitation: Its physical-world definition makes it unpredictable for cross-platform web design.Relative Units: The Chameleons
These units get their value from somewhere else—the parent element, the root element, or the viewport. They are the key to building scalable, accessible, and responsive designs that adapt to user preferences and device differences.
Interactive Font Scaler
This demo shows how units react to a user changing their browser's base font size. `rem` scales predictably. `em` scales based on its parent, which can compound. `px` doesn't scale at all.
This text is 1rem. It scales directly with the root font size.
This text is 16px. It does not scale, ignoring user preferences.
This text is 1em. It inherits its parent's size (1.2× root).
This nested text is also 1em, but it *compounds*, becoming 1.2 × 1.2 = 1.44× the root size.
rem (Root em)
The most reliable relative unit. `1rem` is equal to the font size of the root (``) element. By default, this is `16px` in most browsers. If a user sets their browser default to `20px` for better readability, `1rem` becomes `20px`. Sizing all components, padding, and margins in `rem` makes your entire interface scale proportionately and accessibly.
em
This unit is relative to the `font-size` of its *direct parent element*. `1em` is equal to the parent's current font size. As seen in the demo, this is powerful but can lead to "compounding" where nested `em` values multiply, making sizes hard to predict. It's best used when you specifically want an element (like an icon) to scale relative to the text right next to it.
% (Percentage)
This unit is relative to a property of its parent. For `width`, `100%` is the full width of the parent's content area. For `font-size`, `100%` is the same as `1em`. It's highly contextual. It's excellent for layout (e.g., a child `div` taking up `50%` of its parent) but can be ambiguous for spacing or typography compared to `rem`.
Viewport & Text Units
A special class of relative units. Viewport units are relative to the browser window, while text units are relative to the font's own metrics.
vh / vw
Viewport Height (`vh`) and Viewport Width (`vw`). `1vh` is 1% of the viewport's height, and `1vw` is 1% of its width. These are fantastic for creating "hero" sections that fill the entire screen (`height: 100vh`).
Limitation: On mobile, `100vh` can be problematic, as it may not account for the browser's dynamic UI (the address bar and bottom bar that appear/disappear on scroll), causing content to be hidden. Demo: The blue box on the right is set to `50vw` and `50vh`. Resize your browser window to see it change instantly.50vw / 50vh
ch / ex
These are typography-specific units. `1ch` is the width of the "0" (zero) character in the current font. `1ex` is the x-height, or the height of a lowercase "x".
Unit in Design Systems
Major design systems standardize on specific units to enforce consistency, scalability, and platform alignment. Their philosophies reveal their core priorities.
Material Design: `dp` (Density-independent Pixels)
Google's Material Design, built for the diverse Android ecosystem, uses `dp` (or `dip`). A `dp` is an abstraction equal to one physical pixel on a 160 dpi screen. On a 320 dpi screen, `1dp` is `2px`. This philosophy abstracts away screen density, ensuring that a `48dp` button is a consistent *physical* size for tapping, regardless of the device's resolution. It prioritizes predictable physical interaction and scale.
Apple HIG: `pt` (Points)
Apple's 'points' serve the same purpose as `dp`: they abstract resolution. On a @1x screen, `1pt` = `1px`. On a @2x (Retina) screen, `1pt` = `2px`. On a @3x screen, `1pt` = `3px`. This allows designers to work on a logical canvas (e.g., 390x844 pt for an iPhone 13) and let the system handle scaling assets for different hardware. The philosophy is about a seamless, high-fidelity experience within a controlled ecosystem.
Web Systems (Bootstrap, Tailwind, Carbon): `rem`
Modern web-first design systems like Tailwind, Bootstrap, and IBM's Carbon heavily favor `rem`. Their philosophy is rooted in the web's intrinsic flexibility and commitment to accessibility. By basing all spacing, typography, and component sizing on the root font size, they ensure the entire UI scales perfectly with user preferences. This prioritizes user-centric design, adaptability, and maintainability over fixed physical dimensions.
Perspectives by Role
Different professionals prioritize different units based on their unique goals, whether it's accessibility, pixel-perfection, or code maintainability.
The UX Designer
The UX Designer champions accessibility and readability. They advocate for `rem` to ensure the design respects user font size settings. They are also heavy users of `ch` to enforce optimal line lengths, ensuring that long-form content is comfortable to read. Their focus is on a user-centric, adaptive, and inclusive experience.
The UI Designer
The UI Designer balances visual precision with scalability. They often think in `px` or `pt` at the design tool level (e.g., in Figma) to create pixel-perfect mockups and maintain brand consistency. However, they must understand how these `px` values will be *translated* by developers into `rem` for the final product, creating a "spec" that is both precise and flexible.
The Front-End Developer
The Developer is the implementer who prizes scalability and maintainability. They almost exclusively use `rem` for all spacing, padding, margins, and typography, creating a system that can be globally re-scaled by changing a single value. They use `%` and `vw` for layout, and `px` only for tiny, non-scaling details like borders. Their goal is a clean, robust, and responsive codebase.
Important
Hover to reveal text (if you're on desktop) - click on smartphone to expand text
Notes
Recommendations
These are recommendations for writings outside of this blog and website.
The Personalized Education Investment Prospectus: A Quantitative Framework for Determining College Worth
A framework to help you determine if college is your path considering factors such as finances, emotional state and other factors
Explore Framework >>Ads as security threats and safest browsers for vulnerable users
The USA government has classified (some) online advertising methods as a cybersecurity threat - Here, you'll see some tips and recommendations on what to do next to protect yourself.
See more on cybersecurity >>