1

I have a strange problem with font rendering in firefox and chrome. In chrome the font seems to be slightly large (not so apparent though). Due to that it comes in another line. The screenshots are attached below (First image is chrome, second is firefox).

I'm using bootstrap 3.3.6, font-awesome 4.6.1, jquery-1.11.2.min.js and prettyphoto in the page.

I'm using font-size:16px (Also I tried 1em), font-weight: 400, text-rendering: optimizelegibility, line-height:1.6 for the 'p' tag

and font-family:Arial,Helvetica,sans-serif, and font-style :normal inherited from the 'body'

the 3 columns are col-md-4 of bootstrap, and the layout in firebug and developer toolbar shows it has a width of 310px which should be (with 15px padding).

CSS is like this

body{ color:#333;cursor:default;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;line-height:22px;position:relative;margin:0; background:#153b5d url(../img/bg.png) repeat-x;}

p{font-family:inherit;font-size:1em;font-weight:400;line-height:1.6;text-rendering:optimizelegibility;}

Could anybody please tell me what I am doing wrong. Thanks.

As in Google chrome Version 51.0.2704.103 m

As in Firefox 47.0

Edit: I'm trying to put this as a snippet.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<style>
  *,
  a:hover,
  a:active,
  a:focus {
    outline: 0;
  }
  body {
    color: #333;
    cursor: default;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    margin: 0;
    background: #153b5d url(../img/bg.png) repeat-x;
    font-size: 16px;
  }
  p {} .container {
    background: #FFF;
    max-width: 1020px;
  }
</style>


<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>For a long lasting freshness feeling; Removes stubborn odour from textiles.</p>
    </div>
    <div class="col-md-4">
      <p>Unpretty deo and sweat stains on your shirt?
        <br>Now Dr. Beckmann stain spray deo &amp; sweat provides a way out.</p>
    </div>
    <div class="col-md-4">
      <p>Every stain is different; For each stain the perfect specialist.</p>
    </div>
  </div>
</div>
Mathew
  • 168
  • 2
  • 12
  • 3
    You're not doing anything wrong, different browsers render fonts differently, there's always a minor difference between them in various aspects. Please take a look at this other question, it might help: http://stackoverflow.com/questions/4899792/font-size-issues-comparing-chrome-and-firefox – Forty Jul 19 '16 at 14:44
  • And that minor difference just killed my layout. I've given a min-height to the divs but in chrome, the layout is taller than min-height – Mathew Jul 19 '16 at 14:47
  • Please post your HTML too Mathew. Better yet reproduce the problem with HTML / CSS – Lowkase Jul 19 '16 at 14:56
  • I've added the snippet. You may please compare it in chrome and firefox. as said by @Forty I may have to live with that. Just increase my min-height and save some time :) – Mathew Jul 19 '16 at 15:16
  • What I'd personally do is make the font size slightly smaller so it fits on both, or make the container larger (10-20px might be enough). If you're working on FF first, reminding yourself to let a bit more space for chrome in cases like these is a simple way to avoid hitting this problem. – Forty Jul 19 '16 at 15:25

3 Answers3

1

Added as an answer as I can't comment - but have you checked both browsers are on the same 'zoom level' (cmd + 0 on mac)?

JT91
  • 45
  • 7
  • I have tested this in both Chrome and Firefox on OSX and both browsers appear to behave the same way - as per your chrome example – JT91 Jul 19 '16 at 15:43
  • I'm in Windows 7. And the zoom level is 100%. Maybe other windows users could check the above snippet in full screen and confirm @JT91 . – Mathew Jul 19 '16 at 15:45
  • @Mathew I can recreate the problem if I remove your max width value on the container, and resize the screen to below 1200px (however it is consistent between the two browsers) - can you confirm if this is the case? It appears as if the containers are not the same size on your screenshots? – JT91 Jul 19 '16 at 15:56
  • http://codepen.io/anon/pen/ZOAmVW @Mathew Does this reproduce the issue your end? – JT91 Jul 19 '16 at 16:04
0

Set your default font in the BODY element. P will inherit the font settings by default.

Are you using a normalize.css? If you aren't look into including one in your project. Each browser has slightly different base CSS values. Normalize will set base CSS values so they are similar across all browsers.

I would try something like this:

body { 
    color:#333;
    cursor:default;
    font-family:Arial,Helvetica,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size: 16px;
    position:relative;
    margin:0; 
    background:#153b5d url(../img/bg.png) repeat-x;
    text-rendering:optimizelegibility;
}

p {

}
Lowkase
  • 5,631
  • 2
  • 30
  • 48
  • A reset is definitely useful, but it is not the cause nor solution of chrome's fonts being larger. Your best bet at fixing it is making chrome fonts smaller without affecting firefox. – Forty Jul 19 '16 at 14:51
  • That would be a complete hack. Different browsers have slightly different rendering outputs so we might be able to chalk it up to that. If its something beyond the renderer then normalizing out the CSS is the best bet to get it "close" to pixel perfect. Changing font sizes based on browser type is a backwards approach. – Lowkase Jul 19 '16 at 14:54
  • 1
    Regarding reset.css, I think that's done in bootstrap by default. Is that right?. By the way, I tried @Lowkase answer, but without success. – Mathew Jul 19 '16 at 14:55
  • If the difference bothers him that much, it's an option. A reset does not change the size difference. When I'm making a site, I simply leave a slightly larger space than would be necessary to account for this. – Forty Jul 19 '16 at 14:58
  • I agree with you on the reset and from your comments to the question that its probably the renderer. I would not suggest to him though to make browser specific font-sizes... that path eventually leads to a codebase that would be very painful to maintain. – Lowkase Jul 19 '16 at 15:00
  • Agreed, "possible but not recommended". :) – Forty Jul 19 '16 at 15:05
0

I feel there is no use in trying to sort this out. A simple pen at http://codepen.io/anon/pen/dXdwmQ shows that the fonts are rendered differently. Even with reset.css. I'm checking in Windows 7. I think mac renders it correctly.

<link href="httpshttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<style>
  body {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    background:#fff;
    font-size: 16px;
  }
</style>

<p>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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Good to know at least now. Lesson learned :)

Mathew
  • 168
  • 2
  • 12