<div class="slider">
  <div>
    <input type="range" min="1" max="4" step="0.1" value="1" id="font-size-slider">
    <label for="font-size-slider">Font Size: <span id="font-size-display">1rem</span></label>
  </div>
  <div>
    <input type="range" min="1" max="3" step="0.1" value="1" id="line-height-slider">
    <label for="line-height-slider">Line-height: <span id="line-height-display">1</span></label>
  </div>
</div>

<div class="demo">The padding of this box is equal to the relative line-height of the text. this is quite a nice and simple effect. Play around with the line-height custom properties defined in the root to get a better idea...</div>
:root {
  --font-size: 1rem;
  --line-height: 1;
  --padding: 0.8lh; /* Change this value to see the full effect */
}

.demo {
  max-width: 40ch;
  padding: var(--padding);
  background: skyblue;
}

.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rebeccapurple;
  position: fixed;
  top: 0;
  inset-inline: 0;
  padding: 1lh;
  font-size: 1rem;
  line-height: 1rem;
  color: #fff;
  & input {
    accent-color: skyblue;
  }
  > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: sans-serif;
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* quick and dirty js for the sliders */

const fontSizeSlider = document.getElementById("font-size-slider");
const fontSizeDisplay = document.getElementById("font-size-display");
const lineHeightSlider = document.getElementById("line-height-slider");
const lineHeightDisplay = document.getElementById("line-height-display");

fontSizeSlider.addEventListener("input", (event) => {
  fontSizeDisplay.textContent = event.target.value + "rem";
  document.documentElement.style.setProperty(
    "--font-size",
    event.target.value + "rem"
  );
});

lineHeightSlider.addEventListener("input", (event) => {
  lineHeightDisplay.textContent = event.target.value;
  document.documentElement.style.setProperty(
    "--line-height",
    event.target.value
  );
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.