fit-text

by WebComponents

HTML

<script src="https://fit-text.github.io/element.js"></script>

<fit-text>FUTURE FEATURE</fit-text>
<fit-text>ALAS WE LIVE IN A WORLD WIDE WEB WORLD</fit-text>
<fit-text>WHERE FUTURISTIC SOLUTIONS</fit-text>
<fit-text>HAVE TO BE CREATED</fit-text>
<fit-text>WITH AVAILABLE TECHNOLOGIES</fit-text>
<fit-text>UNTIL NEW CSS</fit-text>
<fit-text>IS SUPPORTED BY ALL BROWSERS</fit-text>
<fit-text>JAVASCRIPT CAN DO THE JOB</fit-text>
<fit-text>WRAPPED IN WEB COMPONENTS</fit-text>

<style>
  body {
    font: 16px arial;
    padding:2em;
    background: #eee;
  }
  :nth-child(2) {
    color: oklch(58% 47% 26deg);
    font-variation-settings:
      "wght" 900,
      "wdth" 130;
  }
  :nth-child(3) {
    color: oklch(75% 32% 74deg);
    font-variation-settings:
      "wght" 200,
      "wdth" 100;
  }
  :nth-child(4) {
    color: oklch(90% 45% 106deg);
    color: darkgoldenrod;
    font-variation-settings:
      "wght" 50,
      "wdth" 70;
  }
  :nth-child(5) {
    color: oklch(67% 32% 234deg);
    font-variation-settings:
      "wght" 900,
      "wdth" 130;
  }
  :nth-child(6) {
    color: oklch(62% 45% 141deg);
    font-variation-settings:
      "wght" 600,
      "wdth" 250;
  }
  :nth-child(7) {
    color: oklch(52% 49% 323deg);
    font-variation-settings:
      "wght" 400,
      "wdth" 100;
  }
  :nth-child(8) {
    color: oklch(52% 49% 323deg);
    font-variation-settings:
      "wght" 900,
      "wdth" 130;
  }
  :nth-child(9) {
    color: oklch(79% 0% 68deg);
  }
</style>