leodeslf/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fluid Type</title>
  <style>
    :root {
      --fluid-size: 16px;
    }

    #fluid-text {
      font-size: var(--fluid-size);
    }

    /* Ignore the style below, its just for the feedback. */

    p {
      border-right: 1px solid black;
      margin: 0;
      width: fit-content;
      position: relative;
    }

    p::after {
      content: attr(currentSize);
      position: absolute;
      left: 100%;
    }

  </style>
  <script>
    window.addEventListener('load', () => {
      resetFluidSize();
      window.addEventListener('resize', resetFluidSize);
    });

    const
      a = 14,
      b = 22;

    function resetFluidSize() {
      const
        factor = (window.outerWidth - 1280) / 640,
        lerp = a + (b - a) * factor,
        clamp = Math.max(a, Math.min(b, lerp)),
        fluidSize = `${clamp}px`;

      document.body.style.setProperty('--fluid-size', fluidSize);

      /* Just to update the feedback. */
      document.getElementById('fluid-text').setAttribute('currentSize', fluidSize);
    }
  </script>
</head>

<body>
  <p style="font-size: 14px;" currentSize="14px">
    Lorem ipsum
  </p>
  <p id="fluid-text">
    Lorem ipsum
  </p>
  <p style="font-size: 22px;" currentSize="22px">
    Lorem ipsum
  </p>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Fluid Type</title>
	<style>
	:root {
	--fluid-size: 16px;
	}

	#fluid-text {
	font-size: var(--fluid-size);
	}

	/* Ignore the style below, its just for the feedback. */

	p {
	border-right: 1px solid black;
	margin: 0;
	width: fit-content;
	position: relative;
	}

	p::after {
	content: attr(currentSize);
	position: absolute;
	left: 100%;
	}

	</style>
	<script>
	window.addEventListener('load', () => {
	resetFluidSize();
	window.addEventListener('resize', resetFluidSize);
	});

	const
	a = 14,
	b = 22;

	function resetFluidSize() {
	const
	factor = (window.outerWidth - 1280) / 640,
	lerp = a + (b - a) * factor,
	clamp = Math.max(a, Math.min(b, lerp)),
	fluidSize = `${clamp}px`;

	document.body.style.setProperty('--fluid-size', fluidSize);

	/* Just to update the feedback. */
	document.getElementById('fluid-text').setAttribute('currentSize', fluidSize);
	}
	</script>
	</head>

	<body>
	<p style="font-size: 14px;" currentSize="14px">
	Lorem ipsum
	</p>
	<p id="fluid-text">
	Lorem ipsum
	</p>
	<p style="font-size: 22px;" currentSize="22px">
	Lorem ipsum
	</p>
	</body>

	</html>