Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

The Ails Of Typographic Anti-Aliasing

As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we’ll have to rely on software advances to fix these problems.

The Typographic Ails of Anti-Aliasing

Enter anti-aliasing: the next best thing to a world of higher-resolution monitors. The concept of anti-aliasing is fairly simple: add semi-transparent pixels along the edges of letterforms to smooth the appearance of the “stair-step” effect.

You may also be interested in the following related posts:

However, many factors and technologies determine the actual effectiveness of the process: hinting, subpixel rendering, software capabilities and operating system specifications, to name a few. Here, we’ll look at what you as a designer can do to improve the results of anti-aliasing with Photoshop, Flash and CSS. Plus, we’ll explain the constraints of hardware, browsers and operating systems.

Technologies Link

Aliased vs. Anti-Aliased Link

It takes only a quick glance to realize that anti-aliasing is extremely important to making text legible. With few exceptions, anti-aliased text can dramatically reduce eye strain, not to mention that it renders glyphs much closer to their intended design. Because of this, designers must decide how, not if, anti-aliasing should be used. This decision is based on a number of factors that one has to consider in the process from design to delivery.

42pt “Goudy Oldstyle Bold”: aliased and anti-aliased versions

Font Hinting Link

Most text rendering engines rely heavily on hinting to determine exactly which areas of a glyph should be smoothed. Font hinting, or instructing, uses tables of mathematical instructions to align letterforms to the pixel grid and to determine which pixels should be grayscaled. Though most software provides auto-hinting using standardized algorithms, ideally the process would be done manually by the type designer and embedded in the file.

Put simply, these instructions work by modifying the position of structurally important points, such as those found along splines or at the base of stems, and aligning them at pixel boundaries. Intermediate points are then repositioned based on their relationship to the primary points. Using an open-source font editor, such as FontForge4, allows you to view and edit a font’s hinting information. See how much work goes into producing a clear glyph; your appreciation of type designers and font engineers will certainly increase.

Hinted and Unhinted type both have their pros and cons, leaving the designer to choose between legibility or typeface integrity
Hinted and unhinted type both have their pros and cons, leaving the designer to choose between legibility and typeface integrity.

Viewing the hints for Goudy Old Style's 'H' using FontForge
Viewing the hints for Goudy Oldstyle’s “H” using FontForge.

Subpixel Rendering Link

Every pixel on a standard monitor consists of three components: a red, a green and a blue. The brightness of each of these sub-pixels is controlled independently, and because of their small size, our eyes blend the three into one solid-colored pixel. Typical anti-aliasing sets even values for each of these subpixels, resulting in full grayscale pixels. Subpixel rendering exploits the individuality of each single-colored component and uses it to increase the perceived resolution of the monitor. This allows a pixel to take on visual weight from neighboring pixels, thereby allowing type to be smoothed in smaller increments. Rendering the type in this manner can produce subtle color shifts visible along the edges of glyphs.

Subpixel rendering relies on a perfectly aligned grid of pixels, which makes LCD flat panels the only type of monitor on which this technique works consistently. CRT monitors suffer from inaccuracies and oddly distributed pixels, making subpixel rendering extremely difficult to pull off. Even LCD monitors have variations in their subpixel arrangement that must be accounted for; some monitors are arranged in the order of RGB, while others are ordered BGR.

Subpixel rendering triples the perceived resolution
Subpixel rendering triples the perceived resolution by setting each color component separately.

Subpixel rendering (bottom) produces more desireable results than standard rendering (top), but adopts color fringes
Subpixel rendering produces more desireable results than standard rendering, but adopts color fringes.

Input Link

As designers and developers, we have limited control over how type is ultimately seen by the end user, but by using the proper delivery method, we can ensure an optimized presentation. That said, we’ll look here at the three most common ways in which text is sent to the user: HTML, images and sIFR. Each of these methods has an ideal use that, when properly implemented, can dramatically increase legibility and thus the overall user experience.

