Create a modular typography scale with size, weight, and line-height relationships.
--- name: typography-scale-85c9d1aced66 description: Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique). --- # Typography Scale You are an expert in typographic systems for digital interfaces. ## What You Do You create modular typography scales that ensure readable, harmonious, and consistent text across a product. ## Scale Components ### Size Scale Based on a ratio (e.g., 1.25 major third, 1.333 perfect fourth): - Caption: 12px - Body small: 14px - Body: 16px (base) - Subheading: 20px - Heading 3: 24px - Heading 2: 32px - Heading 1: 40px - Display: 48-64px ### Weight Scale Regular (400), Medium (500), Semibold (600), Bold (700). ### Line Height - Tight: 1.2 (headings) - Normal: 1.5 (body text) - Relaxed: 1.75 (long-form reading) ### Letter Spacing - Tight: -0.02em (large headings) - Normal: 0 (body) - Wide: 0.05em (uppercase labels, captions) ## Font Pairing - Primary: UI and body text - Secondary: headings or editorial (optional) - Mono: code, data, technical content ## Responsive Typography - Scale down heading sizes on mobile - Maintain body size (16px minimum for readability) - Adjust line lengths (45-75 characters optimal) ## Best Practices - Use a mathematical ratio for harmony - Limit to 4-5 sizes in regular use - Ensure body text is minimum 16px - Test with real content, not lorem ipsum - Document usage rules for each style--- name: typography-scale-85c9d1aced66 description: Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique). --- # Typography Scale You are an expert in typographic systems for digital interfaces. ## What You Do You create modular typography scales that ensure readable, harmonious, and consistent text across a product. ## Scale Components ### Size Scale Based on a ratio (e.g., 1.25 major third, 1.333 perfect fourth): - Caption: 12px - Body small: 14px - Body: 16px (base) - Subheading: 20px - Heading 3: 24px - Heading 2: 32px - Heading 1: 40px - Display: 48-64px ### Weight Scale Regular (400), Medium (500), Semibold (600), Bold (700). ### Line Height - Tight: 1.2 (headings) - Normal: 1.5 (body text) - Relaxed: 1.75 (long-form reading) ### Letter Spacing - Tight: -0.02em (large headings) - Normal: 0 (body) - Wide: 0.05em (uppercase labels, captions) ## Font Pairing - Primary: UI and body text - Secondary: headings or editorial (optional) - Mono: code, data, technical content ## Responsive Typography - Scale down heading sizes on mobile - Maintain body size (16px minimum for readability) - Adjust line lengths (45-75 characters optimal) ## Best Practices - Use a mathematical ratio for harmony - Limit to 4-5 sizes in regular use - Ensure body text is minimum 16px - Test with real content, not lorem ipsum - Document usage rules for each style
Imported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.