Monday, November 8th, 2010...2:29 am

Safari Web Browser on Windows and Font Rendering.

Using Apple’s latest version of its web browser, Safari 4.0 beta in Microsoft Windows, one cannot help but notice the differences in font rendering philosophies (and algorithms) between Apple’s OS X and Windows. With the latest version of Safari for Windows one can switch font rendering methods on the fly–from the Mac OS X style to Window’s font rendering style.

Font Rendering: Apple's OS X and Microsoft's Windows

When interacting with the OS X font rendering and smoothing in Safari on Windows the fonts themselves do not look quite as good as they do in Safari on a computer using the Mac OS. The rendering is close, and gives Windows users an acceptable approximation of how fonts look in Mac OS X, but the fonts are not as crisp, clean, exactingly executed as they are on a Mac computer. Most people have grown up with the Windows way of rendering fonts and see the Mac OS X way as odd, blurry. A small minority of people (but a large majority of typography and visual design experts) who use the Mac OS X as their primary OS are used to the Mac way of rendering fonts and see Windows fonts as looking jaggy, deformed, thin, and completely different that the same font in print.

Lets be clear, there are two different issues when comparing fonts in Microsoft’s Windows to fonts in Apple’s OS X–rendering and smoothing. People often confuse font smoothing as being entirely synonymous with font rendering, which is not exactly true. Rendering is about the exact shape of the letter-form/font and smoothing is an additional technique to augment that rendering, to bring it closer to visually-accurate perfection.

“Windows since Windows 98 has included a combination of font-level hinting and anti-aliasing. Since Windows XP, it has also supported subpixel rendering. The Windows rasterizer is an example of one that prioritizes clarity; by forcing text into integral coordinate positions (and not even antialiasing certain fonts at certain sizes), it becomes easier to read on the screen, but may appear somewhat different when printed. Mac OS X’s Quartz is distinguished by the use of floating-point positioning; it does not force glyphs into exact pixel locations, instead using various anti-aliasing techniques, including subpixel rendering, to position characters and lines more accurately. The result is that the on-screen display looks extremely similar to printed output, but can occasionally be difficult to read at smaller point sizes.”(Wikipedia)

The way Windows renders fonts on the screen was ideal for computing uses from 10 to 20 years ago, when most heavy computer users were either word-processing, using spreadsheets, or coding computer software. These were the pre-internet, post DOS days of computing 1986-1997, when the WYSIWYG GUI (What-You-See-Is-What-You-Get graphical user interface) had just come into full effect for the masses. Any seasoned computer user from this time most likely had learned most of his/her computing habits in the monochromatic, text-based user interface of Microsoft’s DOS.

In the pre-WYSIWYG days of DOS “fonts” were nothing but monochromatic, ASCII-character, dot-matrix-esque, dinosaur-technology letter-forms, and they were that because they had to be. On a mass-production scale, the technology for anything better was not yet made available. The early monochromatic, monospaced letter-forms that deserve to be called ‘characters’ more than ‘fonts’ or ‘letterforms’ were “hammered” into the monochromatic pixel screen, again, because they had to be. There was no font-smoothing technology available at that time, there were no multi-colored or even multi-greyscale displays, there was no vector-based fonts yet, nor was there any reason for there to be, as “computing experiences” were only with the primitive DOS operating system, with its “text-based” user interface. No computer company had produced the What-You-See-Is-What-You-Get graphical user interface for the masses as of yet. Even if the technology was available on $15,000 Xerox computers that a few businesses had, no one else had tasted the goodness of the new, fancy GUI’s to come.

However, in the mid 1980′s Apple’s Macintosh computer introduced a whole new way to interact with a personal computer. By borrowing from Xerox the wonderful (for the time) icon/image-based computing user interface, Apple changed the way the consumer masses (literally) viewed computers and the use of computers. Computers instantly became fun–they were like an advanced video game with their cool new applications that took advantage of the new GUI, like MacPaint and MacDraw. People were amazed by what those programs could do back then, with their creating and styling abilities for both text and graphics. Almost as quickly as Apple introduced the entirely new way of computing with the “WYSIWYG” graphical user interface, companies like Adobe were introducing their still-industry-leading visual image applications–Photoshop and Illustrator. Instantly the Mac become the computing platform for anyone who had anything to do with art, typography, photography, graphic design, image creation, and “PC’s” with their DOS interface (soon to be replaced for the masses with Microsoft’s Windows) were for people who did “number crunching” or “data processing.”

Differing approaches to font rendering... 

Differing approaches to font rendering…

Just a bit later in time and Microsoft decided to borrow the WYSIWYG interface that Apple had borrowed from Xerox, and brought to the masses with Windows. The new era of graphic based GUI’s were upon us. Just as quick as Microsoft created their WYSIWYG GUI for “IBM Clone” PC’s, software for graphic designers and visual artists were being ported to the Microsoft OS, even though most visual design companies were settled on using Macs. Products by Adobe, like Illustrator and Photoshop, Aldus’s extremely popular page layout creation software “Pagemaker,” and a few others not mentioned, enabled professional graphic designers to create in ways that used to be much more difficult, and allowed receptionists, data-processors, and anyone else to conjure up their own graphic creations right before their eyes. Almost as soon as the popularity of WYSIWYG based operating systems took hold, the need to make fonts look better was addressed. This was first done by the company Adobe when they introduced “ATM” Adobe Type Manager. ATM was like a godsend to graphic designers. ATM was here to save us from all those “pixelized” jagged lines that accompanied scaled fonts when viewed on-screen, or printed on a non-postscript printer, with both the Microsoft Windows OS and the Apple Mac OS.

ATM, along with vector-based fonts fixed the jagged fonts in both Windows and Mac’s OS, but there was still a more subtitle form of jagged fonts caused by the actual pixels on a computer’s display. Those pixels can only be so small, it used to be 72 pixels equaled an inch, and today it is still only around 96 pixels per inch. Compare that to 1,600 dpi (dots per inch) that gave glossy-papered magazines their silky smooth fonts–at any size, and you can see why some sort of compensation was still needed if fonts in a computer’s OS and applications were ever to come close to looking as visually appealing and accurate as fonts on the modern printed page. This is where font rendering–using a combination of techniques like anti-aliasing, subpixel rendering, and floating-point positioning–comes into play. Anti-Aliasing in computer typography is essentially a slight blurring of the edges of fonts to give them a smooth, vector-image-like, appearance on a computer screen made up of somewhat large-sized pixels as the smallest unit of display. Microsoft started to offer a crude form of operating-system-wide font smoothing with Windows 95 in 1996 and a year later Apple introduced its own crude from of anti-aliasing with OS 8.5. anti-aliasing, or anti-alised text became synonymously known as “font smoothing.”

In the mid to late 1990′s, OS-wide font smoothing was in its new and crude form on both of the main operating system platforms–Apple’s Mac OS and Microsoft’s Windows. In the coming years the divergent core philosophies of Apple and Microsoft would become apparent in their divergent font rendering methods. Apple, with much of its core users having a background in graphic/visual design chose a font rendering technique which kept the font looking as visually “true” to its printed page equivalent, i.e. the way the font was designed to look–even if a bit “more” smoothing was applied to each letter-form. Microsoft, with its enterprise word-processor, “data cruncher” and “everyday user” base of users was far less concerned with making a font look visually exact, and more concerned that the user could easily read the font, especially at small sizes–how most of Windows’ non-graphic/visual user base was seeing fonts. For early Windows users the actual design of a font was not that important. Back then anyone who even remotely cared about fonts, design, or the design of fonts was using a Macintosh. Remember, we are still back in a time period where the internet had barely started to hit the main-stream. For those times and those types of computing, Windows way of font rendering was appropriate enough.

As the later 1990′s turned into the early 2000′s the internet had positioned itself as the most important and fastest growing conduit for information, entertainment, and communication. Design for the printed page had taken a back seat to design for the internet, or design for the (computer) screen. As design transitioned away from print, Apple computer concurrently lost its position as the sole computing device for graphic or visual designers. By now virtually all specialized graphic design software was being produced for both the Mac and Windows operating systems. Visual design for the internet was (and still is) different that visual design for the printed page mostly because of the limitations to the visual presentation that early internet technologies imposed on both the creator and end-user, and the added user interaction possibilities that differentiate a website from a static image, i.e. print. Many of the limitation are still in place today, but little by little they are being erased. However, due to inertia–old habits take a long time to change–many of the old habits from the early internet days in the late 1990′s and early 2000 are still in place today. For instance, 10 years ago (if not using a bitmap image to represent text) we only had a few fonts that an internet designer could use in any of their designs. Today, 10 years into the 21 century and we still only have 6 fonts that cross all platforms–6 fonts! There must be over 6,000 typefaces and in the year 2009 we have a choice of 6. Maybe by 2010 we might have a few more, if we can get some certain web browser to conform to CSS 3 standards.

