Fit Text with CSS Variables

fit-text-with-css-variables.markdown

Fit Text with CSS Variables

A Pen by Shaw on CodePen.

License.

index.html

<div data-fit-text>Fit Text</div>
<div data-fit-text>With CSS Variables</div>
<div data-fit-text>Some longer text that wants to fit, too...</div>
<div data-fit-text>Don't forget this text!</div>
<div data-fit-text>It can work with really long text if you really want, but that's gonna be hard to read...</div>

script.js

[...document.querySelectorAll("[data-fit-text]")].forEach(el => {
  // We just need the length of the string as a CSS variable...
  el.style.setProperty("--length", el.innerText.length);
});

style.css

@import url("https://fonts.googleapis.com/css?family=Poppins:600&display=swap");

[data-fit-text] {
  /* Sized via the viewport, but the --width variable could be set by JS based on the element or parent's width. */
  --width: 100vw;

  /* Adjust scale depending on your exact font.  */
  --scale: 0.9;

  font-size: calc(var(--width) / (var(--length, 1) * 0.5) * var(--scale, 1));

  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 1;
  margin: 1rem 0;
}

/* ---------------------------------- */

html {
  height: 100%;
  display: flex;
}
body {
  margin: auto;
  text-align: center;
}

html {
  background: #fbc490;
  color: #084177;
}