What is a CSS pixel?
Definition A CSS pixel (px) is the unit of length used in CSS, defined as 1/96 of an inch (about 0.26 mm) and, on screens, scaled so it looks about as big as one pixel of a 96 dpi monitor at arm's length. It is not a physical dot: a phone with a device pixel ratio of 3 draws each CSS pixel with 3×3 device pixels. iOS calls the same unit a point and Android a density-independent pixel (dp), so 44 pt and 48 dp are 44 and 48 CSS px.
How to fix it: Text too small to read on mobile: the right font sizes for phones
How does a CSS pixel work?
The CSS specification ties px to the other absolute units: 1in = 96px, 1cm ≈ 37.8px and 1pt = 1/72 in, so 1pt = 1.333px. It also describes a reference pixel: the size one pixel of a 96 dpi screen appears at arm's length. Phones are held closer than a desktop monitor, so manufacturers choose a scale factor that makes one CSS pixel look about as big on a phone as on a laptop.
That scale factor is the device pixel ratio. The physical size of a CSS pixel still varies a little by device: on a typical phone it is roughly 0.15–0.19 mm, so 16 px text is about 2.5–3 mm tall.
Why it matters on mobile
Every number in your stylesheet, media query and accessibility guideline is in CSS pixels:
- a phone viewport of 390 px wide means 390 CSS px, not 390 device pixels;
- WCAG 2.2 asks for tap targets of at least 24×24 CSS px;
- WCAG 1.4.10 Reflow tests a page at 320 CSS px wide;
- a breakpoint at 768px applies to the CSS width, so it behaves the same on a Retina and a non-Retina iPad.
Example
body { font-size: 16px; } /* 16 CSS px: readable body text on phones */
.icon-button { width: 48px; height: 48px; } /* 48 CSS px = 48 dp on Android */
@media (min-width: 600px) { … } /* 600 CSS px, whatever the screen density */On an iPhone with a ratio of 3, the 48 px button covers 144×144 physical pixels. A 1 px border is still one CSS pixel, drawn 3 device pixels thick; for a hairline you can use 0.5px, which high-density screens draw as a thin line.
CSS pixels, rem and em
A rem is relative to the root font size (16px by default), so 1.5rem is 24 CSS px unless the visitor or the page changes that default. Text sized in rem grows with the browser's default font size setting, while text in px does not; page zoom scales both. The font size calculator converts between the two.
How MobileCheck checks it
All sizes in a MobileCheck report are CSS pixels measured in the page's layout: text under 12px is flagged as tiny, 12–14px as small for body text, an average under 15px as small overall, and tap targets under 24×24 px with neighbors nearby as too small.
Related terms
Guides and tools
- Text too small to read on mobile: the right font sizes for phones
- Mobile font size calculator
- Mobile viewport sizes