🎨 Typography & Font Settings

Typography is just as important as color for creating professional pricing tables. This guide covers everything from font selection to sizing and spacing.

Available Typography Controls

Font Options

• Heading Font: For column titles and prices
• Body Font: For features and descriptions
• Button Font: For call-to-action buttons

Sizing Options

• Heading Size: Typically 24-32px
• Price Size: Usually 32-48px (largest element)
• Body Size: Standard 14-16px
• Button Size: 14-18px

Style Options

• Font Weight: Light (300), Regular (400), Medium (500), Bold (700)
• Letter Spacing: Tighten or loosen character spacing
• Line Height: Space between lines of text
• Text Transform: Uppercase, Lowercase, Capitalize

Selecting Fonts

Using Google Fonts

WP Pricing Tables integrates with Google Fonts (900+ options):

1. Click the font dropdown
2. Search for font name
3. Preview renders instantly
4. Select your choice

Font Pairing Best Practices

Classic Pairings:

• Heading: Montserrat Body: Open Sans
• Heading: Playfair Display Body: Source Sans Pro
• Heading: Raleway Body: Lato

Modern Pairings:

• Heading: Poppins Body: Inter
• Heading: Space Grotesk Body: IBM Plex Sans
• Heading: Outfit Body: Work Sans

Typography Hierarchy

Establishing Visual Hierarchy

Make important elements stand out through size contrast:

1. Price (Largest): 36-48px, bold weight
2. Plan Name (Second): 24-28px, medium/bold weight
3. Features (Standard): 15-16px, regular weight
4. Descriptions (Small): 13-14px, light weight

Example Hierarchy:

Plan Name: 28px, Weight 600, Poppins
Price: 42px, Weight 700, Poppins
Period: 16px, Weight 400, Poppins
Features: 16px, Weight 400, Inter
Descriptions: 14px, Weight 300, Inter
Buttons: 16px, Weight 600, Inter

Font Sizing Guidelines

Desktop Sizes

• Minimum body text: 14px (anything smaller is hard to read)
• Ideal body text: 16px
• Maximum heading: 48px (larger looks unprofessional in tables)

Mobile Sizes

Reduce by 10-20% on mobile:

• Desktop Price: 42px → Mobile: 36px
• Desktop Heading: 28px → Mobile: 24px
• Desktop Body: 16px → Mobile: 14-15px

Advanced Typography

Letter Spacing

Adjust character spacing for impact:

• Headings in UPPERCASE: Increase spacing to 0.05-0.1em
• Prices: Normal spacing (0em)
• Body text: Normal spacing (0em)
• Buttons: Slight increase (0.025em) for readability

Line Height

Proper line spacing improves readability:

• Headings: 1.2-1.3 (tight)
• Prices: 1.0 (no extra space)
• Body text: 1.6-1.8 (generous)
• Feature lists: 1.5 (comfortable)

Accessibility

Readable Font Choices

Some fonts are more accessible than others:

Highly Readable (Recommended):

• Open Sans, Lato, Roboto, Source Sans Pro
• Inter, IBM Plex Sans, Work Sans
• Arial, Helvetica (system fonts)

Avoid for Body Text:

• Script/cursive fonts (hard to read)
• Ultra-thin weights (invisible on some screens)
• Highly decorative fonts (novelty fonts)

Dyslexia-Friendly Options

• OpenDyslexic (designed for dyslexia)
• Comic Sans (surprisingly readable for dyslexic users)
• Verdana (wide character spacing)

Web-Safe Fallbacks

Always specify fallback fonts in case Google Fonts don't load:

font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

This ensures your table remains readable even if custom fonts fail to load.

Common Typography Mistakes

Don't Do This:

• ❌ Using more than 2-3 different fonts
• ❌ Making body text smaller than 14px
• ❌ Using script fonts for body text
• ❌ All caps for long text (hard to read)
• ❌ Mixing too many font weights

Do This Instead:

• ✅ Maximum 2 font families
• ✅ Minimum 14px, ideal 16px for body
• ✅ Save decorative fonts for headings only
• ✅ Use sentence case or title case
• ✅ Stick to 2-3 weights (regular, medium, bold)