fd-typography

What problem does it solve?

This skill helps teams make informed typography decisions to achieve readable, accessible, and aesthetically cohesive text across interfaces.

Core Features & Use Cases

• Font selection strategy to match brand personality (serif, sans, display, mono) and ensure readable hierarchy.
• Typographic scale definitions and responsive typography techniques (clamp, fluid sizes) to maintain consistency across devices.
• Font pairing principles and practical examples for editorial, UI, and marketing content.

Quick Start

• Define a two-font system (headings sans-serif, body serif or vice versa) and establish a base font size (e.g., 16px).
• Create a typographic scale using a chosen ratio (e.g., Major Third, 1.25) and implement with CSS variables and Tailwind utilities.
• Add accessibility checks for contrast, line height, and reading ease across breakpoints.