FitText

Trent was getting into Responsive Web Design and needed a way to make text squishy, sort of like how we used to do in Flash. So I made it for him using a little bit of jQuery and we open sourced it.

There were couple plugins at the time that exact-sized your text to the parent, but FitText took a slightly different approach by setting up some ratio-based resizing based on the parent. Less math, produced a different effect, but the results were very squishy and that’s what mattered most.

I’m happy to report that you don’t need FitText anymore and can now do this in CSS without FitText using clamp() and cqi container-query inline units.

.my-text {
  --min-font-size: 1rem;
  --max-font-size: 3rem;
  --ratio: 10cqi;
  font-size: clamp(var(--min-font-size), var(--ratio), var(--max-font-size));
}