Consider adding guideline for Accessible Type Faces

[rachaelbradley]

From email: "For https://www.w3.org/TR/wcag-3.0/ you may wish to include something on more accessible typefaces: https://typography.guru/journal/letters-symbols-misrecognition/ "

Recommender: Thomas Bohm

Note: This will need broad research beyond the reference above to better understand what constitutes an accessible type face and how recommendations around type face can be best integated into 3.0. This is a placeholder issue to ensure AG discusses the topic.

[bruce-usab]

Thank you @rachaelbradley for forwarding this message, and my apologies to be asking for a little more exposition or context.

FWIW, I am assuming from email means excerpted from a private off-list email, which I only mention because we also have some GH issues which are excerpted from email (or email attachments) sent to public facing lists.

Per the issue title, I understand the suggestion to be that WCAG3 incorporate something about what constitutes an Accessible Type Face.

I am not clear on the relevance of the quoted sentence to this specific issue. I did figure out that the quotation is from the W3C WAI resources, for example the disclaimer on this page: https://www.w3.org/WAI/GL/WCAG3/2021/how-tos/

I do appreciate that this message is something we should be saying more often!

[rachaelbradley]

@bruce-usab Apologies, for the typo. I have hopefully corrected and clarified the issue sufficiently. If not, please let me know.

[Myndex]

Hi Rachael @rachaelbradley

This will need broad research beyond the reference above to better understand what constitutes an accessible type face and how recommendations around type face can be best integated into 3.0. This is a placeholder issue to ensure AG discusses the topic.

This is a principal part of the readability research I am conducting. Glyph design is particularly important—I created a very brief pdf guideline, which is mostly visual examples and comparisons:

Evaluating Fonts For Accessibility D.pdf

Also I know the Readability Group/BBC was doing research in this specific area, the lead was Gareth Ford Williams of Readability Group. Some results of their study in this interesting video: dont-believe-the-type

He has a useful and brief article on the subject as well:
Understanding What Makes a Typeface Accessible

The remainder of this post covers some of my notes on user needs, challenges, and needed technologies.

---

Typefaces and Beyond

Some things to think about, or what do we classify as part of a given font design, and what is otherwise defined by layout. Leading (line height) and kerning/tracking (letter spacing), as well as the capital height and x-height ratios, and particularly weight—all have no standard, and are up to the font designer to determine.

Thus for a given 16px, 400 weight font, the actual glyphs are rasterized to screen at a size and weight that is often different compared to some other font even though it's also set at 16px, and this goes for the spacing and other characteristics.

The CSS properties, line-height, letter-spacing, font-weight, font-size etc. are all at the mercy of, and relative to, how those characteristics are designed into the font. It is challenging writing guidelines that involve these important font metrics, as two different font families can vary not only in the design of the individual glyphs, but how they are sized relative to the font body size. Add to that ambiguity of how they are kerned or spaced and the key aspect of stroke width & stroke contrast, and how that relates to a specific weight number like 400 or 700.

Then the subsequent question is that of testability: font design, as in a set of individual glyphs, is complicated and nuanced enough that a reasonable, meaningful, and testable normative standard (i.e. "shall") for all font use cases is essentially out of reach. The critical use case of blocks of body text might be a candidate though.

Keeping in mind that this specific subject has been researched thoroughly for over a century without finding much consensus beyond basics like "blackletter fonts are hard to read," a reasonable guideline or recommendation (a "should" or "may") is possible, see the appendix for key points.

Many Writing Systems

And here we are talking only about Latin fonts — but there are so many other writing systems in the world (at least 40 common ones serving 6000 living languages IIRC) that have their own unique considerations. As an example, consider that dyslexia is almost unheard of in Korea, as Korean is a clear language. English is decidedly not, and that is the larger, intractable problem.

And on this subject, fonts like "Open Dyslexia" and "Dyslexie" are not actually useful, in part as they seem to be based on an assumption that dyslexia is a visual problem — and knowing that dyslexia is language specific, claims it can be solved through special glyphs are unsupported by science.

In one study the researchers found that increasing letter spacing of a common font like Arial had the same benefit as the font Dyslexie which also had increased spacing ^{ref Marinus, Mostard,et.al.} with the implication that it was not the glyphs, but the crowding which is helped with increased spacing.

Technology Needed

Because of the lack of consistency in font families, some changes/additions to CSS properties would be helpful for creating actionable guidelines.

x height

The way to make font-size: consistent in terms of readability is to use the x-height and not the font body height, as is done now. I proposed last year in the CSSWG a property for setting x-height directly, which is what is needed to accomplish that.

spacing

Along with that would ideally be a way to set line-height based on x-height.

Letter spacing is trickier since kerning is so tightly entwined with a font's design. Typesetting systems like Quark Express, Illustrator, InDesign allow for optical kerning and additional tools to provide fine-control over letter spacing. That level of complexity is not a part of CSS right now, but would be helpful, but is also processor intensive.

font weight

The problem of inconsistent font weight is non-trivial, and something I am working on. The manual method is described for APCA.

---

Appendix

What Are All the Things

Specific points of font readability, as briefly as possible, and mainly considering blocks of body text.

