JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<article>
  <h1>CSS Clamp Demonstration</h1>
  This is a demonstration of CSS clamp and how you can use it to Goldilocks your text... it's not too big, it's
  not too small, it's just right!
  References are shown below at fixed sizes.
</article>

<div class="small">1.5em example</div>
<div class="large">4.0em example</div>

CSS

article {
  width: 50%;
  margin: 0 auto;
}

article h1 {
  font-size: clamp(1.5em, 4vw, 4em);
  
}

article p {
  font-size: clamp(1em, 3vw, 2em);
}

.small {
  font-size: 1.5em;
  font-size: 4vw;
  text-align: center;
}

.large {
  font-size: 4em;
  font-size: 5vw;
  text-align: center;
}