Cross-device size specs must be converted on a visual-angle basis
Aliases: design token · responsive sizing · cross-device consistency
What it is
Treat visual-angle conversion as a hard rule: a physical-size standard (font size, icon size, touch target, minimum line thickness) validated on one device at one typical viewing distance must not be carried over as the same physical number to a different device with a different typical viewing distance — the visual angle has to be held constant first, and the new physical size solved for at the new distance.
This isn't "try to stay roughly consistent" — it's a determination rule: whenever a size spec's justification rests on a perceptual basis (can users see it, is it comfortable to see), the physical number must be recomputed for a different device rather than treated as a constant that can simply be copy-pasted.
Why it happens
What actually determines the perceptual effect is visual angle, not the physical number — the physical number is merely a byproduct of the visual-angle conversion at whatever viewing distance was assumed when the spec was set. Carrying that physical number over to a device with a different typical viewing distance silently changes the actual visual angle, and typical viewing distances across device categories often differ by more than an order of magnitude. This is exactly why reusing "the same design values" (identical pixel or point numbers) between a phone and a large in-vehicle display produces wildly different real-world legibility, even though the numbers on paper are identical — the number didn't change, but the visual angle it corresponds to did.
Where it stops holding
- This rule applies only to size targets with a perceptual or comfort basis (legibility, glanceability, comfortable touch) — a value chosen purely for aesthetic reasons or layout density has no "correct" visual angle to preserve, so this conversion rule shouldn't be mechanically applied to every design value.
- The conversion depends on a known typical viewing distance, and real users' viewing distance varies by individual and posture — the converted value is only as accurate as the assumed distance, and should carry a safety margin rather than being treated as a precise optimum.
- Holding visual angle constant preserves equivalence only at the level of visual visibility — it doesn't automatically make other properties equivalent. Touch-interaction precision also depends on finger size and motor control, not visual angle alone, so a minimum touch-target size shouldn't be derived from visual-angle conversion alone, even though its visibility should be.
Applying it
- Whenever a design-system token is responsible for guaranteeing legibility, visibility, or comfort (minimum font size, icon size, stroke width), record the viewing distance it assumes alongside the physical value; when porting the design system to a new device category, recompute the physical value from the same target visual angle and the new device's typical distance, rather than reusing the old value.
- Treat "a design value carried over unchanged to a very different device category" as a likely error to investigate: an icon size copied directly from a phone to a TV app almost certainly means the actual visual angle has drifted well away from the original design intent.
- Verification: compute the actual visual angle the converted value produces on the new device at the new distance, and confirm it falls within the original design's target range — rather than eyeballing whether it "looks fine" on the new device.
Related
- Same group: A1.16.1 Visual angle unifies physical size and viewing distance into one quantity · A1.16.3 Typical viewing-distance differences across phone, desktop, TV, and in-vehicle displays
- Nearby: A1.03.2 Font size only means something when specified jointly with viewing distance · A1.03.3 The same pixel size discriminates differently across devices and distances
- Search terms:
cross-device size conversion·design token·responsive sizing