Silverlight vs. Flash vs. Photoshop Text Rendering

Curious about text rendering characteristics between Flash 10, Silverlight 4.0 and Photoshop, I created two small applications, one in Flash CS 4, and one in Visual Studio 2010. The Silverlight 4.0 tests are using the release candidate which was current as of March 23, 2010.

I used Times New Roman in all of the tests and used full text justification in all of the examples.

There are two types of text rendering available in Silverlight, Animated and ClearType (the default).

(You may click on images to see full size versions in a new window – I did that so that it would be easy for you to move the images around and do your own side-by-side comparisons).

image

Flash 10 has similar offerings, with an Anti-alias for readability and anti-alias for animation option:

 image

Side by side using the animated mode:

image

Then, the options for “readability” or the default compared side-by-side. (Note that I flipped the apps around so they’d layer correctly below)

image

To my eye, I preferred the Flash Anti-alias for Readability option just slightly over the other options. The animation friendly options left the text feeling too soft for me. What I didn’t like about the Silverlight ClearType option was the darkness of the font overall.

Zoomed in (with Silverlight on the top). You’ll see how the Silverlight text uses darker strokes overall.

 image

The levels of the “anti-alias for readability” text:

image

Whereas the levels of the Silverlight ClearType option:

image

Interesting difference.

I next tweaked the foreground color of the text in the Silverlight ClearType example, deciding that the black was too black for comfortable on screen reading.

I set the foreground of the text to #3d3d3d (click image to enlarge).

TweakSideBySide

Very close. So close that I’m not sure that I could distinguish between the two renderings without detailed study. The lightening of the foreground color made the text look a bit softer than the original, but not so far as to make the text blurry.

If you were wondering what the appearance of the text would be when aliased, here’s Photoshop’s rendering (I’m warning you … you wont’ like it!):

None

Below, you can see how the bowl of the letter ‘a’ in Flash 10 and the area along the meanline are nearly disconnected from the stem. This general lightness appears throughout Flash’s rendering of Times New Roman.

 image

Since my original inspiration was to determine how to make text look as sharp as possible when using Silverlight, I wanted to see what I liked best from what was available readily on my Windows 7 PC. I used:

  1. Chrome
  2. Firefox
  3. Flash (CS4 / 10.0)
  4. Internet Explorer 8
  5. Internet Explorer 9 Preview (March 2010)
  6. Adobe Illustrator CS4
  7. Adobe Photoshop CS5
  8. Safari
  9. Silverlight 4 (RC)

For a text-rendering side by side comparison, I put the block of text next to the text from Photoshop Crisp, Silverlight, and Flash.

Chrome

 Firefox

 FlashAnimation

 FlashReadability

 IE8

 IE9

 IllustratorCS4

PhotoshopNone

 PhotoshopCrisp

 PhotoshopSharp

 PhotoshopSmooth

 Safari

 SafariBestForLCD

 SilverlightAnimation

 SilverlightCleartype

 SilverlightCleartypeGray

 Word2007

Going further, I’ve created zoomed images of the lowercase letter “a” from the sources mentioned above. I’m amazed how differently an anti-aliased “a” can be when different companies all approach the problem with unique algorithms.

Chrome

Chrome

Firefox

Firefox

Flash Animation

 FlashAnimation

Flash Readability

FlashReadability

Internet Explorer 8

IE8

Internet Explorer 9

IE9

Adobe Illustrator CS 4

Illustrator

Photoshop (No Anti-alias option selected)

 PhotoshopNone

Photoshop Crisp

PhotoshopCrisp

Photoshop Sharp

 PhotoshopSharp

Photoshop Smooth

 PhotoshopSmooth

Safari (Default)

 Safari

Safari (Best for LCD)

 SafariBestForLCD

Silverlight Animation

SilverlightAnimation

Silverlight ClearType Default

SilverlightClearTypeDefault

Silverlight ClearType (Lightened)

silverlight-cleartype-gray

Microsoft Word 2007

Word

What’s your preference? Hope you found this useful.

(If you’re wondering how I created full-text-justification in Silverlight, I’ll provide the solution in a follow-on post).

7 Comments

    1. You be your own judge.

      I think I’ve demonstrated that Silverlight 4.0, with a few tweaks to the foreground color of the font can emulate the often complimented Flash 10 text rendering capabilities. However, some people don’t like that look. So …

  1. Awesome examples – we’ve been developing a Silverlight 4 application that requires very easy reading on-screen and have come to exactly the same conclusions – on a white background, foreground colors between #FF313131 and #FF515151 work best for most readers and the results do look dramatically better than pure black or darker shades.

    Nice work documenting this clearly Aaron.

  2. I think the problem with silverlight is that it doesn’t use gamma correction. Setting font color to gray helps a bit for small fontts, but it would make bigger fonts like titles look wrong.

Comments are closed.