Sonnet Magazine

Sonnet Magazine is an independent online literary publication that had been running on a heavily customized WordPress installation for six years. The site was slow, the reading experience was mediocre, and accessibility was an afterthought — ironic for a publication that prided itself on the power of words. Their audience skewed older and more patient than most web users, but even loyal readers were complaining about load times and mobile usability.

The editorial team wanted a complete reimagining: a site that treated text with the same reverence as a printed literary journal, while being faster and more accessible than any publication in their space.

Typography was the entire design. I spent the first week building a type scale system — four scales (reading, editorial, display, micro) that work across viewport sizes using clamp() functions. The reading scale was tuned obsessively: 18px base on mobile, 21px on desktop, with a line-height of 1.72 and a measure (line length) capped at 68 characters. These aren't arbitrary — they're derived from readability research and tested with the magazine's actual content.

The color palette is deliberately restrained: warm off-white backgrounds, near-black text, and a single muted accent for interactive elements. No gradients, no illustrations, no visual noise. The content is the design.

Every article page follows a strict template: title, author, date, then the text. No sidebars, no related articles cluttering the margins, no sticky social share bars. Footnotes appear as inline annotations — tap to expand, tap again to dismiss. Pull quotes are set in the display scale with generous vertical whitespace, creating natural breathing points in longer pieces.

The scroll progress indicator is a thin line at the top of the viewport — visible enough to be useful, subtle enough to not distract. Estimated reading time appears at the top of each piece. Font size can be adjusted through a discreet control that remembers preference via localStorage.

Dark mode was implemented with care. Rather than simply inverting colors, I created a separate color system for dark reading: slightly warm dark backgrounds (#1a1a18), slightly cool off-white text (#e8e8e4), reduced contrast to prevent eye strain during extended reading sessions. The transition between modes is animated at 300ms with no layout shift.

The site targets WCAG AAA — not just AA. This meant 7:1 contrast ratios, not 4.5:1. It meant every interactive element has visible focus indicators. It meant the entire site is navigable by keyboard, and every image has meaningful alt text authored by the editorial team, not generated.

Screen reader testing was done with actual screen reader users, not just NVDA simulations. Their feedback led to structural changes: the article semantic markup was reorganized, ARIA landmarks were refined, and the heading hierarchy was simplified. The search feature supports voice input natively.

Page load time dropped from 4.2 seconds to 0.8 seconds. Lighthouse accessibility score: 100. Average reading session length increased by 2.4x. The site was cited in a Web Accessibility Initiative case study as an example of AAA-compliant editorial design. Subscription conversions increased 31% — readers who enjoy the experience come back, and readers who come back subscribe.