Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
You’re right! Choosing the right font sizes and typography settings is crucial for readability and responsiveness. Here’s a detailed guide on the best font sizes for H1, H2, H3, paragraph text, and mobile-friendly adjustments:
Best Font Sizes & Typography Settings for a WordPress Website
1. Font Choices (General Recommendations)
- Sans-serif fonts are preferred for modern, clean, and readable web designs.
- Best options: Roboto, Open Sans, Lato, Montserrat, Poppins, Inter, Nunito
- Serif fonts can be used for a classic, professional look.
- Best options: Merriweather, Playfair Display, Georgia
2. Heading (H1, H2, H3, H4, H5, H6) & Paragraph Font Sizes
Element | Desktop Font Size | Mobile Font Size | Recommended Line Height |
---|---|---|---|
H1 (Main Heading) | 36-48px | 28-36px | 1.2 – 1.3 |
H2 (Section Title) | 28-36px | 22-28px | 1.3 – 1.4 |
H3 (Subheadings) | 22-28px | 20-24px | 1.4 – 1.5 |
H4 (Small Subheadings) | 18-22px | 16-20px | 1.4 – 1.6 |
H5 (Minor Headings) | 16-18px | 14-16px | 1.5 – 1.6 |
H6 (Smallest Headings) | 14-16px | 12-14px | 1.5 – 1.7 |
Paragraphs (Body Text) | 16-18px | 14-16px | 1.6 – 1.8 |
Button Text | 14-18px | 14-16px | N/A |
3. Mobile-Friendly Typography Tips
- Use REM instead of PX:
1rem = 16px
(default browser size).- Set headings and paragraph sizes in REM to make them responsive.
- Set a max-width for text:
- Don’t let text stretch too wide; keep line length around 60-75 characters.
- Use fluid typography:
- Example CSS for responsive text:
h1 { font-size: clamp(32px, 5vw, 48px); } p { font-size: clamp(14px, 1.2vw, 18px); }
- Example CSS for responsive text:
- Avoid too many font styles:
- Stick to 1-2 font families for a clean design.
- Ensure contrast for readability:
- Use dark text on a light background or vice versa.
- WCAG recommends a contrast ratio of at least 4.5:1 for body text.
4. Example Setup for WordPress Customizer
If you’re using a theme like Astra, GeneratePress, or Elementor, you can set these in:
- Appearance → Customize → Typography
- If using a page builder (Elementor, WPBakery), go to Theme Builder Typography Settings
By following these font sizes and mobile-friendly typography best practices, your WordPress site will be visually appealing and highly readable across all devices! 🚀