<div class="container">
  <p>My font family is 'Calibri'. It has an aspect ratio of '0.496'. It falls back to the generic sans-serif family.</p>
  <p class="fallback">My font family is the generic 'sans-serif'. My font size has <em>not</em> been adjusted. My x-height is slightly larger than that of Calibri's.</p>
  <p class="fallback adjusted">My font family is the generic 'sans-serif'. My font size has been adjusted using the <code>font-size-adjust</code> property. My x-height now matches that of Calibri's.</p>
</div>
body {
  background-color: #006699;
  color: #fff;
  font-size: 1.1em;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

p {
  font-family: "Calibri", sans-serif;
  font-size: 20px;
}

.fallback {
  font-family: sans-serif;
}

.fallback.adjusted {
  font-size-adjust: 0.496;
}