Every page in the sitemap, plus the error page, was loaded at 320, 390, 768, 1024 and 1440 pixels wide. Every piece of text was measured for whether it was cut off, ran past the screen, split a word across lines, overlapped other text or was too small to read comfortably.
What was wrong
- Headings split mid-word. The Community page heading read “COMMUNITIE / S” at every desktop width, and the home page’s “Projects & Development” read “DEVELOPME / NT” at every width. In both, the heading’s width was capped in character units narrower than its longest word in that heavy, uppercase type, so no font size could have fitted it. On small phones the About page’s “Greatness” and long changelog titles split the same way.
- Buttons past the edge. At 1024 pixels, the Community page’s “See Mello Zone editorial work” button sat partly off the screen.
- A table wider than a phone. Article tables had no styles at all, so the table in the search titles entry ran off a 320-pixel screen.
- Cut-short text with room to spare. The featured Mello Zone story’s headline was cut to three lines (“…Judges the Build, Not the…”), and the side stories cut their summary after two lines above an empty gap.
- Collisions. On the About page the large “NOW” ran into the heading beside it. On phones, Connect’s “Discover creators” label ran into its description, and the contact address broke one letter before its end, leaving a lone “e” on the next line.
- Small labels. Twenty kinds of label were set between 9.9 and 10.9 pixels, including card dates, platform badges, the Work page’s skill tags and the header’s “Creator page”.
What changed
- The two capped headings now allow 11.6 characters, which fits their longest words. The home section titles also stop growing at 5.6rem, because past about 1240 pixels their column stops widening.
- Phone sizes for the home section titles, the About page’s closing heading and article titles were lowered, so the longest word fits at 320 pixels.
- The Community “Published evidence” row wraps: when its copy and buttons do not fit side by side, the buttons move under the copy.
- Article tables are styled: full width, wrapping cells and a header row.
- The featured story shows its whole headline, and side stories show up to four lines.
- The “NOW” label is sized to its column. The Start-here cards on Connect have a label column wide enough for “Discover creators”. The contact address breaks only after the “@”.
- Every one of those labels is now at least 0.72rem, about 11.5 pixels; the header tagline is 0.7rem.
Long code identifiers, repository addresses and hashtags may still wrap on phones. They have no other way to fit, and that is deliberate. Social captions on feed cards are still shortened; each card links to the full post.
Verification
tools/test-text-fit.mjs is now part of npm run test:a11y. On every sitemap route and the error
page, at all five widths, it fails when:
- a word in text of 28 pixels or larger is split across lines;
- text sits past the edge of the screen;
- text is cut off by its container;
- visible text is under 11 pixels.
It passes on this release. Run against the live site before this release, it reported 208 problems.