<body>
  <div class="center">
    <label>Simulate user's different default font size</label>
    <input type=number value=16 />
  </div>
  <div class="rectangle">
    <h1>This is an exagerated oversized text</h1>
  </div>
</body>
*{
  margin: 0;
  box-sizing: border-box
}

html{
  font-size: 16px;
}

body{
  background-color: hsl(30, 50%, 50%)
}

body > *{
  margin-bottom: 7vh;
  border: 1px solid black;
}

body > div{
  background-color: hsl(30, 70%, 30%);
  padding-block: 3vh
}

.center{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

body > div.rectangle{
  width: 40%;
  padding-block:.25rem;
  height: 30vh;
  margin-inline: auto
}

body > div.rectangle{
  font-size: 1.25rem;
  text-align: center
}

body > div input,
label{
  font-size: 1rem
}

body > div input{
  width: 4.5em;
  padding-left: 1em
}

@media (max-width: 700px){
  label{
    font-size: .75rem
  }
}
const html = document.querySelector("html");
const input = document.querySelector("input");

input.addEventListener("change", (e) => {
    const tamanho = e.target.value;
    html.style.setProperty("font-size", `${tamanho}px`);
    
  
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.