Snippet / Theme Options > Custom CSS or child theme stylesheet

Fluid Responsive Typography with clamp()

A modernized Divi typography snippet that uses clamp() to scale body text between readable minimum and maximum sizes.

Use this when the default responsive text controls are too manual. clamp() keeps text within a controlled range while still responding to viewport width.

:root {
  --dfy-body-min: 1rem;
  --dfy-body-fluid: 0.92rem + 0.25vw;
  --dfy-body-max: 1.125rem;
}

body,
.et_pb_text,
.et_pb_blurb_description,
.et_pb_post_content {
  font-size: clamp(var(--dfy-body-min), var(--dfy-body-fluid), var(--dfy-body-max));
  line-height: 1.65;
}

.et_pb_text h1,
.et_pb_post_content h1 {
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4.5rem);
  line-height: 1.05;
}

Notes

• Treat this as a site-level decision. It can fight with manually tuned module font sizes.
• Keep body copy at or above 1rem for readability.
• Use Divi 5’s native CSS support where possible, and reserve this for global rhythm.

Sources

• https://www.cobalt.graphics/divi-css-snippets/
• https://www.elegantthemes.com/documentation/divi/visual-builder/