Safari better than Firefox?

Standardistas adore the Mozilla Firefox browser for its advanced support of web standards. (How good is it? The Web Standards Project considered declaring victory and closing shop when Netscape Corp. announced in 1999 that it would heed our advice and dump its non-compliant software in favor of the Gecko rendering engine that powers Firefox today.)

Though Firefox and related Mozilla browsers deserve credit for their unsurpassed handling of everything from the Document Object Model to MIME types, Firefox’s way with text leaves much to be desired, as the following screen shots show. Indeed, if reading is mostly what you do on the web, and if accurate typography makes reading more of a pleasure and less of a strain, then Apple’s Safari is superior to Firefox.

Lucida, Test One: with genuine italics

Zeldman.com is designed to be read in Lucida Grande, and the site originally listed “Lucida Grande” first in its style sheet. Alas, Lucida Grande lacks true italics. Fortunately, Lucida Sans has them. In a version of our style sheets used to capture the following screen shots, we’ve listed Lucida Sans first, Lucida Grande second, and substitutes thereafter. Both browers handle the site like a dream—but it is only a good dream in Safari. Open the screen shots in tabs:

Questions for discussion

  1. In Firefox, why does the text “now in its second edition. I can’t” display midway between roman and bold, and why is it so poorly antialiased? Apparently, Firefox bungles roman text that follows italics.
  2. In Firefox, why doesn’t hyphenation work? My gosh, people, it’s nearly 2007. IE5/Mac supported hyphenation.

Lucida, Test Two: using a font that lacks italics

Remember: Lucida Grande does not have italics; Lucida Sans does. But as Test One showed, Firefox can’t handle Lucida Sans correctly. So we’ve revised the style sheet. With Lucida Grande listed first in the style sheet, and Lucida Sans deleted, Safari still trounces Firefox. The experience of reading text is smoothly beautiful in Safari, much less so in Firefox.

Observations

  1. Both browsers fake the italics. But Firefox does the job crudely: a child could tell that its “italics” are faked. (Firefox slants the roman text.) By contrast, Safari fakes its italics so well (by substituting a true italic from the next available listed font that contains one) that only graphic designers and type hounds will realize that the font they’re viewing contains no true italics. See reader comments for delicious details.
  2. In Firefox, hyphenation still does not work.

Notes

It’s worth pointing out that these tests were done on Macintosh computers, which are known for their superior handling of text, and that Lucida is not some strange face chosen to prove a point. It is the default font in Mac OS X (not to mention on apple.com). Moreover, Lucida Sans Unicode, the first Unicode encoded font, shipped with Windows NT 3.1 and comes standard with all Microsoft Windows versions since Windows 98.

When I showed a friend and fellow designer these simple tests as I was working on them, he asked if I had reported “the bug” to the makers of Mozilla. But as I count it, there are multiple, overlapping Firefox bugs happening here—too many to fit into a bug-report form. I suspect that the problems have to do with Mozilla’s reliance on its cross-platform display environment. If you scuttle what an individual operating system does well in favor of what a cross-platform environment does poorly, you get what we’re seeing here. It’s not good enough.

Inferences for best practices

If your content will sometimes include italicized text, you naturally want to specify a font that contains italics. That’s just common sense. Unfortunately, as our screen shots have shown, common sense works against you here, because Firefox, although superior to other browsers in many ways, handles text like a drunken fry-cook.

When you specify the font that contains genuine italics (as we did in Test One), Firefox mishandles the roman text that abuts italicized words. When you replace that font with one that contains no italic (Test Two), Firefox fakes the italics crudely, but overall display and legibility are better than the unusable results of Test One.

Obviously there are fewer problems if you limit your website to Verdana and Georgia, but more constraints on typography are not what the web needs.

Discussion is now closed. Thanks to all who shared.

[tags]design, browsers, webstandards, webdesign, mozilla, safari, apple, lucida, unicode, windows, macintosh, osx[/tags]

