Global Settings
Minor 2nd 1.067
Major 2nd 1.125
Minor 3rd 1.2
Major 3rd 1.25
Perf. 4th 1.333
Aug. 4th 1.414
Perf. 5th 1.5
Golden 1.618
Tip: clamp()’s preferred value uses a linear slope across the viewport range to land exactly on min/max at the chosen breakpoints.
Live Preview
1024 px
Resize with the preview slider to simulate different screens.
Heading One — Elegant Fluid Scale
Heading Two — Consistent Rhythm
Heading Three — Balanced Hierarchy
Heading Four — Clear Sections
Heading Five — Subtle Emphasis
Heading Six — Fine Labels
Body text: Great typography balances readability with personality. This preview reflects the size at the simulated viewport while the CSS output uses clamp() for true fluid behavior.
Accessibility tips
- Use line-height around 1.4–1.6 for body copy to enhance readability.
- Avoid overly tight letter-spacing for longer text to preserve legibility.
- Test with real content and headings across breakpoints.
These tips are general guidelines; validate with audits and WCAG checks.
Global CSS Output
How to use globally in Divi: Paste into Divi → Theme Options → Custom CSS to set sitewide fluid typography, then verify in templates and modules.
Divi 5 Module Values Table
In a module’s Design → Heading Text or Text → Font Size, paste the “Value to Copy” for the matching element; only Font Size is shown as requested.
| Element | Property | Value to Copy |
|---|