Re: PX and PT and VA Re: Text Zoom Challenges and Examples

Hi Jonathan, responses inline:

> On Sep 27, 2021, at 8:08 AM, Jonathan Avila <jon.avila@levelaccess.com> wrote:
> 
> Hi Andy,  can you help me understand how this would correspond to 400% of the default resize of body text at a viewport width of 1280 CSS pixels width.

Well first off, all the samples on the text zoom experiment <https://www.myndex.com/WEB/TextZoomExample> up to 500% fit on a 1280 wide screen, though the 600% test does not (1360) and that’s part of the point, that increasing the smallest text to 80px (500%) and the largest text to 108px is a reasonable goal. The next increment with smallest to 96px (600%) and largest to 120px is a little tougher to handle.

On that page, the 400% sample is the one with a 64px body font.

> It’s also been my experience that most people with low vision even after 40 hold things more closely than the standard viewing distance.

Yes, of course. I certainly do… but I need fairly high diopter reading glasses to read anything closer than about two feet. I usually wear computer-set reading glasses to set the focus for about two feet.

Two points:
The guidelines we create should first not consider people having to use bad posture or positions to read a screen.
The guidelines should aim to solve the need based on the same view distance that a given device is designed for. the iPhone is designed to be used at about 12”. A laptop, more like 2’.

Keep in mind that we can reasonably accommodate up to about 20/100 at a “normal” viewing distance (this is the 500% example).

Users above 20/100 would still need to view substantially closer to the screen.

As can be seen from the examples page, body text over 80px starts to get untenable. 80px (with a 0.5 x-height ratio) is the critical size for someone with 20/100 vision. 


Please let me know of any further questions.


Thank you!

Andy

Andrew Somers 
Senior Color Science Researcher 
PerceptEx Perception Research Project <https://www.myndex.com/perceptex/>
address redacted for list
 <https://www.myndex.com/perceptex/>




