Font Pairing Basics
Heading + Body Combinations
Effective pairings:- Serif heading + Sans-serif body: Classic, professional
- Sans-serif heading + Sans-serif body: Modern, clean
- Display heading + Simple body: Creative, bold
Recommended Pairings
Popular combinations that work well:- Playfair Display + Source Sans Pro
- Montserrat + Open Sans
- Roboto Slab + Roboto
- Poppins + Inter
- Lora + Nunito
Font Sizing Guidelines
Hierarchy
Establish clear visual hierarchy:- H1: 48-64px (page titles)
- H2: 36-48px (section headings)
- H3: 24-32px (subsections)
- Body: 16-18px (readable text)
- Small: 14px (captions, metadata)
Mobile Considerations
Adjust for smaller screens:- Reduce heading sizes by 20-30%
- Keep body text at 16px minimum
- Increase line height for readability
Line Height and Spacing
Line Height
Optimal line heights:- Headings: 1.1-1.3
- Body text: 1.5-1.7
- Long paragraphs: 1.6-1.8
Letter Spacing
Adjust for readability:- Headings: Slightly tighter (-0.02em)
- Body: Normal (0)
- All caps: Wider (0.05-0.1em)
Readability Tips
Line Length
Optimal characters per line:- Desktop: 60-80 characters
- Mobile: 40-60 characters
Contrast
Ensure sufficient contrast:- Dark text on light background
- Minimum 4.5:1 contrast ratio
- Avoid pure black on pure white
Paragraph Length
Keep paragraphs scannable:- 3-4 sentences maximum
- Use subheadings to break content
- Include bullet points for lists
Using Theme Settings
In Lindo.ai, customize typography:- Open website editor
- Go to Settings → Theme
- Select heading font
- Select body font
- Preview changes
Common Mistakes to Avoid
- Too many different fonts (stick to 2-3)
- Text too small on mobile
- Insufficient line height
- Poor contrast ratios
- Inconsistent sizing
- Decorative fonts for body text