docs(landing): use OpenDyslexic on prominent display text#131
Conversation
The product is a tutor for dyslexic readers — the landing page now reads its own headlines in a dyslexia-friendly font where it counts. Swap Fraunces → OpenDyslexic on: top-nav brand, hero wordmark, hero tagline, every section h2 (incl. dark L1 slab), the L1 substitution rows, the big stat numerals, the workflow memo i./ii./iii., and the footer brand. Body copy, p.lede, h3/h4 sub-heads, drop cap, and JetBrains-Mono labels are intentionally left in their original stack — the contrast is the design. Tame the giant clamp() sizes and negative letter-spacing on those rules: OpenDyslexic runs noticeably wider and taller than Fraunces, and the heavy -.04em tracking that worked for Fraunces would crush OpenDyslexic's weighted baselines and overflow the hero column. Self-checked in Chrome (localhost): all four OpenDyslexic faces load, all targeted selectors resolve to OpenDyslexic in computed style, non-targeted text keeps Spectral / Fraunces / JetBrains Mono, no horizontal overflow at 756px viewport. Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Updates the landing page typography to use OpenDyslexic for prominent display text, aligning the page’s visual hierarchy with the product’s dyslexia-focused positioning.
Changes:
- Adds OpenDyslexic (via cdnfonts) and introduces a
--dyslexicfont-family variable. - Switches key display selectors (brand/wordmark/tagline/h2/pull-quote/substitution rows/stats/memo numerals/footer brand) to the dyslexic stack and adjusts sizing/tracking for fit.
- Replaces some Fraunces variable-font styling with fixed
font-weight/font-stylerules for emphasis.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
| h2{font-size:clamp(36px,5vw,68px);font-variation-settings:"opsz" 96,"wght" 600,"SOFT" 30;letter-spacing:-.02em;line-height:1.05;margin-bottom:24px} | ||
| h2{ | ||
| font-family:var(--dyslexic); |
There was a problem hiding this comment.
h2 switches to var(--dyslexic) but still inherits the font-variation-settings declared on the shared h1,h2,h3,h4 rule above. Since OpenDyslexic isn’t a variable font, consider explicitly resetting font-variation-settings (e.g., to normal) for h2 (and similarly for h1.wordmark) or refactor the shared heading rule to avoid applying Fraunces-only settings to OpenDyslexic headings.
| font-family:var(--dyslexic); | |
| font-family:var(--dyslexic); | |
| font-variation-settings:normal; |
| letter-spacing:-.01em;line-height:1.12; | ||
| margin-bottom:24px; | ||
| } | ||
| h2 em{font-style:italic;font-weight:400} |
There was a problem hiding this comment.
PR description says the Fraunces-specific inline font-variation-settings on h2 <em> accents was removed in favor of h2 em styling, but there are still several h2 <em style="...font-variation-settings..."> occurrences later in this file (e.g. around lines 967, 1045, 1081, 1125) and .l1-section h2 em in CSS still sets font-variation-settings. To match the stated approach, remove those inline font-variation-settings and update the CSS emphasis rules to use font-style/font-weight only.
Address PR #131 Copilot review: - h1.wordmark and h2 inherit `font-variation-settings` from the shared `h1,h2,h3,h4` base rule. OpenDyslexic isn't a variable font, so the Fraunces axes (`opsz`, `wght`, `SOFT`, `WONK`) are silently no-op'd by the renderer — but the declared style is misleading. Reset to `normal` explicitly on h1.wordmark / h2 / their `em` accents. - Four inline `<em style="…font-variation-settings:'opsz' 96,…">` tags inside h2 elements (Sections 03, 05, 06, 07) and the `.l1-section h2 em` CSS rule still carried Fraunces axes. The PR description claimed those were cleaned up; they weren't. Strip them now — keep only the still-effective `color` (and `font-weight:400` in the L1 rule for italic-light contrast). Verified in Chrome: getComputedStyle returns `font-variation-settings: normal` on h1.wordmark, h2, h2 em, and .l1-section h2 em; no inline `font-variation-settings` remains on any h2 em element; OpenDyslexic still resolves on every targeted selector; no horizontal overflow. Co-Authored-By: Claude <noreply@anthropic.com>
Summary
The product is a tutor for dyslexic readers — the landing page now reads its own headlines in a dyslexia-friendly font where it counts.
Swaps Fraunces → OpenDyslexic on:
h2(incl. dark L1 slab)b ← v,r ← l, …)Body copy,
p.lede,h3/h4, the editorial drop cap, and the JetBrains-Mono labels stay in their original stack — the contrast is the design.Also tames the giant
clamp()sizes and the heavy negative letter-spacing on those rules. OpenDyslexic runs noticeably wider and taller per glyph than Fraunces; the original-0.045emtracking and260pxhero clamp would crush its weighted baselines and overflow the hero column.Implementation notes
--dyslexicdeclares the family stack (withlocal()fallback to Comic Sans MS) so any future tweaks land in one place.fonts.cdnfonts.com/css/opendyslexic(Regular / Bold / Italic / BoldItalic).font-variation-settingsinside inlinestyle="…"on<em>accents insideh2are now no-ops; replaced with plainfont-style:italic+font-weightonh2 emfor the same emphasis under the new family.Test plan
Self-diagnosed in Chrome via
claude-in-chromeagainst a localpython3 -m http.server:OpenDyslexic@font-facedeclarations reportloadedviadocument.fonts.readygetComputedStyle()returnsOpenDyslexicfamily on all 9 targeted selectors (nav brand, wordmark, tagline, h2, l1-section h2, sub-row, stat .big, memo .num, footer brand-large)scrollWidth === clientWidth)🤖 Generated with Claude Code