title: Setting different line heights depending on the font
body: <p>I'd like to set different <code>line-height</code> for different fonts from a list fall-back fonts. For example:</p>
  
  <pre><code>body {
      font-family: "Small x-height font", "Larger x-height font", sans-serif;
  }
  </code></pre>
  
  <p>When the preferred <em>Small x-height font</em> is used, I'd like to set <code>line-height</code> to 1.3. When <em>Larger x-height font</em> is used because the preferred font is not available, I'd like to set <code>line-height</code> to 1.5. When both fonts are not available and the sans-serif fallback is used, I'd like to set <code>line-height</code> to <code>normal</code>.</p>
  
  <p>Is this possible using CSS 2.1 or CSS 3 without resorting to JavaScript?</p>
  
  <p><strong>Rationale</strong> The problem is that different fonts have different x-height (the height of lowercase letters such as x relative to the font size). To make text with larger x-height look good, it must be set with a larger line height. The x-height of the default fonts (sans-serif in the example above) is unknown and may differ drastically from the x-height of the font of our choice. So a line height that looks good with our font may look ugly when the font failed to load.</p>