| 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: | |
| ```css | |
| /* 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. | |