Sources:

• https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-responsive-fluid-divi-module
• https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
• https://www.w3schools.com/css/css_font_size.asp

Clamp() function

The CSS clamp() function allows web developers to define a value that scales fluidly between a minimum and maximum value, based on the viewport size.

The function looks like this where:

• min_size: the minimum font size, the font will never get smaller then the given size
• preferred_size: the size that scales with the view port width, you can use a calculation here
• max_size: the maximum font size, the font will never get larger then the given size

clamp(min_size, preferred_size, max_size);

Get the preferred_size value

• https://royalfig.github.io/fluid-typography-calculator/ (single clamp)
• https://tst.hrcws.nl/wp-admin/tools.php?page=font-clamp-calculator (WP Script, single and multiple clamp)
• https://fluidtypography.com/ (single clamp + line height)
• https://www.fluid-type-scale.com (creates variables for multiple customizable clamps for body, h1 to h6)

Add to CSS (easy)

• Add the following to the custom css
• Define a single font-size clamp for the base (body) font
• Replace the clamp in the base-font-size variable with the one you defined
• Replace the base-line-height variable value
• et-boc is needed to apply this to Divi only and not to WP Admin area’s
• By default
  • the body and h6 font sizes are the same as the base-font-size
  • the header sizes scale up H5 (* 1.1) to H1 (* 1.5) change the scale as needed
  • the line-height is set as ’em’, so it’s derived from the font size

/* START define font sizes */
:root {
  --base-font-size: clamp(1rem, 0.663vw + 0.845rem, 1.375rem);
  --base-line-height: 1.4em;
}

.et-boc body, 
.et-boc h6 {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}
.et-boc h5 {
  font-size: calc(var(--base-font-size) * 1.1);
  line-height: var(--base-line-height);
}
.et-boc h4 {
  font-size: calc(var(--base-font-size) * 1.2);
  line-height: var(--base-line-height);
}
.et-boc h3{
  font-size: calc(var(--base-font-size) * 1.3);
  line-height: var(--base-line-height);
}
.et-boc h2 {
  font-size: calc(var(--base-font-size) * 1.4);
  line-height: var(--base-line-height);
}
.et-boc h1 {
  font-size: calc(var(--base-font-size) * 1.5);
  line-height: var(--base-line-height);
}
/* END define font sizes */Code language: CSS (css)