rafaelcamargo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font size interpolation</title>
  <style>
    html,
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0;
      width: 100%;
      min-height: 100vh;
      background-color: #0A0E0F;
      color: #DDE0E6;
      font-family: sans-serif;
    }
    h1 {
      margin: 0 0 100px 0;
      font-size: clamp(24px, 4vw, 48px);
    }
    section {
      color: #777B84;
      text-align: center;
    }
    section + section {
      margin-top: 30px;
    }
    section h2 {
      margin: 0 0 10px 0;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    section p {
      margin: 0;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>
    Font size interpolation
  </h1>
  <section>
    <h2>Viewport Width</h2>
    <p id="viewportWidthEl"></p>
  </section>
  <section>
    <h2>Font size</h2>
    <p id="fontSizeEl"></p>
  </section>
  <script>
    (function(){
      function init(){
        calculateDimensions();
        window.addEventListener('resize', calculateDimensions);
      }

      function calculateDimensions(){
        printDimension(getEl('#viewportWidthEl'), window.innerWidth);
        printDimension(getEl('#fontSizeEl'), window.getComputedStyle(getEl('h1')).fontSize);
      }

      function getEl(selector){
        return document.querySelector(selector);
      }

      function printDimension(el, dimension){
        el.innerHTML = parseInt(dimension);
      }

      init();
    }())
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Font size interpolation</title>
	<style>
	html,
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 100%;
	min-height: 100vh;
	background-color: #0A0E0F;
	color: #DDE0E6;
	font-family: sans-serif;
	}
	h1 {
	margin: 0 0 100px 0;
	font-size: clamp(24px, 4vw, 48px);
	}
	section {
	color: #777B84;
	text-align: center;
	}
	section + section {
	margin-top: 30px;
	}
	section h2 {
	margin: 0 0 10px 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	}
	section p {
	margin: 0;
	font-size: 24px;
	}
	</style>
	</head>
	<body>
	<h1>
	Font size interpolation
	</h1>
	<section>
	<h2>Viewport Width</h2>
	<p id="viewportWidthEl"></p>
	</section>
	<section>
	<h2>Font size</h2>
	<p id="fontSizeEl"></p>
	</section>
	<script>
	(function(){
	function init(){
	calculateDimensions();
	window.addEventListener('resize', calculateDimensions);
	}

	function calculateDimensions(){
	printDimension(getEl('#viewportWidthEl'), window.innerWidth);
	printDimension(getEl('#fontSizeEl'), window.getComputedStyle(getEl('h1')).fontSize);
	}

	function getEl(selector){
	return document.querySelector(selector);
	}

	function printDimension(el, dimension){
	el.innerHTML = parseInt(dimension);
	}

	init();
	}())
	</script>
	</body>
	</html>