I am using Fireworks CS6 on Windows 8 and notice that regardless of font type and size I use, any text I enter in a Text box displays with very vague outlines. When I turn off anti-aliasing effect, the text appears zigzag, but I notice on many websites containing smaller text with smooth, clear outlines. Please teach me how to output small text with smooth outlines in a Text box.
Thank you in advance,
Do you have a standard or retina display? I only ask because it seems that people have reported issues when using Fireworks with a retina display, which could obviously affect text appearance.
You're on the right track, I think, by exploring the anti-aliasing options in Fireworks. However, keep in mind that most text on the web is live—that is, it's selectable text rendered with fonts, which are a type of vector. And Fireworks is meant to be a bitmap tool, meaning that it exports bitmaps and not vectors. You have the option to export your Fireworks documents as HTML (with live text), but in that case, you'd be relying on the web browser's text rendering, not Fireworks', so the point would be moot.
I think most computer operating systems (and web browsers) use something called sub-pixel anti-aliasing to render text; that is, even though the text may appear to be black, it actually uses full-color anti-aliasing for a smoother-looking result. Unfortunately, none of the Adobe products offer this type of text rendering. Instead, they use greyscale anti-aliasing.
I think you're best bet is to try different fonts, different anti-aliasings, and keep experimenting. If you're working on a particular graphic, doubling the size of the graphic in production, and exporting it at half the size may produce a smoother looking result in the end. Basically, the more pixels you have to work with, the better the text rendering will be.