<h1>Adjust font size dynamically with clamp()</h1>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;

  gap: 10px;
}

:root {
  --maxViewportWidth: 52.5;
  --minViewportWidth: 22.5;

  --minFontSize: 1;
  --maxFontSize: 3.5;

  --f-slope: (
    (var(--maxFontSize) - var(--minFontSize)) /
      (var(--maxViewportWidth) - var(--minViewportWidth))
  );
  --yAxisIntersection: (
    -1 * var(--minViewportWidth) * var(--f-slope) + var(--minFontSize)
  );

  --clamp: clamp(
    var(--minFontSize) * 1rem,
    var(--yAxisIntersection) * 1rem + (var(--f-slope) * 100vw),
    var(--maxFontSize) * 1rem
  );
}

h1 {
  font-size: var(--clamp);
  color: #fff;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.