Font Design and Accessibility

[Myndex]

In the CSS forum, I had made an offhand comment about Microsoft Core Web Fonts implying they are mostly not accessible (the notable exceptions being Georgia and Verdana). Someone that works at Microsoft was defensive and so I responded further with some examples. Some of the topic is useful for discussion, and illustrates some of the accessibly problems with fonts today.

Accessible Font Design

Let me pause for a moment here: I am not talking about fonts as far as their aesthetic design. I am talking strictly about accessibility, including research on dyslexia, cognitive, contrast perception, and visual impairments.

Some accessibility points are: does a given font...

• have adequate tracking, kerning, and leading? (letter spacing and linespacing)
• have an adequate x-height? (Ideally ~60% of the font-size)
• have adequate weight? (Adequate stroke thickness at 400)
• have a "good" Cap-height? (For differentiating from x and allowing good leading)
• avoid common homoglyphs? (Meaning rn vs m and 1 vs l vs I are distinct.)
• avoid mirror image glyphs? (Meaning db or qp or MW are not literal mirror copies)
• have good hinting for screen use? (Meaning is designed to render well to standard resolution screens.)

Most of these characteristics are discussed prominently in the current research into readability. For cites, I refer to Lovie-Kitchin, Bailey, Arditi, Legge all of whom I rely on and who have done the bulk of the work in readability for normal and impaired vision. All that said:

Re: MS Fonts

Microsoft does have some fonts that are fairly accessibly. For instance Sitka Text was a Matthew Carter creation like Verdana and Georgia, but created in a program with empirical research so not surprising it's a fairly strong font and fairly accessible.

As a result of the other thread, I did a much deeper dive into the history of "MS Fonts" by which I mean the "core web fonts" which MS distributed once upon a time. Those were the proprietary fonts Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings,

Of THAT group, only Georgia, Verdana, and maybe Trebuchet MS are "accessible friendly". The problem though with Trebuchet is the default tracking/kerning is too tight, so it's not normally on my list of "good" fonts for accessibility.

But also of that group, Courier New is nothing short of an unusable illegitimate version of the classic Courier typeface. Arial is nothing but a pure copy of Helvetica, which I also give somewhat low marks to regarding accessibility. Times New Roman with its small size and small x-height make it less than desirable for web use. The small size of Times made it a choice for newspapers who were concerned with jamming as much text into as small a space as possible to maximize use of paper.

As a result of the deeper dive, I see that some of the fonts I loath the most were Microsoft commissions to Monotype. ..... And looking further, Monotype is behind a few other fonts I consider "bad" which have nothing to do with Microsoft, and a lot of Monotype fonts are just knockoffs of some other foundry's font. Microsoft seems to have a close business relationship to Monotype.

Nevertheless, it was MS that chose the core fonts, and Microsoft has more recent fonts that are also poor for accessibility. Though in fairness, most foundries do, considering that accessibility had not been at the forefront of design until the last few decades. (As a civil rights movement, accessibility is among the newest, gaining public awareness in the 1970s.)

But getting back to Courier New it is not even a faithful copy and it's horrendous for screen use. Examples:

Real Courier is a fairly readable font, but the MS commissioned Courier New is so very light it is unusable.

Times New Roman renders smaller than many other fonts for a given font-size. While newspapers try to save paper, this is an accessibility problem and there is no "paper" to save on the web.

And I included some more recent MS examples, like Gulim, Cordia, and Iris ... like, wut?

For the record, my critique of MS fonts is only and exclusively directed at accessibility issues of the cited fonts. But it is useful to point out that many of the Google fonts are also anti-accessible. And I do give MS credit for commissioning Matthew Carter to add some good solid designs to MS's fonts.

I have an informal paper evaluating accessible fonts available for download. In it, I give generally positive comments for MS Fonts Verdana and Georgia, but negative comments for Arial and especially Arial Narrow. Several Google fonts also received criticism for poor accessibility.

Thank you,

Andy

[mraccess77]

I've also noticed some fonts that have uneven baselines which make the font seem to move or wave. Others have letters like e and c that have very small openings making the letters more difficult to distinguish. Too thick of fonts are also challenges for some people as well as fonts that are horizontally or vertically stretched.

This article may be of use as well as the Readability Group is working on some research into this area:

https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0

[Myndex]

Hi Jonathan @mraccess77

I've also noticed some fonts that have uneven baselines which make the font seem to move or wave. Others have letters like e and c that have very small openings making the letters more difficult to distinguish.

There are a lot of bad fonts out there. And there is literally no standardization. Something like uneven baselines could be bad hinting for instance, or bad kerning or tracking.

But also, the method that text is rendered to the screen has an impact. Some rasterizers do not consider kerning properly, resulting in a very uneven look that is harder to read.

And "small counters" is a common problem for badly hinted screen fonts. (A counter is the hole in the "e" for instance). MS had a font "Century Gothic" and the small counters make it unusable.

Too thick of fonts are also challenges for some people as well as fonts that are horizontally or vertically stretched.

Yes, in the APCA guidelines on contrast for WCAG 3/Silver, smaller fonts are disallowed from using 800 or 900 weight.

And yes, font aspect ratio, tracking, kerning, leading (letter and line spacing) are all key parts of a good vs bad font.

This article may be of use as well as the Readability Group is working on some research into this area:
https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0

Indeed, I've had a few conversations with the author of that, Gareth Williams, on this subject. He had a research project going on at the BBC recently, not certain of the current status.

CSS Related

I just made a larger post on this topic, discussing the need for accessible fallback generic fonts in CSS over at the CSS working draft:

w3c/csswg-drafts#4910 (comment)