0

This may be a noob question, but I can't get it to look the same in every browser. What am I doing wrong here? I want to display the text like it is in Firefox, in all browsers.

See: Firefox:

blabla http://piclair.com/data/ho0b9.jpg

Chrome:

Chrome http://piclair.com/data/mx336.jpg

Safari:

Safari http://piclair.com/data/q5ygn.jpg

My CSS:

#myslogan {
float: left;
margin-top: 50px;
margin-left: 0px;
width: 290px;
height: 75px;
background: url('../images/subhlogobg.png') no-repeat;
padding: 3px 0 0 11px; 
line-height: 35px;
}

p.subs {
font-weight: bold;
display: inline;
color: #F0821F;
font-size: 23px;
}

.harabara {
list-style: none;
font-family: 'harabararegular';
letter-spacing:1px;
}

My HTML:

<div id="myslogan" class="harabara">
    <p class="subs">Logo en huisstijl ontwerp <br /> 
    voor een scherpe prijs!
    </p>
</div>
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
Forza
  • 1,619
  • 3
  • 28
  • 49
  • 2
    fonts simply don't all look the same in all browsers. If you really want it to look exactly the same. you would need to make an actual image. – Timmetje Jun 16 '13 at 12:19
  • 1
    You aren't doing anything wrong. Each browser has its own rendering engine, which impacts how text is displayed more than any other aspect of web design. Embrace the fact that text will look different, and design accordingly. – cimmanon Jun 16 '13 at 12:19
  • That's odd. I use the same font on the slogan for my homepage, and there it looks exactly the same in all browsers.. – Forza Jun 16 '13 at 12:20
  • Is your slogan bold or normal weight? – Marc Audet Jun 16 '13 at 12:25
  • would a `* {margin: 0; padding: 0}` at the top of your CSS help at all? – Christopher Jun 16 '13 at 12:28
  • There's already a margin like that :) But @Marc Audet's suggestion to turn of bold really helped me, apparantly different browsers handle bold with even more difference than they do with the font itself. Now it looks much better. I call it close enough :) – Forza Jun 16 '13 at 12:30

4 Answers4

2

You defined your parent container #myslogan with a fixed width.

If you have a large enough font, and a long enough line of non-breaking text, the content can overflow.

Different browsers have different default fonts (hence letter size/spacing) so the line width will vary across platforms.

Also, different browsers create bold lettering differently, so turn off bold to see what happens.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • I have turned off bold and now it looks much more the same in all browsers. Thx for the suggestion! – Forza Jun 16 '13 at 12:28
  • 1
    You can try `font-weight: 700` to define a more generalized bold text. The numbers increment by 100 from 100 to 900; 100 being thin, 400 being normal and 700 being bold. Play around with those values, maybe you'll like the results better. Also try to normalize the font-size, line-height, etc. in your CSS to make them look more similar in all browsers. – casraf Jun 16 '13 at 12:30
  • If you need bold, try specifying the font weight explicitly, for example `font-weight: 700` – Marc Audet Jun 16 '13 at 12:30
  • font-weight does work in Firefox, in safari it breaks everything, and in chrome it does absolutely nothing. I think I might better leave it without any bold applied :) – Forza Jun 16 '13 at 12:33
1

From the symptoms, it seems that you are using a “harabararegular” font, presumably as a downloadable font, and you are using a regular (not bold) typeface. Asking browsers to bold it will result in algorithmic bolding (thickening of strokes); the results are typographically poor and vary by browser. (There are many other causes of font rendering differences, but this one is crucial here.)

Thus, try and find a typeface that suits your needs as-is, as designed by a typographer. It should also have suitable spacing so that you do not need letter-spacing, which may also cause differences between browsers.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Very true. As @GCyrillus pointed out I can better use a different bold font for this matter instead of regular. I will use this in the future ;) Thx Jukka! – Forza Jun 16 '13 at 14:42
0

Different browsers handle fonts in different way. This question might be of your help.

Community
  • 1
  • 1
diggy
  • 351
  • 1
  • 5
  • 23
0

I would give up

  1. font-weight
  2. letter-spacing

And i would use from the beginning the bold font to avoid these big difference. http://www.dafont.com/harabara.font?text=Logo+en+huisstijl+ontwerp&psize=s test your text from there and see what difference it makes, there will be difference anyway, browser do not draw and render police with same methods.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129