<div>
   <p class="big">This paragraph is bigger</p>
   
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem sequi voluptatem officia ut! Alias, officia numquam incidunt animi culpa suscipit, perferendis quaerat aliquid, nemo molestiae nihil nobis perspiciatis consequatur natus iste itaque quisquam repudiandae debitis. Facilis perspiciatis itaque necessitatibus nemo.</p>

   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet eos consequatur hic? Vero, voluptatem ducimus ex modi rem ipsa.</p>
 </div>

div {
  margin: auto;
  padding: 0 10px;
  border: 1px solid black;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
}

.big{
  font-size:2em;
}

function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
  const root = document.querySelector("html");
  const pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));

  const minWidth = minWidthPx / pixelsPerRem;
  const maxWidth = maxWidthPx / pixelsPerRem;

  const slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
  const yAxisIntersection = -minWidth * slope + minFontSize;

  return `clamp(${minFontSize}rem, ${yAxisIntersection}rem + ${
    slope * 100
  }vw, ${maxFontSize}rem)`;
}

function calculateCh(element, fontSize) {
  const zero = document.createElement("span");
  zero.innerText = "0";
  zero.style.position = "absolute";
  zero.style.fontSize = fontSize;

  element.appendChild(zero);
  const chPixels = zero.getBoundingClientRect().width;
  element.removeChild(zero);

  return chPixels;
}

const div = document.querySelector("div");
div.style.fontSize = clampBuilder(320, 960, 1, 3);
div.style.width = `${(320 / calculateCh(div, "1rem")) * 0.6}ch`;