7 Answers
7

My guess would be that it's so the text renders consistently across all browsers. Not all browsers support font face. So images are the only way to have full control of the experience.

Many of the visitors to that page might have a old PC. So rather that risking having the page destroyed by improper rendering they show an image. So that the site conveys their message that "Macs are beautiful and just work".

“not all browsers support font face” – well, to be honest all modern browsers do, and do it several versions back (since at least 2009 in the case of Opera, and before for all other browsers). And the Apple website never really catered to outdated browsers. They use HTML5 features such as canvas extensively, which wasn’t supported in MSIE until version 9.
–
Konrad RudolphSep 24 '12 at 12:09

My bad. I guess that places even more importance om Apples wish to control the experience.
–
AlvinSep 24 '12 at 14:52

Another thing - most browsers don't have great support for optical tracking (they ignore non-integer letter spacing values). It's very hard to track text on the web and that's quite important in typography.
–
Jimmy Breck-McKyeSep 26 '12 at 14:55

"Support" is a fuzzy term when talking about browsers and operating systems. While technically the statement is correct, the quality of support varies wildly from browser to browser and OS to OS.
–
DA01Sep 26 '12 at 15:45

They're focussing on visual consistency, at the price of accessibility. It's not how the Web is supposed to work, but it's not much of a surprise that Apple take this stance, given their extremely successful marketing campaigns.

Provided they supply the alt text correctly, which they do, then there is no negative affect on accessibility. This answer seems to imply having text in an image is 'wrong'.
–
Joseph EarlSep 24 '12 at 15:32

4

It is wrong. Unless the text is found inside a content image, generally speaking using images to display the typeface you want is not the right way to go, especially with improved support for @font-faces. That said, if you must use images, an alt attribute still isn't going to cut it - I recommend the Phark method, but then this isn't stackoverflow :)
–
MattSep 24 '12 at 17:00

1

