24

I have just noticed that Apple uses images for simple text headings. I guess its to enhance readability but still don't get on why images?

Check this - http://www.apple.com/why-mac/

Heading - "Make the ultimate upgrade. To a Mac." is an image.

Is there a valid reason for using an image instead of text for this header?

Improve this question
2
  • 1
    Still is content tagged as H1.
    – user16811
    Commented Sep 24, 2012 at 12:59
  • 2
    They don't seem to use @font-face for body text, which creates a visual inconsistency. Odd.
    – Mechanical snail
    Commented Sep 24, 2012 at 20:26

7 Answers 7

Reset to default
15

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".

Improve this answer
4
  • 14
    “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 Rudolph
    Commented Sep 24, 2012 at 12:09
  • My bad. I guess that places even more importance om Apples wish to control the experience.
    – Alvin
    Commented Sep 24, 2012 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-McKye
    Commented Sep 26, 2012 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.
    – DA01
    Commented Sep 26, 2012 at 15:45
14

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.

Improve this answer
7
  • 4
    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 Earl
    Commented Sep 24, 2012 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 :)
    – Matt
    Commented Sep 24, 2012 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.
    – kettlepot
    Commented Sep 24, 2012 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 Rudolph
    Commented Sep 25, 2012 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.
    – DA01
    Commented Sep 26, 2012 at 15:39
8

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.

Improve this answer
4
  • 9
    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 Rudolph
    Commented Sep 24, 2012 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 Earl
    Commented Sep 24, 2012 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.
    – Grant Hutchins
    Commented Sep 25, 2012 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 ♦
    Commented Sep 25, 2012 at 12:57
7

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Improve this answer
1
  • 2
    +1 for mentioning godawful tracking support in most browsers!
    – Jimmy Breck-McKye
    Commented Sep 26, 2012 at 14:57
1

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:

Improve this answer
2
  • 1
    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 ♦
    Commented Sep 26, 2012 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.
    – Iddo
    Commented Sep 30, 2012 at 8:34
0

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.

Improve this answer
-1

Getting closer to universal compatibility, plus it's easier to manage a graphical based website than a text based one.

Also, speaking of end-user view, graphics play more role in providing good looks to a website.

Improve this answer
4
  • 10
    "plus it's easier to manage a graphical based website than a text based one." How so?
    – Wander
    Commented Sep 24, 2012 at 9:12
  • Because you have to translate text but not images :P
    – MSalters
    Commented Sep 25, 2012 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).
    – ASertacAkkaya
    Commented Sep 25, 2012 at 22:00
  • 1
    Gotta downvote for implying the medium limits one's creativity.
    – DA01
    Commented Sep 26, 2012 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.