title: CSS line-height attribute differences between mobile and desktop
body: <p>I'm having this weird situation when trying to create a text logo for my site, <a href="http://geekket.co/" rel="nofollow noreferrer">http://geekket.co/</a>.</p>
  
  <p>In desktop browsers (Firefox 51, Chrome 56, IE 11.576, Edge 38) the logo works perfectly, it looks pixel perfect as our design document specifies it.</p>
  
  <p>But in mobile, the line-height property seems to work wrongly. Opera renders it fine, but Firefox and Chrome don't work as expected.</p>
  
  <p>Mobile screenshots imgur album because I still have not enough reputation: <a href="https://imgur.com/a/Ij3cF" rel="nofollow noreferrer">http://imgur.com/a/Ij3cF</a></p>
  
  <p>This is the CSS code dedicated to that particular section of the logo:</p>
  
  <pre><code>#LogoGeek {
    display: inline-block;
    background-color: rgb(90, 186, 71);
    font-family: "ForcedSquare";
    font-size: 90px;
    line-height: .72;
    height: .74em;
    padding: 0 .05em 0 .12em;
    vertical-align: middle;
  }
  </code></pre>
  
  <p>"ForcedSquare" is a web font we added to the site.</p>
  
  <p>I fiddled with the Remote Dev Tools ability in Mobile Chrome and found that if I changed line-height to .87, it works as expected, however, I feel that it is a ridiculous fix.</p>
  
  <p>As far as I have read, it seems to be some sort of issue with the particular font. But then why there's no deal with all the different browsers of desktop and/or Opera Mobile, I have to idea.</p>
  
  <p>Is there a better way to adjust it, or make it work properly in all browsers?
  Thank you every one!</p>