How Do You Get Consistent Looking Fonts Across All 3 Browsers?

[Greenguy]

Here's screencaps of 3 banner ads in Chrome, Fire Fox, and IE:
http://www.buttonserver.com/font/

Is there a reason the fonts are pretty much all different sizes? I'm using the default settings for each browser (as far as I can tell)

Is there a way to code the pages so that the fonts look the same in each browser?

[housekeeper]

for heading like that I generally just use <h3 style="text-align:.... or <h4 sty... Seems to keep it consistent for me, then again comic sans doesn't impress me as a common font that would span all browsers.

[Greenguy]

It's not just the Comic Sans example, it's all 3 - all different fonts.

[mOrrI]

google fonts?

also did u ever played with CTRL + mouse wheel?

[Greenguy]

Yes, I know the CTRL + Mouse Wheel things :)

Some of it may be settings, but if you look at them side-by-side (http://www.buttonserver.com/font/side-by-side.html) (and this page is about 1600 wide), some fonts look the same & then the next one is different.

1st - Chrome vs Firefox:
Greenguy looks the same
Ashley Madison looks smaller in Firefox
Real Sexy Amateurs looks the same except for the BOLD on the link in Firefox

2nd - IE vs Chrome:
All 3 look smaller in IE, so that might be a setting.

3rd - Firefox vs IE:
Again, all 3 look smaller in IE, so that again might be a setting. Also the same "except for the BOLD on the link in Firefox" difference.

But, my point on this is that I'm using the DEFAULT settings for each browser |banghead|

[mOrrI]

U can always check how it looks on http://browsershots.org/

and see if u get same results :|

[Pagan]

I know it has to do with how each browser handles each font and graphic image. The tighter you make your settings in your style sheet, the better chance you have of each browser reading it the same. Comic Sans will ALWAYS have different size and spacing than Arial. You can try for a balance but to the best of my knowledge there is no absolute finite way to have them all be the same height across the board. I honestly wish there was - it would make our lives so much easier.

[Greenguy]

Pagan - I'm not comparing Comic Sans to Arial, I'm comparing Comic Sans to Comic Sans :)

[dunc]

Every browser, every OS gives different results on fonts... as far as I can tell

[Cleo]

You don't.

Back in my days of working in pre-press the only way to get the same fonts, leading, kerning and text flow was to include the fonts you used with your files and load them into the computer outputting to the press.

[Greenguy]

You don't.Well, that answers that |shake|

[Pagan]

Pagan - I'm not comparing Comic Sans to Arial, I'm comparing Comic Sans to Comic Sans :)

Teaches me to post when I am not thinking clearly. One thing other designers to is to tag their site - Best viewed with Blah blah. I just try to have something that looks decent in the more popular ones. If the difference is most apparent with Comic Sans and Arial, maybe a different font will read better. I am just now starting to play with Google Fonts - ones that are loaded from the web. Maybe that is an answer?

[housekeeper]

Not to change the subject too drastically, or bump the thread, but I'm wondering how fonts go missing in Photoshop. It's certainly a common occurrence because PS has a tool to 'replace missing fonts', and in my case I'd changed nothing regarding my font cache or upgrade to PS.

[Simon]

One thing to consider is to make the whole ad a graphic, that way you don't have to rely on all browsers (more than 3 of them too) to display fonts the same way. You can either create the entire ad in your graphics program. Or you can do what you're doing now, then choose the version you like best, take a screenshot of it, save it as a jgp or a gif file, and use that as the ad.

Of course that doesn't solve the problem of how to make other web content that isn't an ad look the same in all browsers. But it could be a fix for getting some of your ads to look the way you want them to look.



.