In a design system shipped to web and native mobile, why are sizes specified in density-independent units rather than physical device pixels?

## Why hardware pixels cannot be the spec unit A screen is a grid of **physical pixels**, also called hardware or device pixels. The number packed into an inch differs by a factor of three or more between a budget tablet, a laptop and a flagship phone. If the design for a veterinary clinic booking app said the **Book visit** button is 48 pixels tall and meant hardware pixels, the button would be comfortable on a low-density tablet and a third of that height on a dense phone: too small to read and too small to tap. A spec whose meaning changes with the device is not a spec. A design system solves this by never talking in hardware pixels. It specifies every size in a **density-independent unit**, also called a **logical unit**, and lets each platform translate. ## The three terms - **Physical pixel**: one hardware dot. Its size depends entirely on the display. - **Density-independent (logical) unit**: the unit designers, tokens and code use. It is meant to look roughly the same size on every screen at that screen's normal viewing distance. - **Scale factor**: how many physical pixels one logical unit occupies along each axis on a given device. 1, 2 and 3 are common, and fractional values such as 1.5 or 2.75 exist too. ## How the mapping works at render time 1. The spec says the button is 48 units tall. 2. The platform reads the device's scale factor. 3. It draws 48 times the scale factor in physical pixels. 4. Vector shapes and text are rasterised at that resolution; bitmaps are picked from exports prepared for several densities, or scaled. | Scale factor | Physical pixels for a 48-unit button | What the user sees | |---|---|---| | 1 | 48 | the reference size | | 1.5 | 72 | same perceived size, sharper edges | | 2 | 96 | same perceived size, sharper still | | 3 | 144 | same perceived size, sharpest | The perceived size stays roughly constant; only sharpness improves with density. ## Absolute versus relative units "Absolute" and "relative" are easy to blur, so it helps to separate four families: | Family | Anchored to | Follows pixel density? | Follows the user's text setting? | |---|---|---|---| | Physical absolute (millimetres, print points) | real-world length | no | no | | Logical fixed unit | the reference unit | yes, via the scale factor | no | | Text-relative unit | the user's chosen text size | yes, via the scale factor | yes | | Space-relative unit | the container or the screen | follows available space | no | Physical absolute units are rarely used for screens because software seldom knows the true physical size of a display. Most of a design system's values are logical fixed units; type, and anything that holds text, is usually text-relative. ## What the standard says about the unit WCAG 2.2 expresses its sizes, for example the 24 by 24 minimum in Success Criterion 2.5.8 Target Size (Minimum) at Level AA, in its own reference pixel. Its glossary defines that pixel as **density-independent and distinct from hardware pixels**, set by a **visual angle of about 0.0213 degrees**, and taking into account the physical size of the display and the assumed viewing distance. The Understanding material for Reflow draws the consequence: because the unit is angular, the same value is physically smaller on a phone than on a desktop monitor, yet both cast about the same image on the retina at their usual distances. So density independence does **not** mean identical millimetres. It means a similar *perceived* size. Platforms also group devices into a handful of density buckets, so even two phones can differ slightly in physical size for the same value. Every platform has the same idea under its own name: the web's reference pixel (`px`), one native mobile platform's density-independent pixel (`dp`), and another's point (`pt`). ## Working this way in practice - Designers draw at 1x in logical units; a design editor's canvas is usually already measured in them. - Tokens store logical values only; a build step converts them for each platform. - Hand-off quotes logical units. Anyone measuring a screenshot divides by the capture device's scale factor first: a 144-pixel button captured on a 3x phone is a 48-unit button. - Icons and illustrations ship as vectors where possible; a photograph, such as a pet's profile picture, is requested at its displayed logical size times the scale factor. - Testing covers at least one low-density, one high-density and one fractional-density screen, because fractional scale factors expose rounding problems that whole ones hide.