Skip to content

[A11Y] The Russell font is sus #97

@shrinkray

Description

@shrinkray

Accessibility Issue Description

The Russell font has a very stylized, condensed, and uneven stroke pattern that makes it hard to read, especially at smaller heading sizes. Accessibility guidelines (WCAG 2.2 § 1.4.8) emphasize legibility and distinguishability of text, and overly decorative handwriting fonts generally fail that test. If the headings are “tight” (little letter-spacing and line-height), that compounds the readability issue.

Since Russell is an OpenType font (OTF) it cannot be easily or reliably converted to WOFF2 for the web, that’s another practical concern. Browsers expect WOFF2 for performance and compression reasons. Loading OTF directly adds bloat and slows page rendering.

We will be looking at replacements and add a font stack if the preferred font is not loaded we have a hand selected replacement. These fonts will be installed locally however so it is not reliant on linking to the Google hosted font.

  • supports WOFF2 (performance),
  • maintains a hand-drawn character without losing clarity,
  • adjust font-size, line-height, and letter-spacing in your CSS to restore proper heading hierarchy (e.g., h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.2; }).

WCAG Guidelines Violated

  • Perceivable (1.x)
  • Operable (2.x)
  • Understandable (3.x)
  • Robust (4.x)

Specific WCAG Criteria

  • 1.1.1 Non-text Content
  • 1.3.1 Info and Relationships
  • 1.4.3 Contrast (Minimum)
  • 1.4.4 Resize text
  • 1.4.12 Text Spacing
  • 2.1.1 Keyboard
  • 2.1.2 No Keyboard Trap
  • 2.4.1 Bypass Blocks
  • 2.4.2 Page Titled
  • 2.4.3 Focus Order
  • 2.4.4 Link Purpose
  • 3.1.1 Language of Page
  • 4.1.2 Name, Role, Value
  • Other (please specify):

Steps to Reproduce

  1. Load te site in a fresh browser, you'll see the headings are painted last

Expected Behavior

Headings should:

  • Be clear and legible without decorative distortion.
  • Maintain adequate contrast and size hierarchy.
  • Reflow cleanly and stay readable when users zoom or change spacing.

Actual Behavior

  • Headings rendered in the “Russell” font are difficult to read due to their condensed, decorative style and irregular stroke weights.
  • Letterforms blur or lose clarity at smaller sizes, especially in bold headings, making it harder for users with low vision or cognitive reading challenges to distinguish words.
  • Line height and letter spacing are tight, which reduces legibility and increases visual crowding.
  • The font’s decorative style may decrease readability for dyslexic users or users relying on low-contrast modes, particularly when overlaid on textured or image backgrounds.

Assistive Technology Used

  • Screen reader (NVDA, JAWS, VoiceOver, etc.)
  • Keyboard only navigation
  • Voice control
  • High contrast mode
  • Zoom/magnification
  • Other (please specify):

Impact Level

  • Critical - Prevents access to content/functionality
  • High - Significantly impacts user experience
  • Medium - Somewhat impacts user experience
  • Low - Minor impact on user experience

Suggested Solution

I will recommend a list of variable fonts from Google to consider. I'll add screen caps showing choices for readability. The following are examples of possible replacements.

  • Rubik (sans serif)
  • Roboto Slab (slab serif)
  • Protest Revolution (hand written)
  • Merriweather (serif)

Additional Context

Testing Environment

  • Polypane
  • Android, Chromium, Firefox etc

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions