<div id="content" class="wrapper">
  <h1>A large heading</h1>
  <p>Some very small text. It's so small, in fact, that the browser would like to increase the contrast of it by using a thicker stroke on the font glyphs. The change is <em>super</em> subtle for this font, but is more apparent when zoomed in.</p>
  <button id="toggle">Optical sizing on</button>
</div>

@font-face {
  font-family: "Roboto Delta";
  src: url("https://assets.codepen.io/9632/RobotoDelta.woff2") format("woff2");
}

body {
  font-family: "Roboto Delta", sans-serif;
}

.wrapper {
  background: aliceBlue;
  margin: auto;
  max-width: 700px;
  padding: 1.25rem;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 12px;
  line-height: 1.35;
}

.no-optical {
  font-optical-sizing: none;
}

let content = document.getElementById("content").classList;
let button = document.getElementById("toggle");

function toggleOptical() {
  if (content.contains("no-optical")) {
    content.remove("no-optical");
    button.innerHTML = "Optical sizing on";
  } else {
    content.add("no-optical");
    button.innerHTML = "Optical sizing off";
  }
}

button.addEventListener("click", toggleOptical);