When visual design was no longer the domain of Mac-using, print-based graphic designers, and new designers with their new skill-sets based on a whole new set of limitations and needs imposed by the internet came into play, the necessity of having exactly-perfect looking fonts became far less important. Early web designers learned to live with limited font choices and poor rendering of the nuances of specific typefaces and if they needed to have large, nice-looking text they often used images (pictures of word-forms) created in Adobe’s Photoshop, instead of html code rendered through a browser with an operating systems’ fonts. As we now know, using images as fonts has its own set of drawbacks, like the inability of a search engine to read words that are rendered as images (pictures) and the increased file size. Web design was as much about content as it was about form, actually it was more about content (information) and less about form (style). For the most part, people need and want information more than they need or want style and this was and is reflected in internet design, especially when we remember all the limitations to form that early internet technologies imposed.

In the year 2000 Microsoft introduced a somewhat more advanced version of font rendering including “Subpixel rendering,” and its new font smoothing technique called “Clear Type.” subpixel rendering is a way to increase the apparent resolution of a computer’s liquid crystal display (LCD) by rendering pixels to take into account the screen type’s physical properties. It takes advantage of the fact that each pixel on a color LCD is actually composed of individual red, green, and blue subpixel stripes to anti-alias text with greater detail. (Wikipedia.com) It was better than the font rendering in windows 95, but windows XP’s font rendering, even with subpixel rendering and Clear Type font smoothing still adhered to the Microsoftian philosophy of hammering the font into the pixel-screen of the computer display, even if it meant changing the shape of the letter-form. Clear Type, which is the font smoothing technology used to this day on the Microsoft Window OS (be it XP, Vista, or 7), does use anti-alising, or blurring, of the font edges to a certain degree, yet still changes the shape of fonts (especially at small sizes) to conform to the “pixel-screen” of a computer displays and is less concerned if fonts do not visually appear the same as their printed page (i.e. the original font shape) equivalent. In essence, Microsoft had undone hundreds of years of typography design and creation by master-craftsmen so as to produce a more contrasty font to theoretically generate a better reading experience at small font sizes.

Right around the same time the Mac OS started using subpixel rendering, floating point positioning, and various other anti-alising techniques with its release of OS X. Over the years the font rendering on OS X has refined itself and added different settings for the amount of font smoothing and allows the user to turn off all smoothing for fonts under a specific user-defined size.

Times have changed and so have computing uses. The internet has changed the way most users interact with their computers. They are surfing web sites with impunity, they are using all types of modern-day apps that require sophisticatedly-designed user interfaces, they are telecommuting from home–able to do all their work with a computer and a high-speed internet connection, they are using all types of on-line social networking sites to stay in touch with their friends, they are sending and receiving e-mail, text messages, instant messages, at a rate never imagined in 1996. The masses, including you and me, have our eyes glued to some sort of computing device, be it desktop, notebook, or smartphone, much more often that the masses did in the pre internet, post-dos days of computing. Today, with the latest advances in the technology of web design like CSS (especially CSS 3), and advances in the technology of web presentation like browser technology, operating system technology, computing hardware itself, and other technologies not mentioned here, design for the screen can reach new levels of exactness and clarity. Todays designers want fonts to take a more-forward position in the design of websites and other designs for the screen. Designers want to use large fonts, designers want to use fonts different that the same 6 fonts that have been used for the last 15 years, and designers, if they have any typographical sense at all, want the fonts in their designs to look the way they were intended to look, not the way Windows’ version of font rendering changes the exacting-craftmanship of the font into some “computer version” of the font.

It is unfortunate that because the vast majority of computer users use Windows as their OS, and have done so for most of their computing using lives, they have become completely accustomed to the way Windows renders fonts. When Windows users see the Mac OS X’s way of rendering fonts which is less concerned with hammering the letterform into the pixel-grid for contrast, and more concerned with representing the exact true shape of the letter-form (font), even if it requires it to look a bit more “blurred,” they are usually discomforted by the change, and cry foul. Basically with Windows fonts you get inaccurately-shaped fonts that have high contrast and with Mac OS X you get fonts with a very accurate shape, if a bit more blurry at small sizes. For many of the reasons explained in this article, it is laughable to hear some visual designer, developer, UX person, or whomever say they are an expert in typography, yet they use a box running Microsoft’s Windows. You might be an expert in the way Microsoft’s font rendering wrecks the shape of letter-forms, and how to deal with that mess, but if you had a real expertise in, and love of, typography there is no way that you could be using anything but the Mac OS X as your system of choice, unless your enterprise company will not let you use a Mac, and even then, you should still be using a Mac as your personal computer of choice–if you really are a typography expert, and not just blowing hot air.

