Page MenuHomePhabricator

Design spike: should we scale page width with font-size globally?
Closed, ResolvedPublic

Description

Answer the questions:

What are the ideal character per line guidelines for accessibility and usability?
How do our new font sizes change character-per-line numbers?
How do article pages match those guidelines (or not) at different font-sizes?


Answer

  • We should not scale article width with font-size. CPL remains adequate in articles with our new type-sizes.
  • The new type sizes, especially Large, break the homepage layout and reduce its readability significantly.

Event Timeline

I would be surprised if there isn't historical research here from somewhen in the entire Vector 2022 effort. At one point there was intent to make the central region quite narrow but editors pushed back due to the presence of various floating content (images, infoboxes, other general figures) and so the previous font size + standard width were selected somewhat purposefully.

I would be surprised if there isn't historical research here from somewhen in the entire Vector 2022 effort. At one point there was intent to make the central region quite narrow but editors pushed back due to the presence of various floating content (images, infoboxes, other general figures) and so the previous font size + standard width were selected somewhat purposefully.

Thanks for this! Yes. I dug up the previous research here.

The popular recommendation is that there should be between 40 and 75 characters per line. The findings of multiple studies conclude that "short line lengths are easier to read". Regarding learning and information retention: "Subjects reading the narrow paragraphs had better retention than those reading the wide paragraphs"

This aligns with WCAG's recommendations and the US Government's accessibility guidelines as well.

I measured the impact of the new font sizes on the character-per-line (CPL) measurements on Wikipedia and here's what I found:

I measure this by inserting upper case Ms into the HTML. M tends to be the widest letter in Latin character typefaces (fun fact: this is where the use of "em" as a measurement comes from).

Screenshot 2024-01-29 at 1.49.43 PM.png (1×1 px, 447 KB)

Font-sizeCPL without infoboxCPL with info box
14 (small)8255
16 (Standard)7247
18 (Large)5733

For articles, the character-per-line measurements remain acceptable with the new font sizes in latin character typefaces.

The same can't be said for two-column layouts like the homepage. On the homepage, CPL is only 13 when text appears beside an inline image. It is Only slightly better (but still inadequate) at a CPL of 21 when there is no inline image.

Screenshot 2024-01-29 at 2.19.23 PM.png (768×868 px, 256 KB)

CPL is inadequate at our new large font size on two-column layouts like the homepage. This will be addressed in T354818.

Jdlrobson subscribed.

@ovasileva to read through and create any new tasks as necessary.

Follow up work appears to be covered by T357706.