title: How to get even spacing around different fonts?
body: <p>Different fonts sit differently within these boxes:</p>
  
  <p><img src="https://i.stack.imgur.com/3ZuQb.png" alt="enter image description here"></p>
  
  <p>I'm trying to find a way to make the padding "around" the text the same no matter what font is chosen. So the space between the bottom of the <code>y</code> and the border should be the same as the top of the <code>T</code> and the border. </p>
  
  <p>(I hope that makes sense?)</p>
  
  <p>I can manually adjust line heights/paddings to make each font sit nicely in the middle of the box, but it would be nice if there was some automatic way to do this.</p>
  
  <p>jsfiddle for that screenshot: <a href="http://jsfiddle.net/dtbaker/4qkv2ncL/2/" rel="nofollow noreferrer">http://jsfiddle.net/dtbaker/4qkv2ncL/2/</a></p>
  
  <p>html: </p>
  
  <pre><code>&lt;div id="bg"&gt;
      &lt;div class="text"&gt;
          &lt;span&gt;Asdgh YiyjJT&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="text"&gt;
          &lt;span class="font1"&gt;Asdgh YiyjJT&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="text"&gt;
          &lt;span class="font2"&gt;Asdgh YiyjJT&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="text"&gt;
          &lt;span class="font3"&gt;Asdgh YiyjJT&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Special+Elite:400,700,400italic,700italic|Lora:400,700,400italic,700italic|Lobster:400,700,400italic,700italic');
  
  #bg{ background-color: #000; padding:20px; }
  .text{
      padding:20px;
  }
  .text span{
      color:#CCC;
      background:#FFF;
      font-size:60px;
      font-weight:bold;
      line-height:1em;
      padding:2px;
  }
  .text span.font1{
      font-family:"Special Elite";
  }
  .text span.font2{
      font-family:"Lora";
  }
  .text span.font3{
      font-family:"Lobster";
  }
  </code></pre>