CSS font-size-adjust Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page styles */
body {
  font-family: Arial, sans-serif;
  background: #f6f8fb;
  color: #222;
  margin: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.example {
  max-width: 900px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.box {
  flex: 1;
  background: #fff;
  border: 1px solid #e1e6ef;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(20, 30, 40, 0.04);
}

.box h2 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #333;
}

/* The text we want to compare */
.compare {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
}

/* Left: default (no font-size-adjust applied) */
.no-adjust .compare {
  /* no font-size-adjust here  -  uses font's default metrics */
}

/* Right: apply font-size-adjust to preserve x-height (example value 0.5) */
.with-adjust .compare {
  font-size-adjust: 0.5;
}

/* Small explanatory note */
.note {
  margin-top: 14px;
  font-size: 13px;
  color: #666;
}
</style></head><body><div class="example">
    <h1>font-size-adjust demo</h1>
    <div class="row">
      <div class="box no-adjust">
        <h2>Without font-size-adjust</h2>
        <p class="compare">The quick brown fox jumps over the lazy dog  -  serif fallback.</p>
      </div>
      <div class="box with-adjust">
        <h2>With font-size-adjust: 0.5</h2>
        <p class="compare">The quick brown fox jumps over the lazy dog  -  serif fallback.</p>
      </div>
    </div>
    <p class="note">Both paragraphs use a serif font stack. The right column sets font-size-adjust to preserve x-height consistency across fonts.</p>
  </div></body></html>