Font size and accessibility

[srambach]

A user has reported that the font size in v6 is too small.

WCAG2 does not define a minimum font size. The base size was decreased from 16px to 14px after an analysis of other data heavy, complex product UI design systems such as IBM Carbon, Material, Atlassian Design, Microsoft Fluent, and Github Primer.

A new body font size token for body-lg (16px), was added to be used for larger, long form blocks of text. The smallest text size remains at 12px.

The design team is actively working with the design language DPO group to align on typography standards.

However, tokens are currently set as px units rather than rem units, meaning that fonts do not resize properly with user preferences. We should either consume tokens as REM units https://github.com/patternfly/design-tokens/issues/47 or convert the px to rems in core.

V5 on the left; V6 alpha on the right

@garrett

[patternfly-build]

:tada: This issue has been resolved in version 6.0.0-alpha.181 :tada:

The release is available on:

• GitHub release
• npm package (@alpha dist-tag)

Your semantic-release bot :package::rocket:

[garrett]

Thanks for opening this.

It's been a longstanding that "16px" (approximate, not actually set in px) has been default for browsers for decades, and it's the de facto body size, and pages should be scaled, by default, on browser preferences. For longer form (more than just a word or two), most designers who have spent time designing for people using the web suggest actually going larger (equivalent to around 18px) than default, not smaller.

https://accessibleweb.com/question-answer/minimum-font-size/

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller and headings will often times be larger. But, the main body text (like what you're reading right now) should usually be 16px or larger. Additionally, it is officially stated within the WCAG that visitors must be able to resize all text on the page to at least 200% of its original size.

(Emphasis added)

https://www.a11y-collective.com/blog/wcag-minimum-font-size/

• Regular body text – a size of 12pt (16px) is generally suggested.
• Large text – a size of 18pt (24px) is typically recommended as a minimum.

https://accessibility.psu.edu/fontsizehtml/

• For traditional computer monitors, a size of 12pt (=16px) for body is generally recommended for body text (depending on audience).
• Ensure that default fonts are no smaller than 9 pt (=12px). Smaller sizes may be illegible on some platforms.
• The WCAG Guidelines recommend ensuring that text can be zoomed to 200%. Along with that goes a recommendation for liquid layouts which can accommodate 200% text.

https://css-tricks.com/designing-for-long-form-articles/

Increase the font size: We know that 16px is the default and is perfectly fine in many designs, but a larger font size is inviting in that it implies the user is free to lean back and settle in without having to angle forward with the screen in their face to read.

As most people using enterprise software — which is the target audience of PatternFly, as it was and is developed firstly for Red Hat apps — will not be kids, but be older, from 20 on up. People's eyes start changing around 30 to 40, where everyone's eyesight starts getting worse. This isn't even accounting for people wearing glasses at any age (53% of women and 42% of men) or people who have situational eyesight issues (allergies, migraines, smudgy glasses, etc.). Meaning that most people using the software that is developed with PatternFly will have eyesight that isn't perfect. (Eyeglasses do not "fix" vision. Glasses improve vision, but things like astigmatism, cataracts, various low vision issues, and so on cannot be fully corrected.) And this means, we shouldn't be shrinking the default font size for text that is meant to be read (as opposed to pure UI text that is a word or two for labeling, such as buttons).

Additionally, having smaller text requires people to squint and lean closer to their computers in an unergonomic way, which can result in headaches, neckaches, and backaches... if they do not know how to use browser zooming or increase the font size.

---

Also, I'm wondering how soon we can see changes on the PF6 staging website @ https://staging-v6.patternfly.org/ — it still uses 14px instead of 16px font sizes for body text and other possibly longer form text (banners, alerts). When does the website update based on PF changes? You seem to be implying that body-lg is going to be the new default? It doesn't look like it, as it's still 14px for text that's meant to be read. Thanks!

[kmcfaul]

Will be addressed by https://github.com/patternfly/patternfly-org/issues/4169