<h1>Responsive text</h1>
<h2>Second text</h2>
<h3>test</h3>

* {
  /*--responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420)));*/
  --responsive: (var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420));
}

h1 {
  font-size: clamp(25px, calc(25px + (53 - 25) * ((100vw - 420px) / (1200 - 420))), 53px);
}

h2 {
  font-size: clamp(25px, 4.5vw, 53px);
}

/* Optimal solution? */
h3 {
  --min-font: 25;
  --max-font: 53;
  font-size:
    clamp(var(--min-font) * 1px, var(--responsive), var(--max-font) * 1px);
}







html,
body {
  height: 100%;
}

body {
  display: grid;
  place-content: center;
  text-align: center;
}