• Size appropriate for acuity of the reader, meaning the critical size.
  • This is an x-height that is at least two times the measured acuity height in visual angle.
    • I.e. if the smallest capital E that can be distinguished measures 4px, then the x-height of a font needs to be 8px.
    • If the x-height ratio is 0.5, then that means a 16px font.
  • The aspect ratio is reasonable for the acuity
    • At the minimum critical size, the lower case aspect ratio needs to be less than 1.5:1 (not counting ascenders and descenders.)
    • I.e. an 8px high x that is only 2px wide is unreadable at that size.
  • CSS does not have a useable property to affirmatively and consistently set this as all these attributes vary considerably per font.
• Appropriate font weight for the given x-height of the font as used in the design.
  • Very bold, heavy fonts may be hard to read due to self-crowding, and should not be used for small font sizes.
  • Very thin, light fonts need substantial luminance contrast, and be set larger than heavier/bolder fonts.
  • CSS does not have a useable property to affirmatively and consistently set this, as weight is a non-standard attribute that varies considerably per font.
• Appropriate spacing (leading and kerning/tracking)
  • General: more spacing lowers spatial frequency, which improves contrast for readability.
    • Less spacing introduces crowding effects and reduces spatial contrasts.
    • Spacing as in padding around a block of text is also important for readability
  • Leading (line spacing): baselines should ideally be 2.5 x-heights apart (or more).
    • For a font like Helvetica Neue (x ratio ~0.5175) this is a line height of 1.3
    • Fonts with a larger x-height need to set a larger line-height, eg. an x ratio of 0.56 needs a line-height of 1.4
  • Tracking (letter spacing): depends on the size, weight, aspect, and glyph design, and the kerning.
    • For instance for a well designed font like Barlow, the letter spacing is 0.08em to 0.16em when including kerning. (8% to 15% of the font size).
    • word spacing about 0.3em to 0.35em (30% to 35% of the font-size).
    • Serif fonts, italics, cursive, etc. tend to need more spacing.
• Glyph Design after size/aspect ratio/x ratio, weight, and spacing considerations are established, some key glyph considerations are:
  • Good counters (the hole in lower case e for instance — it should be large enough to be distinct.
  • Adequate ascenders and descenders, such as for the d b p q h y g, should be distinct, a minimum of 33% of the x-height, or more.
  • 1lI Distinct numeral 1, lowercase l and upper case I
    • GOOD: the code font1lI - but MEH: the normal font 1lI
  • rn m Distinct rn m so when r n are together, they are not mistaken for m
  • No mirrors: db should be unique and not just mirror copies, same for qp
  • Descender distinction: q g y j qgyj

EXAMPLE Does the meaning change:

• I saw Haley's Comet or 1 saw HaIcy's Cornet
• I saw Haley's Comet or 1 saw HaIcy's Cornet

• Special, ornate, cursive, or flourished font designs

  • Should never be body text
  • Do have their place in some designs, but the impact on readability needs to be recognized.
    • For instance, important information first displayed in a highly ornate font should be shown again in a more normal font. Example: very ornate flourished words : "You're Invited to our Wedding June 1st at 3pm", at the very least "June 1st at 3pm" needs to be repeated in clear text elsewhere on the invitation.

• Tangential to the font design and built-in metrics:

  • Device resolution makes a difference.
    • On lower resolution devices, sans-serif font usually work best.
    • On high-res (retina), serif fonts work as well as print.
  • The combination of font-weight and font size determines the needed lightness distance for adequate readability contrast.
    • For very light weight fonts with thin strokes such as weight 100, even maximum color contrast may not be enough if the size is also small.

The TL;DR

• Research shows that readability is substantially affected by:
  • metrics like letter/line spacing
  • glyph weight, which directly affects visual contrast
  • Size, especially the x-height, for a user's acuity needs.
    • Size is also the single readily available feature for user change (zoom).
  • While it is true that some glyph designs are more readable that others, there is a general lack of consensus on absolute specifics.

Thank you for reading,

Andy

Andrew Somers
Senior Title & VFX Supervisor
General Titles & Visual Effects

[patrickhlauke]

Just putting a pin on this in terms of testing. If CSS currently isn't expressive enough for authors to actually define things / for automated tools to query this from a rendered page, and there is literally an unlimited choice of fonts that authors can use, would the expectation for testers be to literally run the numbers against all their font choices (complicated by the fact that user agents/operating systems often have their own flavours/slight variations of fonts that nominally have the same name, and doing font replacements in certain conditions)?

[chaals]

Where the user agent is supplying a font, the right place to put the requirement would be on the user agent to offer accessible fonts.

There has been research into this for quite a long time, so providing information on some fonts that are more accessible (to whom, when?) should not be beyond us.

And yes, if you want to choose fonts, and to produce content that is as accessible as possible, logic suggests that you have to check whether the fonts you choose achieve that...

[patrickhlauke]

Where the user agent is supplying a font, the right place to put the requirement would be on the user agent to offer accessible fonts.

and if they don't, a site fails when displayed in that user agent/operating system/whatever?

providing information on some fonts that are more accessible (to whom, when?) should not be beyond us.

providing information/advice/best practice? sure. making mandatory requirements based on that...that's where it'll get "interesting"

And yes, if you want to choose fonts, and to produce content that is as accessible as possible, logic suggests that you have to check whether the fonts you choose achieve that...

now flip this around though to somebody doing auditing/testing ... and it'll require analysing the fonts (and the user agents/environments where the site will be viewed by users, etc) on the testers' part. fun.

[Myndex]

To add, here's a link to a post I made in the CSS WG regarding accessible font categories and fallbacks, etc. There are also posts in the thread by others that are useful here.

Generic Font Fallbacks for Accessibility and More