<h1>Responsive text</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
* {
  --fluid-size: var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) * ((100vw - 420px) / (1200 - 420));
}

h1 {
  --min-font-size: 30;
  --max-font-size: 70;
  font-size:
    clamp(
        var(--min-font-size) * 1px,
        var(--fluid-size),
        var(--max-font-size) * 1px
    );
}

p {
  --min-font-size: 16;
  --max-font-size: 30;
  font-size:
    clamp(
        var(--min-font-size) * 1px,
        var(--fluid-size),
        var(--max-font-size) * 1px
    );
}







html,
body {
  height: 100%;
}

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

External CSS

  1. https://codepen.io/dannievinther/pen/af7e27ae86cdc49fbf85e54ae30c50eb

External JavaScript

This Pen doesn't use any external JavaScript resources.