Optical Size
/* font-optical-sizing can be auto or none */ .container0 * { font-size: 64px; font-optical-sizing: none; }
<div class="container container0"> <p>Optical Size</p> </div>
Optical Size
/* font-optical-sizing can be auto or none */ .container1 * { font-size: 64px; font-optical-sizing: auto; }
<div class="container container1"> <p>Optical Size</p> </div>
Optical Size
/* optical size range is from 8 to 144 */ .container2 * { font-size: 64px; font-variation-settings: 'opsz' 64; }
<div class="container container2"> <p>Optical Size</p> </div>
Optical Size
/* Adjust with slider & custom property */ .container3 * { font-size: 64px; font-variation-settings: 'opsz' var(--text-axis); }
<div class="container container3"> <p>Optical Size</p> </div>
Adjust Optical Sizing: