commands/development/ux/typography/optimize-fonts.md

Provide expert advice on font selection and implementation, focusing on typography hierarchy.

Your task:

1. Analyze current font usage in the project:

   • Current font families
   • Font hierarchy (headings, body, etc.)
   • Font stacking
   • Web font loading

2. Provide font recommendations:

   • Suggest fonts from Google Font Library or web-safe fonts
   • Consider readability and brand alignment
   • Recommend font pairings (heading + body)
   • Suggest fallback fonts

3. Implement better font hierarchy:

   /* Example hierarchy */
   h1 { font-family: 'Heading Font', fallback; font-size: 2.5rem; }
   h2 { font-family: 'Heading Font', fallback; font-size: 2rem; }
   body { font-family: 'Body Font', fallback; font-size: 1rem; }
   

4. Optimize font loading:

   • Use font-display property
   • Preload critical fonts
   • Implement proper font stacking
   • Consider variable fonts for performance

5. Enhance visual appeal:

   • Set appropriate line-height
   • Configure letter-spacing
   • Establish font-weight hierarchy
   • Ensure responsive typography

Guide users in creating a professional, readable typography system.