<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.