The debate about which font rendering system is “better” will never be solved. Theoretically, they are serving two different purposes. People like what they become accustomed to. Windows people think OS X fonts look blurry and OS X users think Windows fonts look like monochrome, jaggy, thin, visually-inaccurate, ancient-looking, low-resolution, ASCII character letter-forms. A reply to a blog at tuaw.com is some of the best 4 short paragraphs of writing in support of the OS X way of font rendering ever produced:

turkish said 10:17PM on 6-16-2007
The parent article is totally flawed and shows a lack of understanding about typography. Adhering to the original shape and from of the intended letter-form renders a much more readable font even if slightly more ‘blurry’ than a more crisp but ill-formed rendering of the original letter-form. Jared, the above poster, falsely buys into the idea that because MS uses ‘crisper’ forms that it is more legible, which is ludicrous. fonts ‘looking better’ means they are easier to read, and not the other way around.

The human brain doesn’t read text by looking from letter to letter, but by quickly comparing the overall shape and characteristics of the word, for 95% of the words we encounter. Only when encountering unusual words, do we slow down and look at the individual letters. OS X’s adherence to the true letter forms and spacing (kerning and tracking) means the the word blocks are much more easily recognizable and consistent across different sizes, faces, and mediums, in addition to being more purely aesthetically satisfying.

That said, familiarity also influences readability, and most of the poor souls of the world spend their days reading the terrible font rendering on Windows, where anti-aliasing isn’t even turned on at all by default. obviously when they see the OS X way it is quite jarring. but judging from the comments i’ve read on public forums ove rthe last week, it is way, WAY more common to find people who use windows acknowledging that after some time they realized that OS X rendering was better than it is to find the reverse. Jared is the first person i’ve seen in any forum say that, as an OS X user, he finds the windows rendering more readable.

As a designer i am always amazed at how terrible the font rendering is on windows and wouldn’t for a second say that i found it easier to read nor more pleasant in appearance. my favorite thing about Safari for windows is that now i can tell Windows users of my web sites (which do not cater to a broad general audience) that if they want to see the website as it was truly intended and to see the best presentation possible that they now have another, easier option besides buying a new computer.”

This brings us back to Apple’s latest web browser, Safari 4.0 (beta), and the specifically-unique aspect of this cross-platform, standards-compliant, web browser–its ability to provide users of Microsoft’s Windows OS a “window” into the way the Mac OS X renders fonts. While running Safari under Windows one can set the fonts to render the OS X way. Most Windows users are startled when they first see this entirely different way of rendering fonts, and have a knee-jerk reaction of dissatisfaction. In fact, Safari version 3.1 had no way to allow Windows users to change the font rendering back to the Windows way, and many called for the addition of this option. Apple listened, and provided that option in Safari 4.0. However, Windows users should have an open mind, and give Apple’s OS X font rendering system a try. If you allow yourself to become familiar with the different way fonts look, you might just begin to appreciate the way OS X renders fonts much more true to their intended shape when compared to the “computer type” that Microsoft has provided you for most of your computing life. I found a few people who exemplify exactly what I am talking about. In an article by Ars Technica about Safari 3.1 running in Windows, where the author was a bit upset that there was no way to switch font rendering from the OS X way to the Windows font rendering/smoothing, here are some of the responses by Windows users:

rfjason:
I’ve never used an Apple product before simply because I never had a reason. However, I tried Safari because I was curious. The browser itself was unimpressive (and 3.1 is still unimpressive). What DID impress me was font rendering.

I always thought fonts on windows looked pixelated and undercooked. Seeing Arial on Safari for the first time made my jaw drop for a moment before I got excited and started coding up some HTML to see how it rendered ALL my fonts.

Quite simply, the Apple font renderer takes my breath away. If I could have nothing else from that psycho-cult company, I would take the font renderer.”

astrosmash:
First I’ll say that I never liked Windows font rendering, being that I’ve always hated how Windows changes the shape of the font to line up with pixel boundaries. I had such high hopes that ClearType would solve the problem, but it doesn’t, nor does it do any horizontal anti-aliasing at all.