> Jonathan
>  
> From: Andrew Somers <andy@generaltitles.com <mailto:andy@generaltitles.com>> 
> Sent: Friday, September 24, 2021 6:09 PM
> To: Jonathan Avila <jon.avila@levelaccess.com <mailto:jon.avila@levelaccess.com>>
> Cc: public-low-vision-a11y-tf@w3.org <mailto:public-low-vision-a11y-tf@w3.org>
> Subject: PX and PT and VA Re: Text Zoom Challenges and Examples
>  
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>  
> Hi Jonathan, 
>  
> Regarding my research, and the total body of research by others, we are all (most often) referring to VA, the visual angle as subtended onto the retina. 
>  
> EXAMPLE: Snellen 20/20 is based on a capital E that subtends 5 arc minutes onto the retina, or 0.0833° of total arc. By using visual angle, the distance to or size of a device is not necessarily relevant (other than for distance related acuity issues such as presbyopia).
>  
> Fortunately we have the CSS px, which is defined as 1.278 arc minutes of visual angle.
>  
> This is why in all the guidelines I suggest use the CSS px as the main unit. The CSS pt (point) is 1px = 0.75pt, so a 16px font is 12pt.  VA is the only real metric that has some commonality, and how a device manufacturer can use in determining their screen pitch. (Side note: the modern 1pt is very close to 1 arc minute).
>  
> ON THIS POINT: one way for a user to “zoom” text is to move closer to the display or device. BUT someone over 40 who has presbyopia and cannot focus close without correction may have difficulty zooming by distance. The zoom levels demonstrated on the page are related to maintaining the standard distance for the standard visual angle.
>  
> Regarding the Text Sample Page
> The base body font for the “normal” block of text is 16px, 400 weight, with contrast at Lc 75.
>  
> Not About Percentages
> A principal point though is that page is to demonstrate that we do NOT want to zoom by percentages, only in terms of theresultant font size. We don’t “see" percentages, we see the size of the font in px as rendered by the user agent (using inspector, you’ll see that regardless of the CSS length used, the rasterizer indicates the size in px). What is important is px (or pt. for print), and ultimately the size it projects onto your retina.
>  
> So, if 16px is the critical size for best readability for 20/20, then 32px is the assumed critical size for 20/40, and so on. But also, once we get larger than 96px to 120px, reading speed starts to drop again as the text is getting too large, and we then process it letter by letter instead of in the VFWA, visual word form area of pre lexical filtering into the language center on the left of the brain.
>  
> So, we do not want to enlarge all text on a screen by a percentage. We want to increase the smallest content text UP TO the critical readability size, and then increase the size of larger text only so that it is larger than that smallest content font. So this implies a max being about 80px to 96px for the body text, and no more than about 120px for the largest text.
>  
> The critical font size by the way is about 2x the minimum acuity size, so the critical size for 20/20 readability is also more or less the legibility limit for 20/40.
>  
>  
> The Percentage Calculations:
> The percentage calculations were there for reference only. For body text, each iteration was the total size relative to the initial 16px, so 32px is 200%, and 80px is 500%. The percentages for the largest headline were added for context, adn those were relative to the initial 36px large headline. 
>  
> As such, the 500% body text is at 80px, and that large headline is 108px which is a 300% size. If that large headline was also zoomed up by 500%, then it would have been 180px !! much too large. And this is a principal problem with today’s browsers that only zoom all by a percentage.
>  
> THE MINIMUM GUIDELINE: Regardless of the starting font size, body text or small content fonts should be able to be increased to a size of 80px (40px x-height), while at the same time the largest font should not be increased to more than 120px (60px x-height ).
>  
>  
> TL;DR: It's not about percentages, it is about the rendered font size, and it is ultimately about visual angle aka size on the retina.
>  
> Footnotes
> px: is the CSS canonical length unit for web content, and is NOT device pixels, but an abstraction, relating to canvas pixels on the CSS canvas abstraction layer. The CSS px is derived from the “reference pixel” which is 1.278 arc minutes of visual angle VA or 0.0213° — therefore a 16px font is 0.34° (W3 CSS)
> pt: a typographic point, 0.75pt = 1px, so a 12pt font is 0.34°
> VA: Visual Angle, not to be confused with VA Visual Acuity.
> Critical Size: the minimum text size where the reader can read at best speed and best comprehension. Typically about 2.4x the legibility size aka minimum acuity.(Lovie-Kitchin, Legge)
> x-height: the size of the lowercase x of a font. This is critical as this determines the size of the vast majority of letters onscreen. 
> Critical x-height: The critical x-height for 20/20 is 9.38px, so if the x-height is exactly half the font size, the font size needs to be 18.8px (x-height times 2.4) If the x-height is 0.6 of the font size as is common for webfonts, then a 15.6px would do for 20/20, which is the genesis of the suggested 16px guideline.
> Critical Contrast: the minimum luminance/lightness contrast where the reader can read at best speed and best comprehension. Typically about 10 times the minimum contrast at threshold, but ideally 20 times the threshold. (Lovie-Kitchin)
> CRITICAL FONT CHART
> NOTE: The critical x-height for 20/20 is 9.38px
> The minimum critical font size shown assumes an x-height of 0.66
> If the x-height is ½ the font size, then that implies an 18.8px font.
> 
>  
>  
> Thank You!
>  
>  
> Andy
>  
>  
> Andrew Somers 
> Senior Color Science Researcher 
> PerceptEx Perception Research Project <https://www.myndex.com/perceptex/>
> Address Redacted for List
> <image001.png> <https://www.myndex.com/perceptex/>
>  
>  
> Frutiger .916  .668
> 
> 
> On Sep 24, 2021, at 6:28 AM, Jonathan Avila <jon.avila@levelaccess.com <mailto:jon.avila@levelaccess.com>> wrote:
>  
> Hi Andy, in terms of how you arrive at 500% to 600% I’d like to understand in what context (desktop monitor, mobile, size of display and distance etc.) and what resolution.  For me, someone who uses 800x600 on the desktop with a 4:3 ratio ~20 inch monitor 600% will be different from someone who uses a 2k resolution.
>  
> Personally I find looking more closely at medium text better than looking farther away at larger text.  Looking closely is sometimes not socially acceptable in current society and thus people with visual impairments are encouraged to use larger text so they can be further away in order to appear “normal”.  While there can be an aspect of enlargement needed for visual acuity or for proper posture – posture can often be accommodated in different ways.
>  
> Jonathan
>  
> From: Andrew Somers <andy@generaltitles.com <mailto:andy@generaltitles.com>> 
> Sent: Wednesday, September 22, 2021 4:44 AM
> To: public-low-vision-a11y-tf@w3.org <mailto:public-low-vision-a11y-tf@w3.org>
> Subject: Text Zoom Challenges and Examples
>  
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>  
> Hello LVTF members, 
>  
> I just revised some examples relating to issues of text resize, reflow, zoom, etc.:
>  
>  https://www.myndex.com/WEB/TextZoomExample <https://www.myndex.com/WEB/TextZoomExample>
>  
> It contains some discussion as well, and it is part of the collection of items that need “technology help” in this case, either an extension or native browser support for zooming text not by a  simple percentage, but in a manner that zooms larger text a lesser degree than the smallest text.
>  
> These examples also demonstrate why we still need a minimum text size in the standard: for a 16px font, to accommodate low vision, it still needs to be zoomed 500% to 600%. If there were no minimum, an 8px font for instance woul d need to be zoomed as much as 1200% to accommodate low vision needs. Presently browsers can only zoom 300% to 500%.
>  
> I think this would be a good topic in a near future meeting.
>  
> Thank you,
>  
> Andy
>  
>  
> 
> Andrew Somers
> Senior Color Science Researcher
> PerceptEx Perception Research Project <https://www.myndex.com/perceptex/>
> Address Redacted for List