Critical Font Size, x-Height for Readability

[Myndex]

One thing Ive been repeating over the last few years is the need for a useful property in CSS to set a font size based on its x-height. Setting font size using the font-size: property is less than ideal, as the relationship between the actual glyphs in a font and the 'font size" is inconsistent at best.

I have a live demonstrator page with ample examples.

Here's a screenshot of one part. Every sample font on this page is set to 24px. Every one. Yet they very in size by more than two fold. If a font has a typical x-height ratio of 0.5:1. then the x-height would be 12px, if the font-size was set at 24px. But in the below example, the font "Chathura" renders an x-height of only 9.8px, while "Orbitron" is over 19.3px.

As we know, font-size is critical for readability — and we've been talking about setting a minimum size. But what good is a minimum size of, say, 14px, when a font like Chathura at 14px will render a tiny ureadable 5.7px ???

For reference, here's a chart that presents the user font size needs for various acuity levels. This is a new version created today to better define the critical font sizes:

EDIT: Updated Chart

TL;DR

We need the new font-x-size: property I've proposed — now, what are best steps to be proactive with this?

Thank you

Andy

[Myndex]

Associated with this are some questions regarding the CSS reference px and ultimate screen site. What is important is the visual angle, i.e., the size of the image as it is projected onto the retina. Here's a chart that illustrates this. For a given distance from the screen, the screen pixel density that results in one device pixel equalling one CSS reference px:

So for instance, a phone is used 12" to 16" away. At least for the high-end phones like Apple or Samsung, the effective logical pixel density is about 165ppi to 224ppi, which is in the same ballpark as a 96ppi screen that is 28" away. Apple indicates their phones are expected to be used around 12" to 16" away, but they are "retina" displays so they are double or triple the dimensions of a regular display, though the logical px is then a half or a third of the physical display. I.e. a 326ppi retina display is effectvely a 163ppi display, as far as how the CSS reference px renders to it. Essentially, 1 px equals 4 physical pixels.

Some of their newer phones are 460 with a 3x factor, so 1px equals 9 physical pixels. Even so, for iOS and MacOS, the user can make adjustments in terms of how large a is displayed size-wise.

TL;DR

Device manufacturers plan their devices based on visual angle, so again the CSS reference px is the canonical unit that is the one commonality across device types.

Thank you

Andy

[mraccess77]

Hi @Myndex does the font-size-adjust property assist at all in this need? My recommendation is that we could discuss the practical need in the LVTF guidance but that you should work with the CSS working Group or more broadly with the other groups like APA to discuss this topic: https://www.w3.org/WAI/APA/

[Myndex]

Hi @mraccess77 Jonathan,

does the font-size-adjust property assist at all in this need? My recommendation is that we could discuss the
practical need in the LVTF guidance but that you should work with the CSS working Group or more broadly with the other groups like APA

No, font-size-adjust: does not really function the way it is needed for the use case I describe, which is a way to directly set a font size using the x-height.

I did send this proposal to Janina some time ago, but I know my memos can be lengthy ... and I have not been able to follow up doe to my own schedule. This is one of the pressing reasons why I asked in January to get a vision subgroup going again, in part with the hope of developing/recruiting liaisons to the other groups of W3. My forte is not navigating the political waters of the W3. My hope was that with a re-born group, we could find/enlist someone that was adept in that way to push some of these key agenda items outward.

High Priorities

Creating the font-x-size: property is one of the high priority items on my liaison list, along with the companion ex-to-em: as I discussed on my proposal. There are some other technology related priorities: proportional text-zoom which requires browser developer's involvement is another high priority issue as I've been talking about. And font-x-size: would be an important part of relative proportional text zoom.

Those are high priority as they lead the way to other useful improvements and guidelines. The hit list, mainly focused on readability improvements (not in any order):

Hit List for Outreach

• Get font-x-size: added as a CSS property in CSS level 4, and push for browser adoption/implementation.
  • Also the companion property: ex-to-em which is needed to realize the full potential of font-x-size:
  • Also includes modifying the scope of the CSS ex length unit (or creating a new companion unit).
• Get the web font spec modified to include the x-height as a mandated value
  • Also review the web font spec for other potential additions.
• Lobby browser devs for text-zoom, where text zooms to a value not by a percentage, and where the largest font zooms less than the smallest font.

There are other things, but many of the other ideas and projects need these few things first.

Thank you!

Andy