What problem does it solve? Web interfaces often ship with inconsistent font choices, poor line spacing, bad text wrapping, and accessibility issues like iOS input zoom or unreadable contrast. This Skill provides a systematic set of typography principles and review procedures so text renders correctly, reads comfortably, and holds up across viewports and languages. ## Core Features & Use Cases - Font Selection and Formats: Guidance on typeface categories, pairing for contrast, woff2 formats, variable fonts, and OpenType features like tabular numbers and stylistic sets. - Spacing, Sizing, and Wrapping: Type scales, heading hierarchy, line-height and letter-spacing rules, measure caps, text-wrap balance/pretty, truncation, and smart punctuation. - Accessibility and Details: iOS 16px input zoom fixes, underline metrics from the font, selection styling, font smoothing, RTL/bidi handling, and a structured review output format with severity ratings. - Use Case: When reviewing a frontend pull request, apply the skill to catch a card description using tight heading line-height, a price display without tabular-nums causing layout shift, and inputs under 16px that trigger iOS zoom, then report findings in the standard severity table. ## Quick Start Review the typography in my frontend components and report any issues with fonts, spacing, wrapping, or accessibility.