HTML Text Link

HTML text undoubtedly accounts for the majority of text found on the Web. Until recently, designers had absolutely no control over anti-aliasing with client-side technologies. CSS 3 introduces two new ways to control how HTML text is delivered: font-smooth and @font-face.

Font-smooth5 allows you to control when smoothing is used but not how it’s used; the anti-aliasing method is still controlled by the user’s environment. This setting is not widely supported yet but may prove useful by allowing us to turn anti-aliasing off at small point sizes — where type often becomes blurry. It may become doubly useful when more complex and non-browser-safe fonts are embedded with the new @font-face rule.

The @font-face rule6 is an exciting new feature of CSS 3 that designers have been waiting years for. Although we’ve been able to add obscure typefaces to font stacks for quite some time, a large majority of users don’t have high-end fonts on their local machines and end up with a typical Web-safe font (e.g. Times New Roman substituted for Adobe Garamond Pro). By allowing the browser to import a font file from a URL, we can now serve the user any font we’d like without relying on their font library. This means that we can serve not only more unique fonts but also those that are better hinted and more legible.

Despite the promise this feature holds to create a more beautiful world of online typography, we may still see designers opt for fonts like Verdana, which have been designed and hinted specifically for on-screen viewing. Some of our favorite fonts from the print world just look bad when rendered on the screen, especially at smaller text sizes. Surely we’ll see new industry segments arise as a result of the support of @font-face, including an influx of browser-hinted typefaces made available through services such as typekit7.

Bickham Script Pro embedded using @font-face and rendered in Safari 4 and Firefox 3. Notice the OpenType swashes and ligatures supported in Firefox 3!

Text as Image Link

Serving text as an image may have limited uses, but it allows you to fine-tune every letter if necessary. Photoshop provides five pre-set anti-alias settings, which determine pixel values using different algorithms in conjunction with the document’s pixel grid. Unfortunately, none of these settings allow for subpixel rendering, but by using the Free Transform option to nudge the layer’s position, you can effectively force the algorithms into rendering cleaner. Each setting allows a different amount of origins, and some only produce variations when translated along the x-axis. Below is a table of available transformations.

Available Photoshop transformations

Outlines vs Photoshop's None Setting
Aliased text, created using the None setting, has a very limited use and typically looks best between point sizes of 9 and 18. Sizes lower than this range will result in unidentifiable characters, and larger sizes will lead to increased character weight and overly jagged edges. Depending on the font, sometimes two different point sizes will render at the same height, causing a shift in letter spacing, width and x-height. For example, 14pt Arial renders 10 pixels high with an x-height of 8 pixels. Arial at 13pts also sits 10 pixels high but has an x-height of only 7 pixels — a slight but very perceivable difference. When tightly tracked, this setting may also require manual kerning, because some letters will sit pixel to pixel against each other.

13pt and 14pt Arial renders with the same cap-height, but different x-heights
13pt and 14pt Arial render with the same cap height but different x-heights.

Outlines vs Photoshop's Sharp Setting
The Sharp setting uses very tight grid-fitting and produces sharp, if not too sharp, type. The plotting of pixels with this setting is very similar to how the None setting plots them but allows for a certain degree of smoothing. In fact, if pixels are set atop one another, you can actually see that a majority of solid pixels carry over from None to Sharp. While the cap height and x-height typically remain the same, you might see an increase in character weight and width. Sharp has a tendency to completely cut subtle shape variations from rendering and sometimes causes inconsistent letterforms, so if typeface integrity is important to you, you may want to try a different setting.

Outlines vs Photoshop's Crisp Setting
The Crisp setting maintains much of the font’s original weight and curvature but cleans up some of the awkward pixels created by light serifs and thin strokes — which is especially useful for larger point sizes. With the Crisp setting, however, you sacrifice the ability to nudge the layer on the y-axis.

Outlines vs Photoshop's Strong Setting
The Strong setting is notorious for adding unnecessary weight to a typeface, but it provides the most freedom with translating the origin, with 32 x-axis variations and 16 on the y-axis. The variety of origins with this setting can come in very handy when working with complex letterforms. Strong may also be useful when working with a typeface that has very thin strokes.

Animated nudging with 32 different anti-aliasing origins
Animated nudging with 32 different anti-aliasing origins
Animated nudging with 32 different anti-aliasing origins
Subtle animation showing the 32 anti-aliasing origins at 36pt, 18pt and 12pt.

Outlines vs Photoshop's Smooth Setting
The Smooth setting is the closest to unhinted anti-aliasing and therefore remains truest to the original glyph shape. This algorithm is best used on medium-sized to large type, because it tends to render very light and often blurry at smaller point sizes. If used with an appropriate typeface at a proper size and if the origin is properly adjusted, this setting can produce a beautiful balance between crispness and letterform fidelity.

Shape Layer
If Photoshop’s hinted algorithms all produce undesirable results, you may want to attempt using unhinted anti-aliasing by way of converting the type to a shape layer. This allows you access to the original outlines of the font, which draw values based on the percentage of the pixel enclosed in the shape. What you sacrifice in editable type, you make up for in origin transformations: 32 on both the x- and y-axes. Though usually a last resort, don’t rule out the possibility of using a Shape Layer; it can often produce much better results than Photoshop’s algorithms.

Fractional Widths
Another, more veiled, setting that sometimes helps with anti-aliasing type at small point sizes is the Fractional Widths option located in the Character palette’s fly-out menu. With this setting turned on, the character spacing is set to varying fractions of pixels. This is ideal for auto-kerned type at large sizes but tends to bump the type either too close together or too far apart at smaller sizes. Turning this option off will round all character spacing to whole pixel values, which may help better space the problematic type. This is a hit-or-miss option, so use it wisely.

Decimal Point Sizes
Typophiles might cringe at the idea of using a decimal point size, but when designing for digital media, standard point sizes don’t always conform to the pixel grid. By using decimal point sizes and either the Smooth or Strong anti-alias setting, you can usually bring a blurry typeface back into focus. Please note that I am not condoning the use of vertical or horizontal scale!

Using decimal values can dramatically improve anti-aliasing results
Using decimal values can dramatically improve anti-aliasing results, as seen above. Top: 16pt Goudy Oldstyle with Strong Anti-Aliasing. Bottom: 16.5pt Goudy Oldstyle with Strong Anti-Aliasing.

sIFR Text Link

Using sIFR to replace headers with a block of Flash brings benefits beyond the obvious. Yes, it solves the problem of having to use CSS image replacement techniques to provide a wider array of fonts, but it also allows incredible control over how the type is anti-aliased. Particularly useful are the sharpness and thickness settings, which control the edges of glyphs. (If only Photoshop had these settings!) You can set and tweak a number of settings to fit your implementation; and they can be controlled by passing keyword arguments inside the sifr-config.js file. These settings include:

sharpness (number)
A value between -400 and 400, which determines how sharp (positive number) or soft (negative number) the edges of the glyphs will be.
thickness (number)
A value between -200 and 200, which sets the thickness of the glyph edges.
gridFitType (string)
Possible values are: “none,” “pixel” and “subpixel.” This specifies how prominently the horizontal and vertical lines are fit to the monitor’s pixel grid. “Pixel” and “subpixel” usually produce the best results.
antiAliasType (string)
This is set by default to “advanced,” which allows the anti-alias settings above to be applied. It can also be set to “normal,” but this option limits sIFR’s rendering capabilites to accommodate earlier versions of Flash Player and overrides any of the properties above.

Subpixel rendering (bottom) produces more desireable results than standard rendering (top), but adopts color fringes
sIFR allows you to precisely customize your anti-alias settings. Notice that the custom setting is slightly thinner and crisper.

Output Link

Displays Link

