title: Issue with custom icon font rendering differently in different browsers
body: <p>Having issues with a custom icon font. It renders differently between Safari and Chrome. It appears to be between 1-2 pixels lower in Safari. Can I somehow have it render the same in both browsers?</p>
  
  <p>Created the icon font by exporting 16 x 16 px SVG from Sketch and then imported them into IcoMoon and put the optimize metrics to 16 automatic.</p>
  
  <p><img src="https://i.stack.imgur.com/zBhRQ.jpg" alt=""> Grid on IcoMoon</p>
  
  <p><img src="https://i.stack.imgur.com/NNF05.jpg" alt=""> Chrome OS X</p>
  
  <p><img src="https://i.stack.imgur.com/xehC1.jpg" alt=""> Safari OS X</p>
  
  <p>Live example: <a href="http://jsfiddle.net/QQ7mV/" rel="nofollow noreferrer">http://jsfiddle.net/QQ7mV/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="" class="button increase"&gt;&amp;#x2b;&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
  }
  @font-face {
      font-family: "icons";
      src: url("http://cl.ly/Qo0T/icons.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
  }
  a {
      display: block;
      text-decoration: none;
      outline: none;
  }
  .button {
      width: 115px;
      height: 37px;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 35px;
      margin: 0 auto 20px auto;
      background-color: #edeef0;
      background-repeat: no-repeat;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -o-border-radius: 4px;
      -ms-border-radius: 4px;
      transition-property: background-color, opacity;
      -webkit-transition-property: background-color, opacity;
      -moz-transition-property: background-color, opacity;
      -o-transition-property: background-color, opacity;
      -ms-transition-property: background-color, opacity;
      transition-duration: 0.2s;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      -ms-transition-duration: 0.2s;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
  }
  .button.increase, .button.decrease {
      display: inline-block;
      vertical-align: top;
      width: 23px;
      height: 23px;
      font-family: "icons";
      font-size: 8px;
      font-weight: normal;
      line-height: 1;
      padding: 8px 0 0 0;
      -webkit-font-smoothing: antialiased;
  }
  .button.increase {
      margin: 13px 5px 0 11px;
  }
  .button.decrease {
      margin: 13px 0 0 0;
  }
  </code></pre>