What problem does it solve? Choosing typography for a web project often ends in generic defaults like Inter at one weight with untouched line-height, which makes pages look templated. This Skill replaces that with a structured decision process: a few targeted questions about surface, register, and motion appetite, then a concrete output with named typefaces, a fluid clamp()-based scale, and working font-loading code. ## Core Features & Use Cases - Opinionated font pairing: Proposes 1-2 named typeface pairings grouped by register (neo-grotesque, geometric, display serif, monospace) with free sources like Fontshare and Google Fonts, following Calvez's core typography rules. - Fluid type scale and wiring: Generates a clamp()-based modular scale with per-size line-height and letter-spacing tuning, plus next/font variable-font setup and OpenType feature flags like tabular-nums. - Text-motion effects: Delivers exactly one hand-buildable text effect (CSS, GSAP SplitText, or WebGL) with prefers-reduced-motion fallbacks, capped to avoid demo-reel clutter. - Use Case: You are building a fintech landing page and the headings look default. Ask for a type direction and receive a Fraunces + Geist pairing, a fluid scale, next/font wiring, and one hero headline reveal effect. ## Quick Start Ask the agent to pick a font pairing and type scale for your project, describing the surface type and desired register.