Because very few people have monitors with resolutions higher than 100 pixels per inch (PPI), we have to rely on software to trick our eyes into thinking that the resolution is greater than it really is. Some advances are being made by display manufacturers, but they are still beyond the average Web surfer’s budget.

A typical LCD monitor (which you’re probably reading this on) has a dot pitch8 of around .20 or .30 millimeters. New technologies, such as the Ferro Liquid Crystal display9 are touted to reduce that number to .012 millimeters. Bringing this technology to the mainstream would bring tremendous advantages to the world of design and on-screen reading. However, until they become affordable for the average consumer, we’ll be relying on software advances.

Operating System Link

Microsoft and Apple have both delivered technological advances in the world of anti-aliasing, but they have somewhat different approaches. The current versions of both operating systems use anti-aliasing and subpixel rendering. Both vendors have dramatically increased legibility within their operating systems, but controversy has arisen over the aesthetics and legibilty of each. Microsoft’s entry in the competition — which is characterized by tight grid-fitting — is aptly named ClearType. By forcing characters tightly into the pixel grid, ClearType increases contrast along the edges of glyphs and renders more crisply.

Distinctly different is Apple’s Quartz 2D, which puts emphasis on maintaining the shape and integrity of the typeface. This certainly makes sense, given the high proportion of designers who work on Macs. But Quartz rendered type often appears blurry, which can cause eye strain with extended reading.

Windows Vista and Window XP both use Microsoft’s ClearType rendered either by Windows Presentation Foundation10 or Graphics Device Interface11; both handle text in a very similar fashion, though WPF doesn’t snap horizontally to the pixel grid. Windows XP actually comes defaulted to monochromatic anti-aliasing.

But ClearType can be turned on by going to Control Panel → Appearance and Themes → Display, clicking on the “Appearance” tab, selecting “Effects…” and changing the drop-down from “Standard” to “ClearType.” The operating system itself allows for very little customization of ClearType; you basically choose between on and off. Microsoft’s ClearType Tuner PowerToy12, though, allows some control over how it renders. Windows 7 brings a new rendering platform, named DirectWrite, that introduces subpixel positioning and y-direction anti-aliasing. As seen in this presentation13, the advances made with DirectWrite are quite impressive and sure to be adopted by other vendors.

Apple’s Quartz 2D now renders type using Core Text14, which has recently replaced Apple Type Services15. The Quartz 2D displays type much closer to the typeface’s original design, which is similar to how you might expect to see it in print form. While this seems like a good idea from a design perspective, it doesn’t hold up with legibility, at least not on common LCD screens. Quartz text could conceivably appear much better if we were using higher-resolution monitors. Because Apple has complete control over both the operating system and the hardware that it runs on, perhaps a 200 PPI iMac is just around the corner. We can hope!

Browsers Link

The most current browsers today all inherit the anti-alias settings of the operating system. But with one anomaly. Firefox 3 in Mac OS X seems to inherit the operating system’s settings but also seems to apply more precise grid-fitting and kerning. Perhaps Mozilla is attempting to improve on Quartz’s blurry rendering.

Unfortunately, we have no way to control or even tell how the user’s browser will render text. What we can do is understand the nuances of each browser and make sure that we deliver a suitable presentation across all viewing platforms. Below is a list of browser capabilites and type samples to help you gain some insight into how they handle anti-aliasing.

Windows XP and Vista:

  • IE6, IE7 and IE8:
  • Firefox 2 and 3:
  • Safari 4:
  • Chrome:


  • Firefox 2 in OS X:
  • Firefox 3 in OS X (inherits from operating system but with slightly enhanced kerning — most noticeable in the word “Georgia”):
  • Safari 4 in OS X:
  • Opera:

Conclusion Link

Though many advances have been made in rendering on-screen typography, most have been aimed at treating the symptoms and not the disease. Until everyone has a 200 PPI monitor sitting on their desk, it will be up to designers and developers to use the proper technologies to ensure legibility without degrading the design of the typeface.

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28

