font-optical-sizing

font-optical-sizing: auto;

font-optical-sizing: none;

<section id="default-example">
  <div id="example-element">
    <h2>Chapitre 3</h2>
    <p>
      Ce jeudi-là, quelque chose se déplaçait silencieusement à travers
      l'ionosphère, à plusieurs kilomètres au-dessus de la surface de la
      planète&nbsp;; plusieurs choses en fait, plusieurs douzaines de grosses
      choses jaunes et massives en forme de dalles, aussi grandes que des
      immeubles de bureaux, silencieuses comme des oiseaux.
    </p>
  </div>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

#example-element {
  font-family: "Amstelvar", serif;
  text-align: left;
}

#example-element h2 {
  font-size: 36px;
}

#example-element p {
  font-size: 12px;
}

/* Valeurs avec un mot-clé */
font-optical-sizing: none;
font-optical-sizing: auto; /* valeur initiale */

/* Valeurs globales */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: revert;
font-optical-sizing: revert-layer;
font-optical-sizing: unset;

<p class="optical-sizing">
  Ce paragraphe est dimensionné pour une meilleure lecture. C'est le
  comportement par défaut.
</p>

<p class="no-optical-sizing">
  Ce paragraphe n'est pas adapté pour une meilleure lecture. Vous devriez voir
  une différence avec les navigateurs qui prennent en charge cette
  fonctionnalité.
</p>

@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: "Amstelvar", serif;
}

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