File size: 1,156 Bytes
292d92c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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.
|