title: Traditional leading and CSS line-height
body: <p>CSS specification states that line-height should be applied to text by dividing the specified value by two and applying the result above and below a line of text. </p>
  
  <p>This varies significantly from the traditional understanding of leading, which usually means that spacing is 'added' only above the line of text. (I know this is not 100% correct, because actually line-height doesn't add space, but sets the height of the line; however, this way it's simpler to describe the problem).</p>
  
  <p>Consider this example markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
      &lt;style type="text/css"&gt;
      p
          {
          margin:0;
          font-size: 13pt;
          line-height: 15pt;
          }
      h1
          {
          margin:0;
          font-size: 21pt;
          line-height: 30pt;
          }
      &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;h1&gt;Title&lt;/h1&gt;
      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.&lt;/p&gt;
      &lt;p&gt;Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).&lt;/p&gt;
      &lt;p&gt;It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If line-height was equal to traditional understanding of leading, then the distance between <code>&lt;h1&gt;</code> and first <code>&lt;p&gt;</code> would be equal to the distance between <code>&lt;p&gt;</code>'s, because this distance is defined by the leading. However, this is not the case. </p>
  
  <p>While distance between <code>&lt;p&gt;</code>s remains consistent (<code>p's line-height - p's font-size = 15 - 13 = 2pt</code>), distance between <code>&lt;h1&gt;</code> and the first <code>&lt;p&gt;</code> is different: it is equal to <code>(p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt</code>. </p>
  
  <p>This can be easily noticed by naked eye if the above markup is processed with a browser. </p>
  
  <p>The problem is that traditional way of maintaining vertical visual rhythm on a page is by setting leading of elements in multiples of base leading. This method is inapplicable in CSS, as shown above.</p>
  
  <p>I have 3 questions:</p>
  
  <ol>
  <li>Is my understanding of line-height, leading and their differences correct?</li>
  <li>Is there a way to maintain vertical rhythm with CSS (by mimicing traditional leading with CSS or not)?</li>
  <li>(Bonus question) What was the reasoning behind making line-height so different from leading? </li>
  </ol>
  
  <p><strong>UPDATE:</strong> thank you so much for your input! Please note that I suggested my own solution and I'd be very grateful for any comments on it: <a href="https://stackoverflow.com/a/8335230/710356">https://stackoverflow.com/a/8335230/710356</a></p>