I’m sure there many are other people who feel who feel the way I do, but that doesn’t change the fact that Safari will just look plain weird on Windows because it’s behaving differently from other apps.

However, a main goal of Win32/Safari is not to simply gain overall market share but to give people who are interested in OS X a small of taste of the OS X experience, fonts and all, ultimately to sell more Macs.”

themadlibrarian:
You know, I’ve been using Safari on Windows, and I’ve gotten quite used to the font rendering even though it looks different to every other Windows app. I have Firefox, IE, and Safari, and often I’ll choose Safari over the other two specifically because of the way it renders fonts. I find it much easier on the eyes. If Apple ever decides to “fix” this as the author suggests, I hope that it’s a preference that can be set (ClearType or Apple Font Rendering, or some such) rather than a complete concession to ClearType.

Welcome to the world of typography appreciation! Get a Mac.

12 Comments

  • very informative article.

    I will try Safari with my new Windows 7 install.

  • Look at the screenshot ’50 Stunning…’.
    I find it ridiculous how the right vertical line in the u of ‘tutorial’ is not as black as compared to the left vertical. This is an artifact of mimicking how these characters would be positioned in print, but for *screen reading*, it sucks big time. Same for the h, n and u in ‘techniques’ on the line below it: to me it looks like the monitor has some phase alignment problems or there’s a spot my glasses: same blurry effect.

    I own a ’09 Mac, love the software, but hate the font rendering – not for brochure design, but for reading texts 8 hours per day or more.

    ~harm

  • Hello, I am a mac user, so I’m looking on this blurry s..t for last 6 years… I understand that mac is better for typography.. bla bla bla… but in user interface {and in e-mail and Safari…} doesn’t matter the typography and in the document window of design application it can be rendered truly “typographically” by the application.
    The real stupidity of this thing is that you must use one or another.

  • Hi Harm & Studio!

    Both of you are (literally) looking at this the wrong way. Go back and re-read What “Turkish” wrote about word-forms versus clarity of specific letter-forms. Again, if you are reading text, like an email, a website, a book, an article, etc., one tends to look at the entire word-form, skipping over individual letters unless the word in question is one the reader does not recognize. So, if you have a small vocabulary, or you are reading a foreign language then one might need to look at every individual letter in the word. Or, if one is using the OS for computer programming, or some other activity where reading each and every letter, number, and all the other odd characters on a keyboard that might make up, for example, a programming language, then you might have an argument.

  • Great article. One of the best blogs I have read on the subject.

  • The blurry fonts makes me want to rub my eyes.
    I’d realy hate to have to read something like say, this blog, using that technique.
    Smoothing is a technique that only works with very high resolutions, and thus large fonts sizes, because otherwise it will have too much artifacts. (or for people with poor vision.)

  • Ok, back to your Windows-world, then…

    Me, I prefer actual letterforms.

    have you seen fonts on an iPhone, which is over 160 ppi? Looks incredible, and this is the future, displays with very high ppi (pixels per inch)

    Seen fonts on Apple’s iPad? Incredible, windows world has no equilevent.

    But to each their own, you most likely grew up with microsoft machines…

  • How come, that while i’m in the office (using Windows XP) and i want to read a longer text, i always make a print, while at home on my Mac, i can keep reading from the screen for hours?

  • Funny, I was actually thinking about this today. I actually find it impossible to work with Microsoft’s ClearType for extended periods of time, and switch it off when I have to work on a Windows PC. The edges on ClearType-rendered fonts are very jagged, and don’t have enough fidelity to the original design. Mac OS X rendering is superior, and when I look at Mac-rendered text, it feels more like a book or a magazine. With Windows, it has a very strong ‘You’re looking at a computer that can’t render text well’ feeling. Funnily enough, Windows’ type rendering was one of the reasons why I sold my PC earlier this year to replace it with a Mac. (I’d had a Mac before that PC, but I bought the PC in a pinch. I regretted it about a week in.)

  • the iPhone 4, with its 300+ ppi display is making fonts on MS Windows, including Windows 7, look like 1994 dot-matrix.

    MS better catch up with its font rendering, soon we will have 200-300 ppi displays for the desktop, if people keep using desktops that is…………

    MS—providing type solutions for 20th century problems………10 years into the 21st century!

  • iphone 4…………future here today.

    fix your fonts MS

  • nice write up.

Leave a Reply