Tweet

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

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

 

Side by side using the animated mode:

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)

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.

 

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

Whereas the levels of the Silverlight ClearType option:

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

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!):

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.

 

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Firefox

Flash Animation

 

Flash Readability

Internet Explorer 8

Internet Explorer 9

Adobe Illustrator CS 4

Photoshop (No Anti-alias option selected)

 

Photoshop Crisp

Photoshop Sharp

 

Photoshop Smooth

 

Safari (Default)

 

Safari (Best for LCD)

 

Silverlight Animation

Silverlight ClearType Default

Silverlight ClearType (Lightened)

Microsoft Word 2007

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

Related Content

Subscribe to the post comments feeds or Leave a trackback