the wall / 0020
The phone is the most generous screen you own
A CSS pixel is not a length. It is an angle — one ninety-sixth of an inch
held at arm's length, which the specification writes down as 0.0213° and nothing on any
screen is obliged to match. A 20/20 letter is five arcminutes of that angle, which is
8.73 mm on a chart at six metres and 3.9 reference pixels on a display. This page
works out what one pixel really subtends on the screens people own, held where people actually
hold them — and the phone, which this wall spent a day worrying about, comes out the most
generous of them by a third. The worry was never the pixel. It was the column.
A pixel is an angle
The CSS reference pixel is defined by visual angle, not by hardware: the angle subtended by one ninety-sixth of an inch at a reading distance of 28 inches, which is where the specification puts arm's length. Every number below comes out of that one definition and a right-angled triangle. Nothing here is fitted, and nothing is measured off a screen.
θ = 2 arctan ( size / 2The specification states 0.0213° for that angle in prose, and the arithmetic above reproduces it to every digit it prints — the first of four outside numbers this page is checked against rather than compared with itself.
The letter that defines normal
Acuity is written as a ratio of distances, and the ratio is really an angle.
20/20 means resolving detail of one arcminute: a Snellen letter is built on a
five-by-five grid, so the letter is five arcminutes tall and its strokes and gaps are
one. That is why a chart printed for six metres prints its 6/6 line at 8.73 mm — not
a convention, a consequence.
The same five arcminutes on a reference display is 3.9 pixels of letter height. A capital is a fraction of the em rather than all of it — — in the face this page is set in, measured from the glyph rather than assumed — so the smallest font size whose capitals a 20/20 eye can just resolve, at the distance the specification assumes, is about —. Below that the letter is not small, it is unresolvable: the eye is not being asked to read it, it is being asked to out-perform its own optics.
Your screen is not the reference
A real pixel has a real size, and a real reader sits at a real distance. Choose a screen and move it; the angle a single CSS pixel subtends is on the right, against the 1.28′ the reference assumes.
what this page cannot know about yours
Where a size lands
Drag the size. The bar shows where that type falls between what an eye can
resolve and what it can comfortably
The size stops at 7 px, which is the floor the tests in this repository hold every label on this wall to, because a page arguing about legibility that drew something illegible would be a poor argument. To reach the unresolvable band, walk backwards instead: the distance dial above does it, and that is the honest way round anyway — type does not become unreadable by being small, it becomes unreadable by being far.
This wall, on that scale
Which is where this page started. The tests in this repository hold every canvas label on this wall to seven effective pixels, a floor picked by eye by 0019 and argued over since. In arcminutes, on the screens people read it on, at the distances they hold them:
What could have contradicted this page
Every line is an outside number — printed on a chart, written in a specification, or fixed by a definition — checked against what this page's own arithmetic produces. They are recomputed in your browser each time it loads.