IDUX

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

This entry was posted on Thursday, November 26th, 2009 at 3.54 pm and is filed under Fireworks. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.