What problem does it solve? Interfaces often ship with typography issues that only appear at real content lengths: bad wrapping, orphaned words, synthesized font weights, shifting tabular values, and broken heading hierarchies. This Skill provides a systematic review checklist and concrete CSS fixes so text renders, wraps, and behaves correctly across viewports and languages. ## Core Features & Use Cases - Type system guidance: Build semantic type scales, map heading levels to descending sizes, and set role-based line-height and letter-spacing values. - Rendering and wrapping fixes: Apply text-wrap balance/pretty, truncation with ellipsis or line-clamp, tabular numbers for changing values, and font-metric underlines. - Variable fonts and OpenType: Use CSS properties over raw axis tags, load intended weights to avoid synthesis, and enable features like tabular-nums and slashed-zero. - Use Case: While reviewing a dashboard UI, you notice a price ticker shifting layout as digits change and a card description with a cramped three-line paragraph. The Skill directs you to add font-variant-numeric: tabular-nums and raise line-height to at least 1.4, with Tailwind equivalents from the cheat sheet. ## Quick Start Review the typography in my web app's components and report findings with severity, location, and the exact CSS fixes to apply.
