Typography Mastery

Create beautiful, readable, and systematic typography for any web project.

Prerequisites

Before setting typography, check for existing design context:

• Read .agents/design-context.md (see design-context): Heading/Body/Mono Font, Base Size, Scale Ratio, Heading/Body Weight. Use them unless the user is explicitly changing them.
• If a design system exists in the codebase, align with its type scale and font stack.
• Note: the design-context "Type Scale Reference" (12/14/16/18/20/24/30/36/48/60/72) is Tailwind's hand-tuned scale, not a strict 1.25 progression. If the project already uses it, keep it; for new work, generate a true modular scale from the saved Scale Ratio (Step 1) and say which one you used.

Step 1: Choose a Type Scale Ratio

The type scale ratio determines the mathematical relationship between sizes. Pick based on the content density and visual character of the project.