Simulate ClearType Text in Adobe Fireworks

Creating web designs involves creating static comps of what the future web page could look like, so it can be very important to make sure that the comp represents images, icons, colors, and text in exactly (or nearly exactly) the same way that browsers will render it.

One of the most challenging design elements to represent is text, because different browsers, different operating systems, and even different monitors will render the text differently. Most operating systems offer sub-pixel text rendering on LCD monitors to improve the legibility of text, but most graphics programs do not have text settings to simulate this appearance. They offer anti-aliasing options, which is also a method to improve the legibility of text rendered as pixels, but it is not the same as sub-pixel rendering.

If you take a screenshot of text on an LCD monitor and zoom in very close, you’ll see faint shadows or glows of blue and red, and what appears to be black text at normal magnification has elements of purple and brown when magnified.

Learn more about sub-pixel rendering at Wikipedia >

Giving text the appearance of being rendered at the sub-pixel level can be easily accomplished in Adobe Fireworks with the use of a custom style. Download the style file below and place a copy into the Styles folder. On a Windows XP computer, the Styles folder is located at:

C:\Documents and Settings\<USERNAME>\Application Data\Adobe\Fireworks CS4\Styles

On a Mac with OSX, the Styles folder is located at:

/Users/USERNAME/Library/Application Support/Adobe/Fireworks CS4/Styles

I’m not sure where this folder is located in Vista or Windows 7, so please look for the Fireworks application settings folder and for the Styles within it.

A few things to keep in mind when using this custom style:

  1. These styles were created to work on black (or dark grey) text on a white background or white text on a dark background; colored text or backgrounds will not look as good.
  2. Sub-pixel rendering looks best for smaller font sizes (10-14 pt),
  3. Do not use this style for fonts 16 points or larger – the Crisp Anti-Alias style usually looks more accurate,
  4. This custom style can make very small fonts (under 9 pt) look blurry,
  5. This custom style tends to look better for san serif fonts but can be used for any font,
  6. Apply this style to text with “No Anti-Alias”, because it looks bad when combined with anti-aliased settings.

To use this style, simply type your text, select the text object(s), open the Style Panel, choose “ClearType Text” from the drop-down selector, then apply the custom style. (Note: this style will not work correctly on text in a symbol or component symbol when the symbol is selected – the text object needs to be selected directly to apply this style correctly.)

NOTE: These custom styles will work in Adobe Fireworks CS3 and later. (They may work in earlier versions, but I was not able to test them.)

UPDATE: There are four styles in this set to simulate black text on white or grey background and white text on black or grey background. Colored text or backgrounds may still not appear accurately simulated, but you can try to use the white text styles for light colors and black text styles for dark colors.

Download ClearType Custom Style for Fireworks

Be Sociable, Share!

13 thoughts on “Simulate ClearType Text in Adobe Fireworks

  1. Pingback: Tweets that mention IDUX » Simulate ClearType Text in Adobe Fireworks CS4 -- Topsy.com

  2. Wow, that’s pretty good, just tested! :-)

    I was wanting to have ClearType for text in Fireworks like… forever! This will help me, and much! Thanks again!

  3. On OSX, the Styles folder is located in:

    /Users//Library/Application Support/Adobe/Fireworks CS4/Styles

  4. Sorry, comment system editing out part of that path:
    /Users/USERNAME/Library/Application Support/Adobe/Fireworks CS4/Styles

  5. Pingback: Twitted by 06b

  6. Pingback: Today's Popular News In adobe Community: MrTweet

  7. Good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.

  8. Pingback: mikko v

  9. Pingback: The Power of Adobe Fireworks: What Can You Achieve With It? - Smashing Magazine

  10. Pingback: 6 new features & improvements for Adobe Fireworks - Mikko/Vart.io

  11. Pingback: John Nack on Adobe : Get crisp Web/screen text in Photoshop, FW

Comments are closed.