My guess as to why they do not use @font-face is because some browsers render it horribly (Chrome on Windows, I'm looking at you) and as Matt said there's generally less control over the visual aspect of the text, which is a thing Apple probably puts on the same level as accessibility in this case.
–
Gabriele CirulliSep 24 '12 at 20:23

1

@JosephEarl Sure there are negative effects. Try selecting the elements and copying/pasting them. The alt attribute doesn’t prevent the fact that the headers are lost through this process. This is very bad (and in fact there are better image replacement techniques which mitigate this … e.g. the Phark method Matt mentioned).
–
Konrad RudolphSep 25 '12 at 6:56

1

"if you must use images, an alt attribute still isn't going to cut it" = actually, in terms of accessibility, it should.
–
DA01Sep 26 '12 at 15:39

Apple's corporate font is Myriad. Myriad is probably prohibitively expensive for someone at the scale of Apple to license to serve on their web site. Also, Apple probably doesn't want to pay Adobe tons of money just to support its design decisions for its marketing websites. Also it makes the site faster with less to download.

As for accessibility; the image has an alt attribute with exactly the same text. So non-image browsers would just render the text as normal. It's perfectly accessible.

Also, Apple probably wants to avoid the flash of unstyled content before the font finishes loading. And a small black and white image is much less that a font in size. That particular image is 8KB.

TypeKit’s most expensive business plan is 400.00 USD/month. Granted, that’s not cheap but probably not “prohibitively expensive” for an enterprise such as Apple. “Also, it makes the site faster with less to download” – did you benchmark? I’d think that the opposite is true for even a small number of header images, if the font integration is properly optimised.
–
Konrad RudolphSep 24 '12 at 12:17

@KonradRudolph I'd wager the opposite is true for any one given page -- that is in general the amount of headers on a single page is low enough that the size of the images is less than the size of the font. Spread over a whole site the font is most likely smaller than all the headers combined, but often first-page load time is what is important to visitors.
–
Joseph EarlSep 24 '12 at 15:36

2

There's no way Typekit would serve up its fonts to all of apple.com's traffic for only $400.00 USD/month. They are in another league entirely, one that would require a special contract. Also, Apple probably wants to avoid the flash of unstyled content before the font finishes loading. And a small black and white image is much less that a font in size. That particular image is 8KB. What Joseph said about first-page load time is the important part here. Could also be an issue of performance and font rendering quality for the non-Apple devices that are the target audience of that page.
–
nertzySep 25 '12 at 12:32

2

Avoiding the 'flash of unstyled content' is the best suggestion in your post. That is potentially a valid point, so you should include that in your answer rather than just in a comment. (If you can find some sources about Apple talking about this that'd be ideal, but Apple rarely share any of their testing data so that is unlikely).
–
JonW♦Sep 25 '12 at 12:57

There are probably legacy reasons for this decision that should be considered, but there are at least a few reasonable explanations that I can think of:

Images allow complete control over typographical details such as tracking, kerning, ligatures and contextual alternates
CSS doesn't provide any author control over kerning or contextual alternates, very crude support for changing tracking, and only global control over ligatures.
The only real option they provide is text-rendering: optimizeLegibility, which respects kerning pairs declared in the font and turns on all ligatures (although apparently only Firefox uses ligatures, even with this option enabled).
This all just adds up to more control for the designer.

The lockup of the heading relative to the imagery matters to Apple
One of the benefits of an image-based heading is that you don't have to cede control over text wrapping to the browser. If (for whatever reason) the browser can't load the actual heading typeface, Apple's snappy copy could get unfortunately wrapped, potentially leading to orphans. Imagine the heading in your example read:

Make the ultimate
upgrade. To a
Mac.

It allows Apple to style the text in ways that aren’t yet possible with CSS
For instance, look at the gradient fill on the "Why you’ll love a Mac" text in the page heading. For now, there's no way to do that without some tricky/hacky techniques in CSS.

The font (Myriad Pro) is only publicly licensed to be hosted by Typekit (an Adobe service)
Apple is generally unlikely to be happy letting a large part of its identity be dependent on a remote service outside their control, especially for text on their homepage. While it's feasible that they could approach Adobe themselves to get a licence to host all the different weights of Myriad Pro that they use, doing so still wouldn't solve the issues outlined above.

Interestingly, the h3 elements on that page (the headings in each block underneath the main heading) use Myriad Pro too, but declare it in CSS (without any @font-face declaration). They'll use Myriad Pro if the user has it installed, otherwise it'll fall back on Lucida Grande (the OS X system font), then Lucida Sans Unicode, then Helvetica, Arial and finally the browser's default sans serif typeface. They clearly believe that text can afford to be shown in other typefaces if necessary.

Great discussion here. As per my research so far, Myriad was initially designed for print media. Thus, the rendering is not that crisp when it comes to web. Apple being known for those little touches, hence opted for images with alt text (Accessibility).

I don't think the reason would be price/ anything related to buying it from Adobe as Apple being one of the richest companies, price would be the last thing to bother about.

But the next question was - WHY NO CSS SPRITES? After all, Apple being known for using multiple high resolution images per webpage, why would add unnecessary additional http request?

Answer is very simple -- Accessibility as there is no alternative text for background images.

Detailed Explanation -
CSS background images which are by definition only of aesthetic value – not visual content of the document itself.That is it – images in CSS are only visual extras, not page content, hence they never need alternative text. “Rounded corner” or “silver gradient” does not help anybody as alternative text – on the contrary, it annoys the end users.

For 90% of website using pictures for text, the reason is a very basic technical reason. For a font to display proper on a web browser, the font has to be stored on the clients computer. If it isn't, than another (default) font will be used (which apple obviously doesn't want). Now there are 2 work arounds for the problem that are both becoming increasingly more popular, but still although most browsers support them, not ALL of them do, so it is still common to see pictures used instead of text. The workarounds are:

https://typekit.com - Lets you use font from their font library in your website. (Also evadible for free for any Adobe Creative Cloud Subscribers).

Ok, these are some options for what else Apple could have done, but it doesn't really answer the question of why Apple went with images instead of any of these options.
–
JonW♦Sep 26 '12 at 20:15

Well images have been the accepted approach for this problem for many years, and both of these solutions are relatively new and aren't yet supported by all browsers (as I mentioned in my answer) and that is why apple (and many other companies for that matter) are still using pictures instead of text and will keep on doing so for the next 1-3 years until both of these solutions become widely supported by browsers.
–
IddoSep 30 '12 at 8:34

"plus it's easier to manage a graphical based website than a text based one." How so?
–
WanderSep 24 '12 at 9:12

Because you have to translate text but not images :P
–
MSaltersSep 25 '12 at 11:31

@captain Lesser hire fees, lesser changes on backend, no need to worry about compatibility. And your creativity on a graphical design can be unlimited, unlike code-based styling where you're limited to certain options(XHTML/CSS), and for more you will usually have to give up on compatibility(Like when using CSS3).
–
TheDeadLikeSep 25 '12 at 22:00