Entering text

Text is one of the most important parts of a designed Web interface. Fireworks allows for sophisticated text effects while maintaining the editability of text at all stages.

Select the text tool from the toolbar and click where you want to put the text on the canvas. Text options can be set in the properties inspector. Let's look at the wealth of options that Fireworks offers for text objects:

(1) allows for the selection of the typeface. The size selection box (2) lets you enter a size in pixels by typing a number or moving a slider. The color swatch (3) indicates the current text color. Text color is retained separately from the general fill color setting. The small arrow in the right lower corner opens up the color palette, from which you can choose the desired color.

Just like in modern word-processing programs, fonts in Fireworks can be rendered as bold, italic, or underlined. Choose from the familiar formatting controls (4) to apply the desired text style.

To change the spacing between letters, use the kerning control (5). You can use this control to change the distance between two letters by positioning the cursor between them and changing the setting. When you apply this control to a group of letters, range kerning will occur. This means that the distances between the letters will be changed proportionally. Here's an example:

You can also stretch the text by changing the stretch percentage (6). While kerning changes will only affect the whitespace between the letters, the stretch adjustments will change the shape of the typeface. You can also eable automatic kerning by checking (9).

The leading control (7) changes the vertical white space between adjacent lines of text in a paragraph. You can select by percentage or pixels with the adjacent drop down menu. Baseline shift (8) allows for super- and subscript characters. This box is only visible if you have the text cursor inside the text object.

The rendering control (A) lets you set the way the edges of the text will be displayed. You have the choice between No-Anti-Alias (hard edges), Crisp, Strong, or Smooth anti-alias. Anti-aliasing is when the pixels at the edges of the text (or any graphic) are blended with the color of the background to have a smooth transition. Look at an example to see the differences:

hard edges	strong	crisp	smooth

The text direction and alignment controls (B) give you full control over text direction, both horizontally and vertically. You can have vertical text as well as text that goes right to left. The alignment controls offer the traditional options any modern word-processing software offers. In addition, Fireworks also offers stretched alignment in which the text is adjusted to the size of the text box.

The three controls (X) through (Z) apply only to paragraph text. They control indentation (X), space before the paragraph (Y), and space after the paragraph(Z).