typography-expert

Font pairing involves selecting typefaces with complementary characteristics—typically a serif and sans-serif, or two sans-serifs with contrasting weights. This Skill applies decision-tree logic to match fonts by visual harmony, readability, and brand fit, then generates CSS for implementation across responsive layouts.

Modular type scales use proportional ratios (1.125, 1.25, 1.618) to derive font sizes that maintain visual hierarchy and readability. This Skill generates scale logic and CSS clamp() formulas for fluid, responsive typography that adapts from mobile to desktop without manual breakpoint management.

Variable fonts consolidate multiple font weights and styles into a single file, reducing HTTP requests and total bytes shipped. This Skill demonstrates font-loading optimization strategies, variable font axis selection, and performance trade-offs to balance design flexibility with load time.

OpenType features like kerning, ligatures, and optical sizing improve legibility and visual refinement. This Skill addresses WCAG-compliant typography, dark mode legibility adjustments, and OpenType implementation via CSS, ensuring accessibility alongside aesthetic enhancement.

Multilingual typography requires font selection that supports diverse character sets, script rendering, and baseline alignment. This Skill covers script-aware font pairing, fallback chains, and responsive sizing across language variations to maintain hierarchy and legibility globally.