[csswg-drafts] Proposal: Add a visual-degree (vd) unit for perceptual sizing in CSS (#14378)

WaylonShaoinChina has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: Add a visual-degree (vd) unit for perceptual sizing in CSS ==
Title
Proposal: Add a visual-degree (vd) unit for perceptual sizing in CSS
Proposed by: Waylon Shao, China, 2026-08-24, E-mail: waylon_shao@163.com 
________________________________________
Summary
CSS provides units for CSS lengths (px, em, rem), physical/reference lengths (mm, in), and viewport-relative lengths (vw, vh).
However, CSS currently lacks a unit that directly expresses perceptual visual size.
I propose introducing a new unit:
vd
where:
1vd = 1 degree of visual angle
For example:
body {
    font-size: 0.6vd;
}
would indicate that the intended typographic height is approximately 0.6 degrees of visual angle under the applicable viewing model.
The goal is not to replace px or existing CSS units, but to provide a new abstraction specifically for perceptual sizing.
________________________________________
Motivation
The same physical text size does not produce the same perceived size on different display environments.
For example, consider:
• a 15.6-inch laptop viewed at approximately 50 cm; 
• a 32-inch desktop display viewed at approximately 70 cm; 
• a 64-inch television viewed at approximately 2 m. 
Suppose a glyph is physically 5 mm high.
At a viewing distance of 50 cm, its visual angle is approximately:
5 mm / 500 mm ≈ 0.01 rad ≈ 0.57°
At a viewing distance of 2 m:
5 mm / 2000 mm ≈ 0.0025 rad ≈ 0.14°
Therefore, the same physical font height can appear dramatically smaller on a large display viewed from farther away.
To maintain approximately the same visual angle, the physical size of the text should increase as the viewing distance increases.
For example, maintaining approximately 0.57° would require roughly:
50 cm viewing distance → 5 mm text
200 cm viewing distance → 20 mm text
This is fundamentally different from maintaining the same CSS pixel size or the same physical millimeter size.
________________________________________
The Missing Abstraction
Current CSS units primarily describe one of the following:
px       CSS coordinate size
mm       physical/reference length
em/rem   document-relative size
vw/vh    viewport-relative size
A visual-degree unit would describe:
vd       intended perceptual visual size
In other words:
px  → "How large is it in the CSS coordinate system?"

vd  → "How large is it intended to appear to the viewer?"
These are different design objectives.
________________________________________
Proposed Syntax
The basic syntax would be:
font-size: 0.6vd;
with the conceptual definition:
1vd = 1 degree of visual angle
Examples:
body {
    font-size: 0.55vd;
}

h1 {
    font-size: 1.2vd;
}

small {
    font-size: 0.4vd;
}
The exact mapping from vd to a used CSS length would be defined by the specification.
________________________________________
Mathematical Model
For an object of physical height h, viewed from distance d, its visual angle is:
θ=2arctan(2dh) 
Therefore, for a desired visual angle:
h=2dtan(2θ) 
For small angles, this can be approximated by:
h≈dtan(θ) 
Thus, a visual-degree unit naturally allows the physical size of text to increase with viewing distance while maintaining approximately the same angular size.
________________________________________
Reference Viewing Model
The proposal does not necessarily require eye tracking.
A user agent could initially use a standardized reference viewing model.
Possible approaches include:
1. Fixed reference distance
For example:
reference viewing distance = 50 cm
2. Device-class reference distance
The user agent could use empirical reference distances for different device classes, for example:
smartphone       ≈ 36 cm
laptop           ≈ 50 cm
desktop display  ≈ 60–80 cm
television       ≈ 2 m
These values are illustrative and would require empirical investigation.
3. Future platform information
Future platforms may provide additional information about:
• display physical dimensions; 
• display density; 
• expected viewing distance; 
• user preferences; 
• accessibility settings; 
• headset/VR viewing geometry. 
The specification could allow such information to improve the conversion while retaining a standardized fallback.
________________________________________
Why Not Just Use px, mm, vw, or vh?
px
A fixed CSS pixel size does not maintain a consistent visual angle when viewing distance changes.
mm
A fixed physical size does not maintain a consistent visual angle when viewing distance changes.
vw
Viewport width is not a reliable proxy for viewing distance.
vh
Viewport height can be a useful approximation in some situations, but it still describes the viewport rather than perceptual size.
For example, 2vh may work reasonably well across some laptop and smartphone layouts, but it does not provide a direct statement about the intended visual angle.
A dedicated perceptual unit would make the design intention explicit.
________________________________________
Typography Consideration
One important specification question is what exactly the visual angle should measure.
CSS font-size does not necessarily equal the visible height of glyphs.
Different fonts can have different:
• cap heights; 
• x-heights; 
• ascender/descender proportions; 
• glyph bounding boxes. 
Therefore, the specification should investigate whether vd should correspond to:
1. the font em square; 
2. cap height; 
3. x-height; 
4. line box height; 
5. actual rendered glyph height. 
For a unit intended specifically for human visual perception, cap height or another visible glyph metric may be more meaningful than the abstract font-size value.
________________________________________
Use Cases
1. Laptop vs. large television
The same CSS:
body {
    font-size: 0.55vd;
}
could theoretically produce physically larger text on a television than on a laptop while maintaining approximately the same intended visual angle.
________________________________________
2. Large displays
Large displays in:
• conference rooms; 
• classrooms; 
• control rooms; 
• public information systems; 
are often viewed from substantially greater distances than desktop monitors.
A perceptual unit would allow typography to be specified in terms of the intended visual scale rather than arbitrary CSS pixels.
________________________________________
3. Digital signage
Digital signage can involve extremely large displays viewed from several meters away.
A fixed pixel size is poorly suited to describing typography for such environments.
________________________________________
4. Accessibility
A visual-angle-based text preference could potentially provide a more device-independent way of expressing minimum readable text size.
Browser zoom and operating-system accessibility settings should remain authoritative.
________________________________________
Relationship to Existing CSS Units
vd would be additive rather than a replacement.
For example:
body {
    font-size: 0.55vd;
}

.logo {
    width: 5rem;
}

.container {
    width: 80vw;
}
Different units would therefore serve different purposes:
px       CSS coordinate sizing
mm       physical/reference sizing
rem/em   document-relative sizing
vw/vh    viewport-relative sizing
vd       perceptual visual sizing
________________________________________
Backward Compatibility
Existing CSS would remain unchanged.
For example:
font-size: 16px;
would continue to work exactly as before.
A fallback could be written as:
body {
    font-size: 16px;
    font-size: 0.55vd;
}
Browsers that do not support vd would ignore the second declaration and use the fallback.
________________________________________
Open Questions
1. What should the reference viewing model be?
Should it use a fixed distance, device-class distance, or another model?
2. What should 1vd measure for typography?
Em square, cap height, x-height, line box, or actual glyph height?
3. Should vd be limited to typography?
Could it eventually be useful for:
o icons; 
o controls; 
o focus indicators; 
o interactive targets; 
o other perceptual UI dimensions? 
4. How should browser zoom interact with vd? 
5. How should the unit behave when a browser window moves between displays? 
6. Should user-agent accessibility preferences be able to modify the effective visual angle? 
7. Should the unit be defined in CSS Values and Units, CSS Fonts, or another CSS module? 
________________________________________
Historical Context
There is also an interesting historical connection.
CSS has previously used the concept of a reference pixel that was described in terms of visual angle. This proposal does not seek to redefine the existing px unit.
Instead, it proposes exposing the visual-angle concept as an explicit author-facing unit, independently of the existing CSS pixel model.
This would allow CSS to retain its extensive backward compatibility while adding a new perceptual abstraction.
________________________________________
Design Principle
The central principle of this proposal is:
CSS should be able to express not only the geometric size of content, but also its intended perceptual size to a human observer.
CSS already provides abstractions for:
• document-relative sizing; 
• viewport-relative sizing; 
• CSS coordinate sizing; 
• physical/reference lengths. 
A visual-degree unit would provide an additional abstraction for human visual perception.
________________________________________
Proposed Minimal Definition
The minimal proposal is therefore:
font-size: 0.6vd;
where:
1vd = 1 degree of intended visual angle
The user agent would convert the specified visual angle into an appropriate used length according to the standardized reference viewing model.
The exact reference model, typography metric, and implementation details are intentionally left open for CSSWG discussion.
________________________________________
Final note to CSSWG
I am proposing this as a discussion topic rather than as a fully specified implementation.
The main question I would like the CSS Working Group to consider is:
Should CSS provide a first-class unit for perceptual visual size, analogous to how existing units provide coordinate, physical, relative, and viewport-based sizes?
________________________________________
With the help of ChatGPT


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/14378 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 23 August 2026 20:16:24 UTC