↑ Back to top Tweet itShare on Facebook

Tom Giannattasio happily makes things at nclud. He works as an Editor for Smashing Magazine and teaches at Boston University Center for Digital Imaging Arts. He loves to experiment and share his work on his personal site: attasi.

  1. 1

    Finally the comprehensive article about text anti-aliasing and setting it up. Very well done Tom! Thank you.

  2. 2

    And about linux gnome or kde :¬)

  3. 3

    I don’t know, I’ve always understood all monitors and televisions to work on 72dpi and I have never had any problems with pixelated images or text unless you unnaturally stretch them or sometimes rotating non vectors in photoshop.

  4. 4

    Barry Schwartz

    November 2, 2009 8:57 pm

    Printing with ordinary laser printers on typical paper isn’t as good as people think it is, either, though I guess there isn’t much that the user can do about that. :)

  5. 5

    I’ve always used Smooth antialiasing only when I needed to put text on a non-90-degree line (e.g. rotated 30 degrees or such), as it produces a much cleaner line – whereas the other types of AA tend to produce a series of “stepped” characters.

    As for Linux, well, its typographical rendering seems not to have progressed much past where it was ten years ago. The way it treats type, to my eye, is a huge turn-off for the OS (and especially its treatment of that Verdana-esque font everywhere).

    • 6

      Some distros like Ubuntu are working hard on font rendering. Visually I can say I see improvements, but I don’t know how well they are comparatively.

  6. 7

    Rajesh Sharma

    November 2, 2009 3:53 pm

    A great article. thank you !!

  7. 8

    Frederick Luna

    November 2, 2009 4:07 pm

    simply great!

  8. 9

    Design Informer

    November 2, 2009 4:22 pm

    Wow! Very detailed post about this subject. I don’t think I have ever read a post about anti-aliasing before.

  9. 10

    Does anyone know how can i use windows default anti-alias (or cleartype) in adobe photoshop? If want to draw a webdesign sketch i want to has same cleartype… photoshop antialiases suck in smaller fonts.

    • 11

      Why? Just use whatever photoshop does. You cant reproduce it for everyone so just roll with something close enough is good enough, esp for body on mockups.

      • 12

        Shekhar Somani

        February 2, 2012 9:32 am

        The requirement is not that illogical. In certain situations or geographical areas, where most of the visitor base is expected to use Windows, it is good to have it in the mock design what users (and the client of course) is going to see. Furthermore, more and more part of text is rendered through browser as we use HTML/CSS and not images to build a web page (like in navigation bars and other elements), which makes it necessary to have exact preview.

        If we see above, text is rendered very similar in all major browsers on Windows with ClearType.

        I recently had to go as far as to make-up some text in browser and then screenshot them into Photoshop because client demanded to have exact representation.

  10. 13

    Design YouLLLove

    November 2, 2009 4:39 pm

    I was expecting this article. Great job!

  11. 14

    great piece for someone like me that loves typography but sometimes miss some more knowledge on it. good one :)

  12. 15

    excellent. this describes what it is, and there are those of us that wish to know proper ways to fix or avert issues. One for example is small font anti-aliasing causing pixel collision inter-character. There must be some software method to detect and correct such blur issues.

  13. 16

    absolutely smashing article. what a fantastic and comprehensive resource. Thank you

  14. 17

    Amazing article. Just wondering how Mac anti-alias can affect the work of a web designer, since he/she must be aware about how different the font can render on Windows:
    Quartz render looks a bit compressed in your examples. And yes, I’m planning to switch to Mac and I’m a bit worried about working on a platform that is not popular among my clients.

    • 18

      You can always install Windows and/or Linux on a Mac; and with Parallels or VMware you don’t even have to reboot to view how fonts render on each platform.

  15. 19

    What a great resource, you went so in depth! Just brilliant!

  16. 20

    “The @font-face rule is an exciting new feature of CSS 3 …”

    @font-face has been around since CSS2.

  17. 23

    Great article but one minor correction – WPF today forces uses sub-pixel positioning on the X-axis (ideal widths). In .NET 4.0 WPF uses DirectWrite which allows GDI compatible widths to be used thus turning off the sub-pixel positioning (it can be quite blurry in a lot of scenarios).


  18. 24

    Nice article, however, it’s a but useless for me :-)

  19. 25

    thanks very informative…..

  20. 26

    Great article, one possible expansion for it, could be about the rendering of small type on different colour backgrounds. I find that many times I have to use ‘strong’ anti aliasing to make small white text legible on a black background for example… Again experimentation is the key. Fantastic post!

  21. 27

    It gives me a sad feeling that we have to work with this type of BS.
    For some reason, it feels like we’re always running behind the facts.
    Even if we find a solution it’ll still take years for our moron IE6 users to drop it.
    And yeah i said moron users, come get me!

  22. 28

    @Phil: i ignored IE6 last time for a big project and i feel good.

  23. 29

    A really smart and articulate job. Thanks!

  24. 30


    November 3, 2009 1:10 am

    An excellent article, as usual. Very interesting and clear at the same time.

  25. 31

    Great article!
    And thx for the ferrofluid display info ;)

  26. 32

    great article

    because I was wondering how antialiasing really looks on my new macbook pro I took a super makro shot –

    probably I should have chosen a white on black font as well, this is a shot of itunes

  27. 33

    I still don’t understand why Photoshop can’t reproduce ClearType or other browser’s displaying techniques for previewing. It would be such a great help being able to show clients EXACTLY what they’re going to see in HTML. Now there’s sometimes discussion about legibility of (mostly small) texts which seemed okay in Photoshop but not in HTML or vice versa.

    Come on Adobe!

  28. 35

    Great article. Fonts are a tough subject to learn for me so it’s always good to see such a well done article

  29. 36

    This is very useful and in-depth all the way to the individual pixel. Excellent. :3

  30. 37

    I’ve always wondered about this great job Tom! I’ll definitely reference this article for sure when the proper application of it is needed!

  31. 38

    It’s a great post, excellent work guys.
    Thanks to share it!

  32. 39

    @Ruben #28: I think you are missing the point a little: there is no such thing as “exactly what they are going to get”. There are so many variables built into this that are completely out of your hands. If you want to trick the clients, show them what it will look like on their office hardware. Nobody else will see it that way.

  33. 40

    Very informative and thorough article. Aliasing vs. sharpness + resolution x load time (divided by) IE6 = Arial 12pt.


  34. 41

    Will there be a problem about licensed fonts when using @font-face?

    • 42

      thomas giannattasio

      November 3, 2009 9:18 am

      There definitely is a lot of talk about licensing issues with @font-face. However, companies are springing up in hopes of solving the problem while making a buck. Check out TypeKit – – for more information. They’re currently only open to those with invites. I have a few left if anyone is interested.

  35. 43

    Fireworks antialias is really crappy compared to photoshop, as well as the kerning.

  36. 44

    Thanks for this information, never paid attention to this..

  37. 45

    Long time awaited article. Thanks Smashy for clearing it out.

  38. 46


    One pseudo-correction – Safari 4 for Windows (XP, certainly) does offer the option of using Macintosh’s font smoothing technology instead of the native Windows options. (In Safari 3 for Windows, this was always turned on.)

  39. 47

    what an invaluable resource. thank you so much.

  40. 48

    Wow that is the most incredible article I’ve seen on web-type in a long time. Thank you so much!

  41. 49

    Great article…..will certainly be sending this link on to friends. Thanks!

  42. 50

    I hate the subpixel rendering technic, and i really wonder how Windows users can stand it.

  43. 51

    its a great article, i really learned a lot. thanks

  44. 52

    Great article! Very informative. Thanks.

  45. 53

    Brian Maloney

    November 4, 2009 5:39 am

    Thanks, I knew a lot of that in parts, but that was an incredibly comprehensive article with fabulous links. It was very informing to read through it so systematically! Much obliged!

  46. 54

    Webmisstress Anne

    November 4, 2009 8:39 am

    Who the hell are you? Where have you come from? Why have you not appeared before now to help me…?

    Best, most comprehensive and understandable piece on the subject I’ve ever read in 19 years of messing about on computers.


  47. 55

    Very well done article. I was always concerned about how fonts display differently across browsers and operating systems. Thanks!

  48. 56

    Interesting and informative. Interesting that your title graphic showed anti-aliasing on a pattern background which is almost impossible to effectively anti-alias on. Any thoughts on that?

  49. 57


    As the iPhone has shown, the problem isn’t the hardware, it’s the software. By starting with a clean slate, it was easy for Apple to put the iPhone on a 160dpi screen. Other phone manufacturers have had little trouble following suit.

    You can bet your lucky dime though that Apple is highly motivated to making high DPI screens a reality. It would be a massive platform discriminator, and it would take 2 to 3 Windows release cycles to catch up which would secure Apple’s supremacy over the PC for at least 5 years.

    It’s funny then that Apple has yet to do this. They told developers at WWDC 2004 to be ready for “resolution independence” in Tiger. At the 2006 WWDC, it announced resolution independence for Leopard. It wasn’t even mentioned for Snow Leopard. Apple is the king of smooth transitions, having gone from PowerPC to Intel, and from 32 to 64 bit without a hitch. Why then has this simple thing eluded them then?

    Because it’s really, truly, unbelievably difficult to pull off. Right now, in a web context, we’re still left with no real solution for scaling images. A 1024px image is tiny on a 300dpi screen and until the whole web stops using the “px” unit for size, we’re going to be zooming web pages and other hacks to maintain layout fidelity. The situation is much, much worse for Operating System applications.

    We live in hope. OS X 10.7?

  50. 58

    Awesome article! I have been very curious about anti-aliasing and this is a very robust well of knowledge. My curiosity has been quenched.

    (I love the redesign by the way!)

  51. 59

    Bradley Hawkins

    November 8, 2009 5:39 pm

    Great Article Tom

  52. 60

    Just wanted to say it is nice to finally see a well written article on this website, rather than “20 great” something-or-others. Great job!

  53. 61

    Something unrelated to the (nevertheless great) post:

    Is there a way to subscribe via RSS to articles in the Fonts category without getting all the rest of Smashing Magazine? (I’m just a typography lover, not a professional webdesigner)

  54. 62

    Muhammad Usman Arshad

    December 17, 2009 12:29 am

    Thanks a lot Thomas, you did a very great job, it’s very useful deeply information, thanks again dude :-) keep the good work.

  55. 63

    Very useful article, fonts can be quite tricky. Thanks for sharing :)!

  56. 64

    I just realized that I was reading this article in firefox, zoomed in just a bit. Meaning that all those images comparing the different renderings were lost on me.

  57. 65

    holy crap, – brilliant article. thanks

    Im gonna make a wild prediction and that the next imacs will indeed incorporate the ‘retina screen resolution’ [326 ppi ] as per iPhone 4. Finally fantastic looking type and image on screen – which has for so long been the scourge of digital! The implications wil be massive – and i guess antialiasing wil become almost irrelevant.

  58. 66

    Eric Magnuson

    March 14, 2011 11:45 am

    This is an amazing article! Thanks for putting all this info together! It’s very very informative.

  59. 67

    What if pixels were divided into 9 subpixels instead of three? Wouldn’t anti-aliasing work better since it could use subpixels to their full advantage both vertically and horizontally (as opposed to just horizontally with 3 subpixels)? That way those of us without retina displays/ridiculously high def displays could have better anti-aliasing (and possibly even apply the same to retina screens).


↑ Back to top