Quiet Type

The old font picker had fourteen fields. Most users got past three of them and quit.

Squarespace's typography panel had grown one knob at a time over a decade. Heading font. Body font. Weight. Tracking. Display weight. Display tracking. Italic weight. Each had a defensible reason for existing, and together they formed a wall. The first-time user opened it, scrolled, and went back to the default. The thousandth-time user knew exactly where to click and ignored the rest.

The data was unambiguous. We had years of telemetry showing that the panel's effective surface area was about a quarter of what we'd built. The other three quarters were ballast. The question wasn't which fields should we add — it was which fields could we hide so the ones that matter could breathe.

We settled on three questions: what mood, what scale, what voice. Mood was a pairing — a display face and a body face that had been chosen to work together. Scale was a single slider that adjusted the ratio between display and body in lockstep. Voice was the optical sizing knob for the display face only; body sizing rode along with scale.

Everything else moved into computed properties. Weight followed mood. Tracking followed scale. Italic settings were inherited from the mood pairing and could be overridden in the rare cases that needed it — but the override lived behind a show advanced disclosure that, in our pilot, fewer than three percent of users opened.

The hard FE work was the live preview. Every adjustment to one of the three knobs had to repaint the entire template in real time, including the seven or eight typographic properties downstream of it. We used CSS Houdini for the computed properties — registering them as custom properties with typed values meant the browser could interpolate them instead of us reflowing on every frame.

/* The three knobs as Houdini-registered properties.
   Every downstream typographic decision derives from these. */
CSS.registerProperty({ name: '--mood',  syntax: '<custom-ident>', inherits: true, initialValue: 'editorial' });
CSS.registerProperty({ name: '--scale', syntax: '<number>',       inherits: true, initialValue: '1' });
CSS.registerProperty({ name: '--voice', syntax: '<number>',       inherits: true, initialValue: '1' });

Font subsetting was the other lever. The old panel let users pick from twelve hundred Google Fonts. The new one shipped with eight curated pairings. Each pairing was subsetted at build time to the glyphs the template actually used; payloads dropped by an average of 64%. The trade was that you couldn't use Cinzel for a button on the editorial mood. We decided that was a feature.

Quiet Type shipped in September 2022 as the typography panel for every new template. As of the last review, completion rates on the typography step are up 3.4×, and the show advanced drawer is opened on roughly 2.8% of sessions. The fields we cut weren't missed. The ones we kept got used.

The lesson I keep coming back to is unglamorous: defaults are the design. The work wasn't adding a third knob — it was choosing the eight mood pairings so well that the user almost never needed to leave them. That choosing took four months and one of the best collaborations I've had with a typographer. I would do it again at twice the cost.