Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

font differences across browsers

A

andyjamesnelson

macrumors 6502
Original poster
Aug 24, 2003
286
0
Jacob's house
Hey.

I keep running into issues keeping fonts rendering the same across Safari / Firefox / Opera.

Does anyone know a sure fire a way of keeping them inline?

Safari always seems bolder and therefore larger.

Is the issues with all fonts?

Thanks, Andy.
 
The issue is actually how the browsers render the text. It usually varies form OS to OS (i.e. Mac OS renders different from Windows) but it can render differently from browser to browser as well. There is no way to make sure it renders identically in all systems. Learning to let go of that level control is part of web design. Welcome.
 
andyjamesnelson said:
Hey

I agree with you to a certain point.

However on same OS I think that Safari and Firefox should be able to display text the same.

Also go here: http://www.jasonsantamaria.com/articles/the-death-throes-of-print

This blog is amazing and he seems to be able to get the font looking identical on Safari and Firefox... jealous.

Any ideas hows he's doing it?

Andy
Click to expand...

You would think that, but you'd be wrong. Not that they're incapable, just that most of the time, due to programming differences, they render text quite differently even on the same computer and same OS.

Not exactly sure for that site, but it appears he pretty carefully defined all of the attributes of the text, which probably helped. Others who are more experienced than I may be able to point to a specific thing, but the earlier post was right: You need to learn to give up that level of control, because it's never going to look the same to everyone who views it (unless you violate every good practice by making the entire site an image).

jW
 
What all developers want in some form is cross-platform support for font-embedding tied into CSS. The current technique involves using tools like Weft to convert a common True Type Font to the Embedded Open Type format (.eot files) which allows fonts to be downloaded automatically when displayed via browser. There's even extremely cool CSS to make all this happen and customize the font properties in your web page. But.....

Problem: The tools are quirky, the .eot files are bandwidth consuming and slow the page load down, many of the best .eot fonts are not free, the CSS is version 3 and in draft status, and thus the whole system is not yet supported across all major browser platforms.

BIG problem.

So see other advice offered and live with it. Don't waste your time using the .eot or advanced CSS methods. In the future when the W3C irons out all the issues and standardizes everything we, as developers, will have a massive beer keg party and celebrate and start font embedding. Maybe in our lifetime, too.

-jim
 
Actually, if all 3 browsers are being used on the same Operating System, be it Mac or Windows, the fonts should look pretty much the same. A paragraph of text might not remain pixel perfect across all browsers, but should not look that different. the major font differences in appearance happen when you look at a website with a Mac vs Windows browser, even if using the same browser across both OS's–like Firefox. Maybe you are using an (incorrect) coding attribute that renders the fonts different on a certain browser. Also, check to see what your "minimum font size" number is on all 3 browsers, make sure they are the same–preferably set to "none."
 
Can anyone point me towards these new CS3 ways of doing thing please?

It would be interesting to take a look.

I'm not doing anything funny with my CSS as far as I'm sure.

I set font-family and size and line-height. I still seem to get some noticeable differences / the main one being the font-weight which always seems far more bold on Safari and Opera. This in turn effects the spacing of the characters.

One thing I often notice recently is that when setting margins on text elements there is often a 1 pixel difference in placement between Firefox and Safari. This I always find massively annoying. Other people have the same issue? I am assuming its got something to do with how the browsers calculate line-height.

Its not like I am some kind of control freak... I just referenced Jason Santa Maria's site because he doesn't seem to have the issues at all.

Andy
 
Is there a way to serve Firefox and Safari different CSS?

I know this isn't standards ideal but for my own site which I will maintain myself I don't see any issues.

Andy
 
If the font-weight is different across browsers, then set the font-weight specifically. That's a good general rule anyways, anything that you're worried about being different, make sure you actually set it because the browser defaults may not be the same.

jW
 
I do set font weight - its just not really supported in Safari.

This article is very informative on the subject and offers a nice work around using post script font-family names.

So for example:

font-family: "HelveticaNeue-Light" "Helvetica Neue";
font-weight: 100;

Safari loads of the lighter version of the font / Firefox doesn't but can make use of the font-weight: 100;

Result both browsers display the a nice light font that looks very similar.

Andy
 
andyjamesnelson said:
Can anyone point me towards these new CS3 ways of doing thing please?

It would be interesting to take a look.

I'm not doing anything funny with my CSS as far as I'm sure.

I set font-family and size and line-height. I still seem to get some noticeable differences / the main one being the font-weight which always seems far more bold on Safari and Opera. This in turn effects the spacing of the characters.

One thing I often notice recently is that when setting margins on text elements there is often a 1 pixel difference in placement between Firefox and Safari. This I always find massively annoying. Other people have the same issue? I am assuming its got something to do with how the browsers calculate line-height.

Its not like I am some kind of control freak... I just referenced Jason Santa Maria's site because he doesn't seem to have the issues at all.

Andy
Click to expand...

Remain calm. Breathe. The advice given by others is correct.

If you look at the CSS for the Jason Santa site as I just did, they use standard fonts, and set the proper font size and letter spacing in static pixels for various containers, no percentages. The developer there uses no tricks, they just took the time to tweak all their containers with sensible settings for common fonts, specifically adding the letter-spacing property to 2 pixels when bold is set, for example. You need to focus on simply tweaking your style sheet in the same manner if you are bothered by the slight differences. That's all you need to do.

-jim
 
The difference isn't just the browsers or the OS, but the actual font you have loaded on your machine. Arial is not Arial everywhere. If you have Arial from 2 different font foundries, they are not exactly the same. This will cause more issues than anything. Arial from Adobe is different to Arial from ITC, they may look the same, but there will be slight letter spacing differences.

This is the core reason when you send a print job you have to convert the font to paths. The printer may have the same font, but if it is not your font, it can cause all sorts of re-flow issues. I know this is web not print, but your machine still uses those same fonts to display text on your screen. Getting around this and monitor colour issues is one of the most "FUN" thing in web development.

I think the real question should be: when in the hell are we going to be able to use more than the few crappy web fonts we have available. Font embedding in websites, that is what I am waiting for. I believe it is in the css3 standard, but browser compatibility is still the issue. (Insert sigh "IE " here)
 
andyjamesnelson said:
Does static pixel sizes offer advantages over percentages and em when it comes to canceling out cross browser differences?
Click to expand...

I've noticed in a few instances where browsers will differ in their calculated size when using em (or %). This seems to be from rounding differences. It usually only happens when you have cascading em values, but the difference is also quite small. If your design gets broken by such small differences though you're better off figuring out why your design is so fragile.
 
No matter what, I say there must be a global standard on how web browsers should render websites, Im getting sick that what works in Safari/Firefox/Opera might not work on the most use browser called IE. It slows down development time and not to mention the thing I hate most in web designing/developing.
 
I often find that with font-height set in cascading em's there will be a 1px difference between margins and padding set on these elements across differing browsers.

It becomes a problem when your setting text into a small button or panel of some kind that has very few pixels to spare and the text needs vertically centering within it. Here a 1px difference can make the difference between nice and bad.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back