Body Typography

Configure the typography settings for body text throughout your BuddyX Pro website. These settings control the primary reading experience for your visitors.

Body typography configuration in the WordPress Customizer

Accessing Typography Settings

1. Go to Appearance > Customize
2. Navigate to Typography > Body Typography

Body Font Settings

Font Family

Setting	Description	Default
Font Family	Primary body font	System Default
Font Source	Google Fonts or System Fonts	Google Fonts

Available Font Sources:

• Google Fonts – 1000+ web fonts with automatic loading
• System Fonts – Native fonts (faster loading, no external requests)

Popular Body Font Choices:

• Open Sans – Clean and highly readable
• Roboto – Modern and versatile
• Lato – Friendly and professional
• Source Sans Pro – Adobe’s open-source option
• Nunito – Rounded, friendly appearance

Font Size

Setting	Description	Default
Base Font Size	Root font size	16px
Mobile Font Size	Size on mobile devices	15px
Tablet Font Size	Size on tablet devices	15px

Responsive Typography: BuddyX Pro automatically adjusts font sizes across breakpoints:

• Desktop (>1024px): Base font size
• Tablet (768-1024px): Tablet font size
• Mobile (<768px): Mobile font size

Font Weight

Setting	Options	Default
Font Weight	100-900, Normal, Bold	400 (Normal)

Weight Scale:

• 100 – Thin
• 200 – Extra Light
• 300 – Light
• 400 – Normal/Regular
• 500 – Medium
• 600 – Semi Bold
• 700 – Bold
• 800 – Extra Bold
• 900 – Black

Line Height

Setting	Description	Default
Line Height	Space between lines	1.7

Recommendations:

• Body text: 1.5 – 1.8
• Dense content: 1.4 – 1.5
• Spacious layout: 1.8 – 2.0

Letter Spacing

Setting	Description	Default
Letter Spacing	Space between characters	0px

Usage:

• Normal text: 0 to 0.5px
• Uppercase text: 1-2px improves readability
• Negative values: Tighten text for headings

Text Colors

Body Text Color

Setting	Description	Default
Text Color	Primary body text color	#333333
Link Color	Hyperlink text color	Primary Color
Link Hover	Link hover state	Primary Hover

See Color Scheme Settings for complete color configuration.

Font Loading Optimization

BuddyX Pro optimizes Google Fonts loading for performance:

Preconnect

Automatically adds DNS preconnect for faster font loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Font Display

Option	Behavior
Swap	Show fallback font, swap when loaded (default)
Block	Hide text until font loads
Fallback	Brief block, then fallback if slow
Optional	Use if cached, otherwise fallback

Recommendation: Use swap for best user experience and Core Web Vitals.

Subsetting

BuddyX Pro requests only necessary character subsets:

• Latin (default)
• Latin Extended (European languages)
• Cyrillic (Russian, etc.)
• Greek
• Vietnamese

System Font Stack

When using system fonts, BuddyX Pro uses this optimized stack:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Benefits:

• Zero external requests
• Fastest possible loading
• Native look and feel per OS
• Excellent readability

Configuration Examples

Example 1: Modern Blog

Font Family: Inter
Font Size: 17px
Font Weight: 400
Line Height: 1.75
Letter Spacing: 0

Example 2: Corporate Site

Font Family: Source Sans Pro
Font Size: 16px
Font Weight: 400
Line Height: 1.6
Letter Spacing: 0.2px

Example 3: Community Platform

Font Family: Nunito
Font Size: 15px
Font Weight: 400
Line Height: 1.7
Letter Spacing: 0

Accessibility Considerations

Minimum Font Size

• Body text: Minimum 16px recommended
• Never below 14px for readability
• Consider users with visual impairments

Contrast Ratio

Ensure text meets WCAG 2.1 requirements:

• Normal text: 4.5:1 minimum contrast
• Large text (18px+): 3:1 minimum contrast

Line Length

Optimal reading experience:

• 45-75 characters per line
• Controlled by container width, not font settings

Troubleshooting

Font Not Loading

Problem: Selected Google Font doesn’t appear.

Solutions:

1. Check internet connectivity
2. Verify font name is spelled correctly
3. Clear browser cache
4. Check for ad blockers blocking Google Fonts
5. Try a different font to test

Font Appears Different Than Preview

Problem: Font looks different on live site.

Solutions:

1. Different operating systems render fonts differently
2. Check font weight is available for chosen font
3. Verify font-smoothing CSS isn’t conflicting
4. Some fonts have limited weight options

Performance Impact

Problem: Fonts slowing down page load.

Solutions:

1. Limit to 2-3 font families maximum
2. Use font-display: swap
3. Consider system fonts for body text
4. Preload critical fonts
5. Use variable fonts when available

Font Not Matching Design

Problem: Font looks too light or heavy.

Solutions:

1. Adjust font weight setting
2. Some fonts have different weight distributions
3. Check if font supports the weight you need
4. Consider a different font with better weight options

Related Documentation

• Heading Typography – H1-H6 font settings
• Google Fonts Integration – Font loading details
• Color Scheme Settings – Text colors

---

Need Help?

• Visit our Documentation Portal
• Contact Support at support@wbcomdesigns.com