Why Typography Is Your Most Powerful Design Tool
Typography is responsible for roughly 95% of the communication on any web page — yet it's one of the most overlooked aspects of web design. Getting your type right in Divi doesn't require a design degree; it requires understanding a handful of principles and knowing where to apply them.
Choosing the Right Font Pairing
Divi integrates directly with Google Fonts, giving you hundreds of options. The challenge isn't finding fonts — it's choosing a pairing that works. A reliable approach:
- Headings: Choose a font with personality — a geometric sans-serif, a modern serif, or a display typeface. This is your brand voice.
- Body: Choose a highly readable, neutral font. Inter, Lato, Source Sans Pro, and Open Sans are safe, excellent choices.
- Rule of thumb: Pair a serif heading with a sans-serif body, or a bold display font with a clean neutral. Avoid pairing two similar fonts — the contrast should be obvious.
Strong Font Pairings That Work in Divi
| Heading Font | Body Font | Vibe |
|---|---|---|
| Playfair Display | Source Sans Pro | Elegant, editorial |
| Montserrat | Open Sans | Clean, corporate |
| Plus Jakarta Sans | Inter | Modern, tech-forward |
| Raleway | Lato | Creative, approachable |
Establishing a Clear Type Hierarchy
Visual hierarchy tells readers what to look at first, second, and third. In Divi, you control this through font size, weight, and color. A well-structured hierarchy typically looks like this:
- H1 (Page Title): 48–72px, bold or extra-bold, your heading font
- H2 (Section Heading): 32–40px, semi-bold
- H3 (Subsection): 22–28px, medium weight
- Body Text: 16–18px, regular weight, line height 1.6–1.8
- Captions / Labels: 12–14px, often uppercase with letter spacing
Setting Typography in Divi
You can set typography at three levels in Divi — from broadest to most specific:
- Theme Customizer (Appearance → Customize → Typography): Sets site-wide defaults for all headings and body text. Always start here.
- Module Design Tab: Override typography within individual modules. Useful for hero headlines or special callout text.
- Custom CSS: For fine-grained control — letter spacing on a specific class, font weight on a specific heading level.
Set your base styles in the Customizer first. Only override at the module level when truly necessary to avoid inconsistency.
Line Length: The Overlooked Reading Comfort Factor
Long lines of text are hard to read — the eye struggles to find the start of the next line. Ideal line length for body text is 60–80 characters per line (roughly 45–75 words). In Divi, you can control this by:
- Using multi-column layouts for text-heavy content
- Setting a max-width on text modules in the Advanced tab (e.g.,
max-width: 680px; margin: 0 auto;) - Increasing padding on narrow columns to reduce text width
White Space Is Not Wasted Space
Amateur designs crowd text together. Professional designs breathe. In Divi, increase line height (1.7 is a great starting point for body text), add generous paragraph spacing, and use ample section padding. White space reduces cognitive load and makes your content feel more premium and trustworthy.
Responsive Typography in Divi
Always check your font sizes in Divi's responsive preview. Common adjustments needed:
- H1 on mobile: drop from 60px to 36–40px
- H2 on tablet: reduce from 36px to 28px
- Body text: usually fine at 16px on all devices
Use Divi's responsive font size controls (click the phone/tablet icons next to font size fields) to set device-specific values. This ensures your typography looks intentional and legible on every screen.