256 thoughts on “Safari better than Firefox?”

  1. After a scan through the screenshots, I couldn’t really see what you were pointing out, but on a second glance, it all became clear (in a poorly-aliased kind of way.)

    That passage looks fine for me on Windows XP, Firefox 1.5.0.8 by the way.

  2. With regard to hyphenation – I submit that is a content issue and not a job for the browser. If hyphens are wanted, insert them as content – that is after all what they are (content with intrinsic gramatical meaning, as opposed to decorational presentational elemants). Personally I dislike hyphenation, I would prefer that no word is ever split over multiple lines, and I’m very glad my browser doesn’t do that.

    Having said that, in the images provided above, I can’t spot where Safari is hyphenating and Firefox is not. Nor can I tell much difference with the font rendering quality (excepting the obvious bug with the font-weight outlined in your post). Could you elaborate on the differences between the two, as I can’t spot them.

  3. in the images provided above, I can’t spot where Safari is hyphenating and Firefox is not.

    The content contains the following hyphenated phrase:

    “game-changing.”

    Safari wraps at the hyphen.

    Firefox does not.

    You see?

  4. Another note is that Firefox rarely respects your antialias settings, so the text will often look out of place in general when using Mac OS X.

    And I totally agree with your note on taking away from an OS that does something so well only to put in place something cross platform that does a horrible job. Firefox is really missing out on a lot of stuff by not using standard cocoa text handling. System-wide spell checking and dictionary anyone?

    That’s why I really hoped the Camino project would really just turn into Firefox for Mac. I understand their challenges in doing so, but it’d be fantastic if they were able to use their rendering engine only and leave everything else to the OS.

    That being said, I’d still rejoice if everyone dumped IE for Firefox.

    Another note, I’ve found that most people that use Firefox on a regular basis on the Mac are already those a little less concerned about really specific details like type rendering. If they are already willing to run a bastardized program that looks totally out of place and ugly within the OS, then they are probably just as likely to not notice type problems like a few of the comments above maybe. Doesn’t make it okay, but it’s better than it could be.

  5. Too true. Gecko (in my case, Camino)’s consistently lousy text-rendering support was a great reason that I eventually switched to a webkit browser. It should be noted, in fact: the italicized text in the second Safari shot *is* in fact true italics—it may not be Lucida Grande, since L Grande doesn’t, as you say, have any italics, but a look at the swung _e_ and single-story _a_ will demonstrate, in contrast to the gecko render, that it’s not simply the obliqued Roman.

  6. In the second set of screen shots, it appears that Safari is using Trebuchet MS Bold Italic (the second font specified in the CSS) rather than creating a fake italic. (I copied the text into TextEdit and checked the font.)

    That seems a little risky to me — what if the fonts in the list are substantially different? — but then I’ve been using Safari since it came out and I never noticed any problems with italics. Kudos to the Safari team for a clever solution.

    I wonder if it ever fakes an italic?

  7. I think this article’s helped me get a better handle on why I just don’t like browsing with Firefox on the Mac.

    Don’t get me wrong — compared to the ye olde days, Firefox has come a long way on the Mac platform. I have no real complaint with the look and feel of the browser’s UI on the Mac. Sure, the chrome’s just a little bit off, but it’s literally a few nit-picks away from being a good Mac citizen.

    However, despite the great improvements, it’s still just felt wrong. This article’s shed light on the fact that it’s the text handling that’s tweaking some twitchy node at the back of my brain. I’ve just fired up Firefox now to confirm this. It’s the lack of wrapping on hyphens in particular that makes heavy-duty text reading uncomfortable.

  8. the italicized text in the second Safari shot *is* in fact true italics—it may not be Lucida Grande, since L Grande doesn’t, as you say, have any italics, but a look at the swung _e_ and single-story _a_ will demonstrate, in contrast to the gecko render, that it’s not simply the obliqued Roman.

    In the second set of screen shots, it appears that Safari is using Trebuchet MS Bold Italic.

    Z.D. and Daniel: Good eyes and good insights. I’m inspired to list “Lucida Sans” after Lucida Grande and before Trebuchet. In that way, Safari will borrow Lucida Sans’s italic rather than Trebuchet’s on any Mac that has both Lucida Grande and Lucida Sans installed.

  9. It looks like Safari is substituting Trebuchet Italic instead of faking a Lucida Grande oblique in the last screenshot. Is that specified in your stylesheet?

  10. With regard to hyphenation I would like to point out that Firefox does it by the book (namely, the HTML 4.01 specification). Standards tend to be slightly more thought-out than practical opinions, and generally the rules should not be broken unless, as they say, you’ve understood them first.

    The normal hyphen has a semantic value which is different from that of the soft hyphen. It is not a separator. This could have implications for text indexing. It certainly has implications in a language like my own native Romanian, where the hyphen is the equivalent of the apostrophe in English. You wouldn’t want the browser to split a line at the apostrophe and I wouldn’t want it to do the same at the normal hyphen. So while Firefox may occasionally spoil typography, at least it avoids the pitfall of illiteracy.

    Support for the soft hyphen is the solution, not what Safari does.

  11. It looks like Safari is substituting Trebuchet Italic instead of faking a Lucida Grande oblique in the last screenshot.

    Agreed. Daniel Parks also pointed that out in an earlier comment.

    Is that specified in your stylesheet?

    Yes and no. :)

    Yes, Trebuchet MS is specified as a substitute font, as you can see by viewing the style sheets. (Links to the style sheets are provided in the post.)

    No, Trebuchet MS is not specified as a substitute for the missing italics in Lucida Grande. CSS doesn’t allow for that kind of nicety.

  12. Macs account for less than 1% of the traffic to the huge e-commerce site I work on — who really cares what they do or don’t do right? Zeldman, you complain loudly every time you get a simple OS upgrade and it breaks everything — get a PC and and get really productive, not to mention leaving behind all these display issues between the various Mac browsers. That oughta light the fires here :)

  13. Concerning the hyphenation thing:

    A bug report for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=95067

    A discussion of this: http://www.thescripts.com/forum/thread153624.html

    As for the bolding-after-italics issue, it works fine for me on Windows Firefox. It also correctly picks up the system antialiasing settings. And perhaps PNG would have been better for your screenshots, since JPG compression will tend to blur sharp edges (effectively anti-aliasing text a little bit). But I’m not a big fan of the “blurry text is easier to read” mentality that seems to be common in Mac camps..

  14. The second example is (I suspect) just a bug in Safari 2 and so we shouldn’t really get any credit for that one. :)

    Safari 2 cannot synthesize italic or bold, and therefore it ends up falling back to the next font in the list. This is, however, a bug that has been fixed in the latest WebKit nightlies.

  15. In Firefox, why does the text “now in its second edition. I can’t” display midway between roman and bold, and why is it so poorly antialiased? Apparently, Firefox bungles roman text that follows italics.

    Here’s something even more fun that I see all the time in Firefox on the Mac – move your mouse over the link in and out several times and watch the quasi-bold text to get even more bold. I wonder if anyone else sees this…

  16. Gecko’s awful non-breaking hyphen is ye old bug 95067. Everyone whose opinion counts there has ten reasons why it can’t be fixed any time “soon” (the bug was opened in 2001).

    The standards are unclear (to people in the bug conversation) whether an optional line break after hyphen is required, permitted, encouraged, or forbidden. Yet everyone who cares about type wants the damn hyphen to line-break, as it has always done in IE, Safari/KHTML, and Opera. Annoying. Moz browsers are for debugging and not reading, as far as I’m concerned.

  17. Pingback: Airbag -
  18. Thanks, Doc.

    Dave, I’ve slipped “Lucida Sans” back in the list, following Lucida Grande. After emptying the cache in Safari, you should see beautiful, Lucida italics (not Trebuchet). Firefox naturally still shows fake italics, and that’s actually what it’s supposed to do. If Firefox could display Lucida Sans correctly, all we’d be talking about here is hyphenation, and how some standards geeks interpret W3C vagueness on the subject as a call to inaction.

  19. Yeah, if only Firefox was just a little better. Its such a crappy program, and if you can’t detect the minute problems it causes, well, then sweeping implications about your character probably (Re: Josh’s post). Sorry, but while the one bug with the bold text is obviously an issue, the rest is all pretty anal. But I guess thats what someone like me, an amateur, would say right? Sometimes I think the perspective on standards, and design on the web gets a little skewed. I think this: this is a really good ‘big picture’ article that folks might want to have a look at. On the other hand, without Zeldman.com, Alistapart etc, many would still be in the wilderness. So I guess a little zealotry is in order now and then to keep the good word a spreadin’ !

  20. My solution, for the next CSS release for my site at least, is to specify Lucida Grande, Lucida Sans, etc. as the body font, and then to specify one for em as well. (Then it’s just a matter of adding other selectors to that rule to make sure other italicised text gets my chosen fonts as well). Thus saving me from Firefox:mac rendering, and making sure I know what Safari will do.

  21. Ignoring the weaselbait but let’s not forget that the web is not just for Windows, not just for mac but for everyone, everywhere…using a browser that’s only for mac or only for windows because certain sites may look a little better is a little like putting your head in the sand.

    Better typography, including hyphenation is on the Firefox agenda:
    Text_and_Typography

  22. Linebreaking after explicit (“hard”) hyphens could easily be governed by the language setting in place, so Romanian and some English usages (“pre-taping, [BR]-editing, and -postproduction”) could be handled accurately. I don’t see how you could possibly dispute that the ASCII hyphen is anything but a hyphen. You want a dash, type a dash.

    Oh, and BTW: 1% of a zillion hits is a lot of hits. Mac users are early adopters; piss them off and your product gets pilloried.

    Oh2, and BTW2: Try looking at my blog headlines in Opera for Macintosh, which errantly, though pleasingly, uses full swash charcters in Zapfino. (Swash characters in italics are a problem in Opera for Mac.)

  23. Have you looked at this site on a machine that does not have anti-aliasing enabled?

    I don’t know exactly what is going on and have not spent time looking at the code but here are some screenshots:
    screenshot of IE7
    screenshot of IE6

    I noticed this last week and was hoping that this topic would come up because it brings up an important all be it tangential question about market share and the design environments we choose.

    I have been questioning using a Mac as a primary design environment because it does not reflect the market share of my clients and customers. There is a liability here that we don’t often talk about.

  24. Neil, your IE6 screen shot should look indistinguishable from your pretty IE7 screen shot. I don’t know what’s causing text to look so wretched in your IE6. It’s as if you had no actual fonts installed on the system. Did you perhaps, through trickery, install both IE6 and IE7 on the same machine? If so, it might account for the botched rendering in IE6.

  25. Well timed! I spent a frustrating while last night zoomed in to 800% looking at the glyphs on Firefox and Safari, trying to spot why it look better on Safari. Often the text is indentical, but at times the difference is glaring. For FireFox the Mac is, as ever, very much a second thought.

    But damn those extensions are useful! Adblock!

  26. @arielb

    I see no reason to use cross-platform software just because it’s cross-platform. I use Firefox on Windows because it’s the best browser on Windows; I use Safari on the Mac because it’s the best browser on the Mac (sorry, OmniWeb and Camino!) If IE were better than Firefox on Windows, I’d use it. I mean, it’s nice to have Firefox and VLC and so forth on every platform but that’s just because they’re good, free programs and it’s less to remember when I set up a Windows or Linux machine once in a blue moon.

    It’s not like it’s some major cognitive switch to go from using one browser to another. They all work pretty much the same way. It’s more a matter of remembering the name of what to download.

  27. A more dramatic illustration of the differences between webkit and gecko rendering can be seen with some accented characters. For example, almost any Wikipedia entry on a Japanese topic, where you’ll see italicized macron’d Os and Us. Gecko romanizes these in the middle of an italicized word—I’m not sure, but I think it is actually picking those characters out of a completely different typeface. Webkit handles it much more nicely.

    Interestingly, though, Gecko browsers will show Chinese text using Chinese fonts and Japanese text in Japanese fonts (I’m guessing this is based on language metadata). On my system, Safari will attempt to show both in a Japanese font, but fall back to a Chinese font when necessary.

  28. Pingback: Edu_Rss
  29. I have noticed the text-rendering (bolding) bug for quite some time in Firefox, and it bugs the living crap out of me. I am very detail-oriented, to the point that I customize my widgets for Firefox by hand in the forms.css file. However, I still use Firefox over Safari, mostly for the plugins. I use the adblock and web developer plugins. That’s it. But Safari doesn’t have those. I have tried PithHelmet and didn’t like it (or any other SIMBL plugins). Anyway, I totally agree with you on Safari’s extreme superiority over Firefox in the text-rendering department. But, even though I’m irritated by the bug, it’s not enough to push me to Safari as my main browser, nice as it is.

    I was perusing bugzilla trying to find some kind of fix, or even acknowledgment that the bug I saw existed, and found one or two things. It appears that it can be triggered by several things, and is apparently the result of “overprinting” or displaying the same text on top of itself multiple times. A good example is shown at this bugzilla link. There is a rotating gif that causes some text to be overprinted or further boldened each time until it gets quite horrendous looking.

    I hope that the Firefox team can fix this sometime soon. Maybe this post is just the thing to stir up some resolve to fix it.

    Also, to put my two cents in, I don’t really care about the hyphenation problem, or the faked italics problem. IMO, if you want italics, you should use a font that has them…

  30. Is this anything that the user notices? They do not have the time to evaluate such characteristics. A couple of the examples are not visable in Win/FF. Being a Windows/Firefox user I have noticed the intrinsic qualities of Safari. I might add that
    I have been setting type since the days of the type case and people knew what “Hot Composition” ment. Oh that and I walked
    ten miles, barefoot, uphill in a snowstorm to get to school. One way of course.

  31. Actually, the font used on apple.com is Myriad. It’s very similar to Lucida Grande, but the lowercase i gives it away. Crank them up to 72pt or so, and you’ll see it.

    Maybe they weren’t able to license Myriad for use in an operating system?

  32. Firefox is better than Safari. Apple products are prettier, but close-minded. Until I can run Safari on a PC with Windows, Firefox wins by default. Not to mention, Firefox has a superior load time.

  33. Actually the font used on apple.com is Lucida Grande on some pages, just like I said. And it’s Myriad on other pages, just like you’ve said. Confirm by viewing style sheets.

    Two or three years ago, some colleagues at Apple informed Mr Bowman and me of an upcoming apple.com switch to Myriad; in the years since, some pages have switched and others haven’t. Our colleagues didn’t say why they were contemplating switching from Lucida Grande to Myriad. My guess—and it’s only that—is that such a change might be connected to the lack of italics in Lucida Grande.

  34. <sheepish>Oops. Sorry. Somehow I missed the second half of this thread where that was pointed out already.</sheepish>

  35. Jeffrey, I am in fact using an IE 6 standalone but I see the exact same issue in Firefox 1.5 so the standalone dosen’t seem to be the issue. To confirm I tested on another machine. Here is the screenshot:
    screenshot of Firefox 1.5

  36. To Joe and VL, Yes I realize that IE7 has ClearType on by default. Does that mean that the fonts selected only work if some type of anti-aliasing is enabled?

  37. Neil: With ClearType off, the text looks awful on your system, whether in Firefox 1.5 or IE6. To me it looks like you don’t have Lucida Sans or Trebuchet MS installed on your machine. (But that can’t be true. Both have come standard with Windows since the 1990s.)

  38. Pingback: watchlist (geek)
  39. Gecko in general has very poor support of anti-aliasing. A perfect example is with -moz-border-radius and -webkit-border-radius, WebKit (nightlies only) render rounded corners beautifully while Gecko browsers look like something cut out with a rusty pair of scissors.

  40. Most Windows XP machines come with ClearType (Microsoft’s anti-aliasing technology) disabled by default (and this is also the preset for Windows XP). IE browsers prior to IE7 will render using the system’s default setting (which means they will render without anti-aliasing in many of these cases). This means some users will be viewing Zeldman.com (and other web pages) in all its anti-aliased glory (though it usually doesn’t look as horrific as the link posted earlier).

    Verdana and other old-school web fonts are rendered on non-anti-aliased machines with that possibility in mind (which is why they look good). Fonts with styling of any sort, and most sans fonts, will look horrible in these cases—and there is nothing we can do to control it.

    Windows XP users who have systems that are not ClearType enabled can use this obscurely-placed Microsoft utility, through Internet Explorer, to enable or customize the way in which their machines anti-alias text.

  41. “Awful” as it may be the majority of clients and customers have CRT displays and most likely never heard of ClearType or know to enable it. Vista will have ClearType enabled by default. Vista will also have new core fonts. Add to this the unfortunate death of Helvetica and… well I now have questions about designing on a Mac as it may become increasingly different from what my clients see. What does this say about our attentiveness to user experience when IE6 or 7 is second or third choice? What does this say about our priorities. I’m concerned and I don’t think Parallels is the answer.

    Sorry for floating off topic but I think this is very important.

  42. Dave Hyatt specifically mentioned that this was a bug in Safari 2, so I’m curious if Safari 1 also cannot fake italics?

    I tried a WebKit nightly (http://nightly.webkit.org/), and as Hyatt mentioned, it does use a fake italic. I think it looks a bit better than Firefox: the kerning is better, and it appears that Safari doesn’t make the characters quite as oblique.

    Too bad the bug had to be fixed!

  43. Safari to me works like a non-standard browser, and has other usability issues I cannot live with, such as the inability to make it work off-line; or at least I have been unable to figure out how to do so.

    So based on that, Firefox is the only other alternative. Opera, et. al., don’t cut it either,

  44. Well I am a web designer and I don’t see the difference. That is one of the major differences of web versus print design – you can’t have as much control over a web page. Why don’t you use PDFs, then you can have very fine grained control over kerning and the like.

  45. There’s a little setting in FF that allows you to set the minimum font size. If I set it to anything less than 9px, the ‘small’ fonts are anything but legible. Safari’s rendering of small fonts is far superior to FF as is its aliasing of them. I’ve designed a few sites with small font requirements and cross browser testing using FF always led me to believe something was up with it. Zeldman confiems it.

  46. Perhaps a dumb or obvious question but have you tried associating the Lucida Sans font *just* with italicized text in the stylesheet?
    (Lucida Grande first for all text as default?)
    How does that work for you?

  47. Remember how the bad old browsers used to add a big word space after italicized text? (This was after the still worse, way older browsers used to overlap the end of the heavily slanted italic text and the following roman.) Yes, some still do that.

    If Firefox’s bolding is a “double-strike” problem, then it might have something to do with this. It’s drawing the text both with and without that extra word space, for some reason.

  48. jhn wrote “I see no reason to use cross-platform software just because it’s cross-platform. I use Firefox on Windows because it’s the best browser on Windows; I use Safari on the Mac because it’s the best browser on the Mac”

    The problem is that there are plenty of websites that don’t look good at all in Safari. Some won’t work in Firefox either but it has the best chance of getting designers to ensure their website works under it. Why? Because it’s on Windows, as well.

    oh and of course, everything looks better with Adblock+ :)

  49. I’m getting the same display issue as Neil reported, running FF1.5 on Windoze 2000. It seems to be a problem with Lucida Sans being displayed at this particular size. If I edit the CSS (the Web Developer Toolbar being one reason why FF is better!) to put Trebuchet back into second place, it starts looking good again.

    It sucks, I know, but for the benefit of the cleartype-challenged you may be better putting Trebuchet back into second place and explicitly applying font: “Lucida Sans” to italics.

  50. Browsing with Firefox after using Safari is like drinking orange juice after brushing your teeth. It’s just gross, until you give your taste-buds some time to adjust. Safari is minty-fresh and makes you feel a little special after using it. But who is to say which is objectively better? Orange juice is, after all, quite tasty (not to mention high in vitamin C).

    The web and how we browse it—this is a work in progress and I hope it remains that way.

  51. I can say “yes” to Jeffrey opinion, but my best choise, about browaser, is Camino. Geko engine, Cocoa Interface, Best of two world.
    But why Geko can’t undestand css text-shadow command?

  52. Is this anything that the user notices? They do not have the time to evaluate such characteristics.

    These text rendering issues can not be waved off as “anal” or “control freakism” of web designers. Here’s why.

    The average user may not “notice” anything consciously with badly rendered text. Yet he does experience it nevertheless. It may show up in eye strain caused headaches, the feeling of being bothered by the computer without knowing “how to put a finger on it”, or a general dislike of “being on a computer” altogether.

    For the longest time, I’ve avoided using Firefox. Other than trying to type in 1/2 a text box, I did not cognizantly know why. It just didn’t “feel right”. So Camino is my second browser, Safari my default browser. I didn’t know why I didn’t like it.

    All Jeffrey is doing here is pointing out why exactly it doesn’t “feel right” to me and to many, many others I’ve heard complain that Firefox isn’t “Mac-like” enough. For a non-professional, like myself, this is a godsend to know that the problems with Firefox aren’t just in my head.

  53. Jeffrey, Cleartype is off in Windows XP by default. IE7 comes with Cleartype on only for itself, along with Outlook Express, leaving the rest of the system as it was – off by default. So, no matter if a computer has IE6 installed properly or as a standalone addition to IE7, it follows systemwide Cleartype settings – off by default on vast majority of Windows computers.

    Now why does Lucida Sans appear “botched” in people’s non IE7 Windows browsers? Only because, despite being in the system for ages, unlike Arial, Verdana, Tahoma, Trebuchet, Times, Georgia, Courier – it was not designed for non-antialiased, pixelated display.
    It is not a web-safe font, it looks bad on most computers, because most computer owners don’t know their system has something like Cleartype, and most Windows owners haven’t acquired IE7 yet. Someday, when everyone has font smoothing on, it probably will be safe to use, but now “botched text” is what majority of users see on zeldman.com
    The way to avoid this would be moving Trebuchet MS back to the 2nd place of your list – as it had been there for ages. I can assume, only so few people have reported the problem to you, because a. majority of your Windows audience have IE7 installed (with CT on), b. designers – majority of your audience – are on Macs.
    Please correct me if I’m wrong.

    From my observations, I would add that Lucida Grande isn’t optimized for non-smoothed display either. If you turn font antialiasing off in OSX, Lucida Grande looks dreadful.
    Another thing is, with font antialiasing off, OSX Firefox applies terrible kerning even to such safe fonts like Verdana – another blow for FF. To be honest, Safari isn’t so much much better, when it comes to pixelated display. One could say, that only about 15 Mac users in the world turn antialiasing off, but actually, antialiasing is off automatically below certain font size (it’s an adjustable system setting) and sometimes we get to see small bitmap text in weird kerning on the mac.

  54. For the benefit of the cleartype-challenged you may be better putting Trebuchet back into second place.

    I’ve come to the same conclusion and done just that. Refresh and see.

    In Safari, empty cache then refresh: the page looks the same except italics are once again in Trebuchet.

    In IE/Win with ClearType off, refresh: the page is now in homely but legible non-anti-aliased Trebuchet rather than ugly and illegible non-anti-aliased Lucida Sans.

    Given the font’s heritage, importance, and potential, it’s a pity that Microsoft made Lucida Sans so ugly and reader-hostile in its non-ClearType naked state. I could hazard a guess as to why this particular font does not fit nicely into pixel space, but my guess would take us even further into an off-topic discussion.

    Aesopian lesson: In the current web, where many readers use Windows and IE pre-7.0, Lucida Sans is a poor choice for web text. Even listing it in second or third place is risky, as the experiment of the past 12 hours showed. But when most Windows users have transitioned to IE7 (which has better standards support than 6, and which enforces ClearType), Lucida Sans will be a perfectly fine option.

    Now back to Webkit versus Firefox.

  55. Jeffrey I can see you updated the css while I was still writing. I am a little sorry you had to go back to Trebuchet, as smooth Lucida looked much more appealing.

    Now a techie question – is there a way to detect whether Cleartype is on, ie with some Windows-specific scripting, to be safe with Lucida Sans? Sure we can test for IE7 and Vista – they’re almost sure to be Cleartype enabled. But then, serving browser-specific css is not what we have learnt from you as “good practice”, is it? :)

  56. You have some points here.

    Lucky for you Firefox is open source so you can jump right in and help fix the problem instead of helplessly complain.

    “He asked if I had reported “the bug” to the makers of Mozilla. But as I count it, there are multiple, overlapping Firefox bugs happening here—too many to fit into a bug-report form.”

    I guess it’s too much effort to fill out a bug-report but easier to write a three page article? Perhaps it’s that finding browser bugs simply gets more press that helping solve the problem . Perhaps it’s that revisiting the old and very tired PC vs. Mac fight is always good for a few “Amens!” from the crowd.

    In any case, I thought you were a problem solver and above this type of article. Guess not.

  57. onestly i don’t see so much difference to say that “safari’s better than firefox”.
    it may be better somewhere, but not at all..

  58. When I showed a friend and fellow designer these simple tests as I was working on them, he asked if I had reported “the bug” to the makers of Mozilla. But as I count it, there are multiple, overlapping Firefox bugs happening here—too many to fit into a bug-report form.

    I must say I was surprised to see that kind of attitude here. If everyone followed that kind of thought wouldn’t we still be using NN 4.x-like browsers? I’m not trying to be confrontational, that line just rubbed me the wrong way this morning lol.

  59. Hi, a better title for this article would be:
    “Quartz better than Quickdraw ?”

    Firefox and Camino still use the old Quickdraw stuff – that`s all ;-)
    Firefox 3.0 and Camino as well will use Quartz and then they will have completely the same text handling.

    and it has nothing to with cross-platform stuff – it`s all Mac only stuff ;-)

    see also – for example:
    http://wiki.mozilla.org/Mac:Cairo
    http://weblogs.mozillazine.org/josh/archives/2006/09/cocoa_widgets_are_default_on_t.html
    https://bugzilla.mozilla.org/show_bug.cgi?id=121540

  60. I find the main thing that Safari does better than Firefox, is have ColorSync support for images – Firefox doesn’t seem to do any color management at all, which is a shame as it appears to be fairly easy to add for the Mac, and surely not that hard in windows either?

  61. Jeffrey, most of this has most likely to do with the fact that Mac Firefox still does not use ATSUI (Apple’s builtin font rendering system) because it would not work for them on 10.3

    Therefore you get font rendering that differs from the system antialiasing, and some odd font substitution problems when glyphs (or variants) cannot be found. Mac Firefox switched to Cairo tookit recently and the font rendering has been substantially revamped there. You chould take a look at the latest Firefox nightlies to see where it’s at now. Hope they will tackle ATSUI when they are done transitioning to Cairo in full (at least Unicode fonts are now properly supported with all their glyphs).

    This entry tells more about the changes which are now in Mozilla trunk:
    http://www.pavlov.net/blog/archives/2005/08/future_graphics.html

  62. If everyone followed that kind of thought wouldn’t we still be using NN 4.x-like browsers?

    As other posters have noted, one of these bugs—the hyphenation issue—was reported as long ago as 2001. Five years later, hyphenation in Firefox and other Gecko-based browsers is still broken. (Contrast with IE5/Mac, which got it right in 2000.)

    Why do such bugs linger in Bugzilla like unrefrigerated fruit? Probably because developers with the expertise to program an open source browser and the passion to do so are likely to view the hyphenation issue as a low priority owing the vagueness of that detail of the HTML 4 spec. (View their comments and see.)

    It’s natural for programmers to implement exact specifications and to avoid implementing inexplicit phrases.

    It’s equally natural for communication designers, writers, art directors, editors, and sensitive readers to know in their bones that text should wrap at a soft hyphen. A motivated programmer could make it happen without falling afoul of Romanian language issues or other edge-case issues.

    The trouble is that programmers and designers still don’t communicate enough.

    Although it has belatedly begun to realize it has this problem, the W3C has yet to sufficiently involve web designers in the creation of its specs, which is why in recent years the specs have drifted ever farther from the realm of facilitating communication and interaction for real users and the web developers who serve them.

    A parallel disconnect afflicts the open source community that brings us standards-focused products like Firefox and its Gecko engine.

    We could all do a better job of communicating.

    One way of communicating is write a critique based on experience and research, and that’s what I’ve done here. Some people may confusing writing a critique with being “unhelpful:” one poster suggested I program Gecko myself rather than complain about its small but significant and fixable flaws; if I were a browser developer, I would do that. But pointing out problems is not a negative or unhelpful activity, as anyone who has submitted work for review should know. We have standards in browsers, and we have tens of thousands of designers and developers who care about web standards and accessibility, precisely because a tiny group of us once made a very loud noise.

  63. @Neil & Jeffrey:

    The WinXP and IE6 Lucida issue is a strange one, and one that I’ve delt with on my own site. The issue seems to be with calling “Lucida Sans” on the PC (especially with ClearType disabled).

    If you call “Lucida Sans Unicode” instead, there should be no issues (all users who reported the bug on my site, claimed that this fixed the display). Of course, the Unicode varient is also a much different font–perhaps the solution is to conditionally comment Unicode for IE6 only, until most people are running IE7.

  64. Damn you Google Sync, come out on Safari already, hint hint!

    Firefox’s capacity for customisation gives it a place on my Mac. But Safari feels the better browser and looks it too as shown here. Safari 3 will bring some features that I just hate to be without, but a real plugin ecosystem like Firefox and Apple’s own Dashboard no less would be warmly received by myself and many…

  65. Interestingly, I run WaMCom – which is based on Mozilla 1.3.1 – on Mac OS 9, as it is the most recent browser supported on OS 9 (apart from iCab 3, which sadly still has a lot of problems). In this browser, the text renders witnhout any problems, apart from the non-beaking hypen.

  66. Definitely an issue for people who like smooth text.

    I much prefer the text handling in Safari (and that it uses the Mac OS spellchecker) to Firefox’s but I’d guess that it would be a QuickDraw vs Quartz issue too. As a person who selects text on a page as I get bored, that REALLY shows the problems and moving from tab to tab can bring the bad things out too.

    That said – Firefox is more compatible and I can use both Google Bookmark Sync (why should I have to pay for .Mac?) and the Yahoo Mail Beta (which is a pleasure to use on a fast connection).

    That’s why Firefox is my current default browser – again a reminder that the content is more important that the tool (Yahoo Mail Beta is compelling enough for me to change browser). Also a reminder that at least we have choice now – rather than a competing pair of crashy browsers like in the old days (the old days when I didn’t need a degree to code HTML).

    Then again, when Leopard comes out?

    Scott :)

  67. Firefox for Mac OS X has always given people problems. From it eating up computer memory and just being slow as hell even on the fastest Mac computer. I use Camino and haven’t had a problem since I started using it. To me Camino is the firefox for the Mac without all the extensions.

  68. Pingback: WebHed Design
  69. Grr. I wish Google’s apps worked a bit better on Safari. Once they do, I can switch back; while I like the way Camino handles some things, I really miss the beautiful text in Safari. Nice critique, sir!

  70. The problem is that there are plenty of websites that don’t look good at all in Safari.

    Where are these mythical sites?
    My main problem is sites look rubbish in anything but Safari, when I’m not using Safari then all I can think about is how rubbish the anti-aliasing looks.
    Especially on windows, cleartype is a typographic shambles (I disagree with LCD trick of the eye hinting on osx too but at least osx doesn’t leave loads of aliased accenders and other nastyness) even when painstakingly tweaked there are still bits of text on me screen that look brown or yellow when they should look black!

    The monochromatic (“standard” smoothing) anti-alias on osx is the most glorious feast on the eyes when browsing the internet. I really can’t see myself using anything but Safari ever again, on a quality screen its almost as good as reading a printed page.

  71. meh; don’t think this should be priority for firefox. i’m sure there are many other bugs or enhancements they could put time towards…

  72. [OT – RSS feeds] Looks like it’s definately a WordPress issue, or maybe a plugin that you’re using? The same issue that appears in the RSS feed appears in the Atom feed, which is that there’s an error in the content appearing next to a malformed UTF-8 sequence (a bit that should be 0xe2, 0x80, 0x93 – – by what I’m seeing). I’d suggest a possible fix, but as I don’t really know WordPress all that well, or what your configuration is… well, yeah.

  73. I have noticed the same problem on Windows too. Actually, this is a general problem on Windows – italics always look ugly, thus I resorted to:

    em, i, cite, blockquote {
    font-family: “Trebuchet MS”, serif;
    }

    to have a nicer looking letters. This I do no matter what regular font I use, until recently when I started experimenting with MS new fonts (the C-pack).

  74. Regarding what George said about hyphenation: in portuguese, we have two different uses for the hyphen too: as in english we say “Talk me” if wrote in portuguese would be “Talk-me”. So, would be strange if the browser split the word in two, understanding that we are using the hyphen in the “soft” way.

  75. Zeldman: I think you hit the nail on the head when you point out that many of these problems are due to lack of communication between developers and designers. I think that blog entries like this one go a long way in motivating the public to recognize software flaws, but on their own, entries like this do little to actually effect change.

    The main problem I have with your entry is the response you gave to your friend who recommended filing a bug on bugzilla.mozilla.org. Yes, it seems you found more than one bug, but why would that give you any less reason to notify the application’s developers? The developers have given you a direct line into their process by opening bugzilla up to the public, and you chose not to use this tool of communication.

    Again, I don’t think that your blog post is worthless, and I wouldn’t assert that exclusively filing bugs would get them fixed. Developers are unlikely to fix a bug that they view as low-priority unless there is sufficient public interest in seeing it fixed. If you had instead filed bugs for the issues you discovered and found preexisting bugs for issues you confirmed, you could have then given direct links to your extensive audience in order to give them something to do once you’ve riled them up and rallied them behind you.

    I would suggest that people who have accused you of being “unhelpful” did so because you had such an opportunity and (whether through intention or oversight) failed to make use of it.

  76. Ah, nice to see someone else has picked up on the many, many typographical deficiencies in Firefox. I first noticed it when I was working on the G5’s at my old college (building and debug/testing sites in both browsers), and it quite honestly disheartened me. Firefox can do what it does well, as long as it’s not trying to render text. And unfortunately… text tends to be the most important thing on a site, a fundamental folly in the Mozilla Foundation’s court.

    Ideally, if Firefox could get these simple things down and do what Safari has been doing well since OS X hit the shelves, it would definitely be the best browser out there (for the majority of circumstances anyway). As has been mentioned though, the distinct lack of discourse between those building the software and those using the software causes schisms in the development process, and these simple mistakes remain. I think something Mozilla definitely need to do is prompt those who design websites for public consumption for ideas and suggestions in an open forum that is actually worthwhile, not just a simple response-based thing that ultimately leads to no answers. As it stands, we’re only seeing developers developing for developers, not developers developing for everyone. It’s made its mark in web-based society very clearly, I think it’s time Mozilla definitely start playing ball like a big-leaguer rather than keeping the low-key profile they had initially.

    Firefox is a good browser, don’t get me wrong. It’s just that the fundamental basics have been overlooked in preference for shinier, less useful features for far too long.

  77. I just noticed the URL title for this post is “safari-beats-firefox”. This is different from the actual title “Safari better than Firefox?”. That implies that Safari might not be better, but the URL implies it definitely is.

  78. What about colour rendition, respect of color profiles in images – photographs? I don’t think it’s complete, but in Safari you can correctly get an srgb profile, while FF shows only monitor rendition. My PC-savvy photographs, in FF, are washed out on Mac FF.

  79. isn’t firefox still a carbon app as opposed to cocoa. surely its just this that holds it back in font support and antialiasing.

    no doubt there are technical reasons (or laziness) as to why ff is still a carbon app.

    i spend 50% of my surfing time in netnewswire which is webkit (renders identically to safari) but its js support is poor.

  80. Now that I’ve had time to sober up, I take umbrage to the fry-cook,(Is the hyphen really necessary?), remark. Who is the great Zeldman that he can slight worthy professionals. To watch a skilled fry-cook at work, drunk or not, is to a witness choreographed chaos.
    I suggest Mr. Zeldman move his nose from behind his Cinema HD and take a look around. He might find others performing everyday, so called mundane jobs with as much zest and creativity as any typographer.

  81. Not sure if this is a quirk, a bug, or just the fact that it’s past 3 a.m., but I seem to have found an annnoying hole in Safari’s admittedly gorgeous text rendering.

    In my style sheets, I have specified that a headline font should first try to display at “DINMittelschrift” (and then I follow up with more common cross-platform fonts. (I realize this is ambitious because few people will have this font installed.) In Firefox and even IE (both on a Mac), it works perfectly. In Safari, however, it displays the first alphabetical font in the DIN family, DINEngschrift, which is significantly more condensed and doesn’t look good in context. This won’t suffice.

    I tried a few workarounds including specifying the exact display name that the Font Book application gave me, to no avail. What sucks is that the few people who *do* have the proper font will probably be using a Mac and will get a subpar experience. Any ideas from the gallery now that this post has been dugg to high heaven?

  82. Maybe the crdit does not go to safari, maybe the credit belongs to konqueror and the KHTML engine.

    As for font systems, I find that if you have freetype enabled in Linux (fedora) and the windows fonts installed, it gives windows a thrashing in font rendering. Konqueror still looks better then firefox, but firefox (fonts) looks better then its windows sibling.

  83. Pingback: fonts - SWiK
  84. > Is Safari better than Firefox?

    Small question: Firefox use per default it’s own font-size “16px” and not the font-size given by the os platform. If you use Windows than you can switch between “small font (96dpi)” and “big font (120dpi)”. Firefox ignore this and use it’s own default font-size.
    Safari use the font-size given by the os platform.

    Next question: Did the sample page use font-size “px” or “em”. Firefox have some trouble with “em”. Safari not.

    If anyone will make a real test, to see what Firefox and Safari will do on a site that use Web Standards with relative font-size “em”, so he can do that on http://www.aadmm.de. This site is available in german and english and have capabilities to test or compare browsers for compliance of Web Standards. It’s also reachable for person with disabilities.

  85. Just downloaded Gran Paradiso, which is a milestone for the next major version of Firefox and uses Quartz instead of Quickdraw.

    While it’s an early alpha, they seemed to have fixed the bold after italic text, but still doesn’t hyphenate correctly. It also passes the Acid 2 test!

    FYI: It appears that the Firefox team is short on testers for Mac OS X and could use assistance testing this build…

    http://perso.hirlimann.net/~ludo/blog/archives/2006/12/a_day_for_a_gecko.html

    http://www.mozilla.org/projects/firefox/3.0a1/releasenotes/

  86. Here’s a fun little test for you. The assumption is that you have Adobe CS installed on your computer. Assume also that you have installed the accompanying fonts into your computer’s font folder (on the Mac this means the main font folder, not the individual user’s font folder). Then use Myriad Pro as your main font (a font set I like to use while playing includes a) Myriad Pro, b) Lucida Grande, c) Geneva, d) Verdana and obviously e) sans-serif — I’ve given up on Lucida Sans). Now do the Safari vs. Firefox dance, on one and the same Mac preferably, and tell me: isn’t there a remarkable difference in handling between the 2? (Hint: Myriad Pro looks godawful in Firefox and sugarsweet in Safari. ;D

  87. According to the official site for Firefox 3 Alpha 1. Note the last part!

    “The Cairo graphics system has drastically changed the way all text and images are rendered from previous versions of Gecko, so occasional misrenderings of non-latin scripts and fonts may occur.”

  88. Regarding what George said about hyphenation: in portuguese, we have two different uses for the hyphen too: as in english we say “Talk me” if wrote in portuguese would be “Talk-me”. So, would be strange if the browser split the word in two, understanding that we are using the hyphen in the “soft” way.

  89. Pingback: Vulture Droppings
  90. Ideally, if Firefox could get these simple things down and do what Safari has been doing well since OS X hit the shelves, it would definitely be the best browser out there (for the majority of circumstances anyway). As has been mentioned though, the distinct lack of discourse between those building the software and those using the software causes schisms in the development process, and these simple mistakes remain. I think something Mozilla definitely need to do is prompt those who design websites for public consumption for ideas and suggestions in an open forum that is actually worthwhile, not just a simple response-based thing that ultimately leads to no answers.

  91. Till Firefox 2.0, the Gecko engine use the old Quickdraw graphics library (originally developed for OS9). With the upcoming new Firefox 3.0, it uses Quartz or Cairo, the more recent Core Image libraries. Safari have been using this for a long time.

  92. Interesting article. Perhaps you should have included some of the shortcomings of Safari and made a balanced argument.

  93. I was having terrible problems with text-rendering in Firefox. The bold and italics were always separated from normal text by big spaces. Then, I reinstalled Arial and it magically solved all my problems. Hopefully this will work for any others who have had a similar problem.

  94. Firefox for Mac OS X has always given people problems – it’s an old story. From it eating up computer memory and just being slow as hell even on the fastest Mac computer. I use Camino and haven’t had a problem since I started using it. To me Camino is the firefox for the Mac without all the extensions.

  95. I was having terrible problems with text-rendering in Firefox. The bold and italics were always separated from normal text by big spaces. Then, I reinstalled Arial and it magically solved all my problems. Hopefully this will work for any others who have had a similar problem.

  96. I’d have to assume that most of the firefox downloads were from developers, designers, journalists, and other browser manufacturers, not actual users. We’ll see the actual user numbers after firefox is available as via Windows Update. (Keep in mind, it’s an optional update — Microsoft isn’t forcing users to upgrade.)

  97. Interesting article. Perhaps you should have included some of the shortcomings of Safari and made a balanced argument.

    p gry :)

  98. I have installed different browsers for different view-results and different solutions…. (my experience shows that I needed them manytimes..) but it´s an interesting article anyway !!! (Maybe one day there will be the one browser that shows everything correctly…)

  99. Hi there,

    thanks for this great article! As a MacUser i’m glad to hear that our browser beats firefox ;-)

    I’m going to translate this article into german and give you response asap!

    Cheers,
    Michael

  100. There is a serious type tracking problem with Mac Firefox that doesn’t exist in any other Mac or Windows browser I’ve seen: certain typefaces will be rendered much too tightly at some sizes, but properly at others. It’s bizarre. For example, Mac Firefox will render 12px Georgia horribly but 13px Georgia fine! I’ve put up a couple of screenshots that show this clearly regardless of what browser/platform you’re on. You can see them here.

    Another problem (less serious, but still annoying) is that in Mac Firefox you can’t drag bookmarks and bookmark folders around within the regular bookmark menus, the way you can in Windows Firefox. You have to do everything from inside the “Organize Bookmarks” window, just like in other (non-Firefox) browsers.

  101. Knowing the little I do know about Apple, I would expect Safari to be a great browser. But i think Firefox still the BEST…

  102. interesting site here ! I still think for different pages it could be usefull to have differnt browsers installed…. some things work better with the one – some with the other….

  103. Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!

  104. This post titled ‘Safari better than Firefox?’ is very interesting. L. Jeffrey Zeldman spends a good deal of time listing all the things that are right with Firefox’s engine, but one thing that is very wrong is text rendering. Safari, according to Zeldman and my eyes, renders text much better than Firefox.

  105. tried a few workarounds including specifying the exact display name that the Font Book application gave me, to no avail. What sucks is that the few people who *do* have the proper font will probably be using a Mac and will get a subpar experience. Any ideas from the gallery now that this post has been dugg to high heaven?

  106. well, first of all i apologise if my english weren’t very accurate. I have a doubt, couldn’t this be a new avenue of malware, like somebody saying “Hey, firefox, please exploit that application on my behalf, if you don’t mind”, making exploits that are eminently local, to be reborn as network aware ones. we`d need some kind of security fence or sandbox to the content.
    thx,

  107. Pingback: TNTpixel

Comments are closed.