responsive-typographylisted

# Responsive typography The shift Brown argues for: stop designing screens and start designing *relationships* that hold at any size. ## 1. When to invoke - Type sizes must change across viewports or container widths. - Headings wrap badly, overflow, or shrink below legibility on small screens. - Building a type system meant to work without per-breakpoint overrides. - Migrating from fixed breakpoint steps to fluid sizing. **Do not** invoke to choose the base size (`body-text-and-reading`) or the ratio (`hierarchy-and-scale`). This skill adapts a scale you already have. ## 2. Required context - The **existing scale** and body anchor. - **Minimum and maximum viewport** (or container) widths you support. - Whether sizing should key off the **viewport** or the **container** — a card in a sidebar should respond to the sidebar, not the window. - Whether the component is reused at multiple widths. - Whether users can zoom, and whether Dynamic Type / user font-size preferences apply. ## 3. Invariant principles - **Design relationships, not screens.** A fixed size at each breakpoint is a set of disconnected designs. Define how size, spacing, and measure move *together*. - **Everything is interdependent.** Change viewport → measure changes → the size and line-height that suited that measure no longer do. - **Never disable user zoom.** `user-scalable=no` and `maximum-scale=1` violate WCAG 1.4.4. - **Never size type in raw viewport units alone.** `font-size: 4vw` doesn't