<div class="box">Let's <span style="color: #1F4B3D">C</span><span style="color: #F6C67D">h</span><span style="color: #C6533D">a</span><span style="color: #467DF0;">t</span></div> 

.box {
  background-color: white; 
  width: 100%;
  text-transform: uppercase;
  font-family: arial;
  font-weight: 600;
}

View Compiled
textFit(document.getElementsByClassName('box'), {
  maxFontSize: 400,
  widthOnly: true,
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.js