Demonstration of the combined use of clamp() and a scaling factor on font-size

by David Partyka

HTML

<div class=parent>
  <p class=largest>I am ( usually :) ) the largest paragraph!</p>
  <p class=middle>I am ( usually :) ) the second largest paragraph!</p>
  <p class=smallest>I am ( usually :)  the smallest paragraph!</p>
</div>

CSS

:root {
  --scaling-factor: 1
}

.parent {
  font-size: 30px
}

.largest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%); 
}

.middle {
  font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%); 
}

.smallest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%); 
}

@media (max-width: 1200px) {
  :root {
    --scaling-factor: 0.9
  }
  @media (max-width: 800px) {
    :root {
      --scaling-factor: 0.8
    }
    @media (max-width: 600px) {
      :root {
        --scaling-factor: 0.5 /* won't render this small b/c the floor of clamp() is 60% */
      }
    }
  }
}