You can get pretty specific when declaring how you want text to look with CSS:
p {
font-family: Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
And that’s not even all of it… But still, even if you get that specific, there are drastic differences from browser to browser on how the actual rendered text looks. The important lesson here is that you no matter how much control you try to exert over text, in the end, you don’t get much. Not to mention most browsers are able to let users re-size and override font settings on the fly.
Here are some screenshots of the exact same page in several browsers:
Mac Firefox 2:
Mac Safari 2: (a little blurrier)
Mac Opera 9:
Mac IE 5:
PC IE 6 (Windows 2000):
PC IE 7:
PC IE 8:
PC Opera:
PC Firefox:
The differences seem pretty subtle, but look what happens when these screenshots are placed right on top of each other with some opacity applied in Photoshop:
In fact, these difference are pretty subtle with a single line of text, but you can see how when compounded, they could add up to a pretty significant difference. Most importantly, don’t count on text for specific layout positioning, as you can see by the images on either of this line, they will vary in position from browser to browser.
See the page these screen captures were made from.
Special thanks to Erik for re-creating the images from this post after I had lost them!
Yeah, this is so damn annoying… especially when you have multiline text in width/height specific div… Total breakup on Safari because of that font rendering…
Well most of developers do know that but client usually just say “Well this doesnt look the same to me…”
So instead making mess with font rendering, they should think of supporting css in fully as w3c propposed, imho…
This is very annoying. The differences between Firefox and IE6 are sometimes even bigger than what you show on this page. Unfortunately the last 4 images in your article seem to be lost.
Looks like the last four images are still missing from the article.
Holy cow. I’ve only been on Mac for a couple years, but I had forgotten how indescribably hideous text looks on windows. Why can’t Microsoft pay attention to such fundamental details as text rendering? Even the newer text rendering in Vista and IE 7/8 only manage to make the characters look blurry.
Safari’s font rendering is the worst IMO, all the text seems bold.
I’m new at developing web sites. Been working on http://www.mywcmassage.com and notice a big difference in how the text appears in FireFox vs. IE — FireFox the words seem too sharp, jagged, not smooth. Also the spacing and placement is different.
Is this just accepted? Are there ‘hacks’ or css fixes I could use to override this effect?
Does anyone have any answers?
This is a pain for web developers. How many browsers can one test against? Why not all browsers just stick with one font rendering standard? Even though Safari’s font looks bold I think at times that looks crisp and easy on the readability side.
You forget to change color profiles for pictures from mac. That means almost all browser will render these pictures wrong, and pictures from mac will be darker, for example in FF3 default settings.
So, one innocent windows soul, educated and using FF, may be looking at mac type rendering, but it would look darker and blurier. You should convert them in sRGB or wait 10 years to correct display of all browsers.
i have applied this css in my test web page , firefox is playing fine but I.E is not playing well…can any one help me!!!! plzzz
So, are there any fonts you recommend that do the best job of being rendered similarly in FF and MSIE? At this point I don't care so much which is "best" (some say MSIE renders "better" than FF), I just want to put something in my CSS that will result in the most predictable look across browsers. I trial Arial and Trebuchet MS, but I know there are hundreds of options out there and maybe someone has found a simple workhorse font… Thanks.
Best tool for this type of issue (that I’ve found) is the site http://browsershots.org/
It allows you to view any page of any site in virtually every browser known to mankind. Very handy, although very frustrating, too, since you get your screenshots back and they all look different!
Still helpful, in my opinion.
Cris,
Browsershots is ok, but the wait is rediculous. You need to check out the best damn tool I’ve found:
http://www.crossbrowsertesting.com
hi ,
this is anand from hyderabad this forum is very help to me
thanku
I bookmark this post for next time I have to explain browser rendering differences. You know, it could be a school example. Very smart mate! I wish Firefox would render better quality with fonts (I prefer Safari’s rendering a lot!).
Have any tried for the solution for this?