How to Kern Type in Dreamweaver CS5
Kerning is the typesetting term that refers to the process of adjusting the spaces between letters to improve the appearance of text. Another term that goes hand-in-hand with kerning is tracking. Kerning is the process of moving letters closer together and tracking is the process of moving letters farther apart. In Adobe Dreamweaver CS5, you can kern type in your Web pages with Cascading Style Sheets rules.
Other People Are Reading
Instructions
-
-
1
Open the Dreamweaver HTML file containing type you want to kern, or start a new HTML file by clicking the "File" menu and choosing "New." This opens the New Document dialog box.
-
2
Choose HTML from the Type list and the desired layout from the Layout list, then click the "Create" button.
-
-
3
Click in the location on the page where you want to place your type to insert the cursor.
-
4
Type the text you want kern.
-
5
Select the text.
-
6
Go to the "Properties" panel and click the "Edit Rule" button. This opens the New CSS Rule dialog box.
-
7
Click in the "Selector Name" field and type the name for this new CSS rule. CSS selectors must start with a period. You can name the CSS rule anything you want, but it's a good idea to use a name that describes the text, such as ".heading."
-
8
Click "OK." This opens the CSS Rule Definition dialog box. From here you can make extensive properties changes to your CSS rule.
-
9
Click "Block" in the Category list. This displays options for working with blocks of text.
-
10
Click in the "Letter-spacing" field and type the kerning amount.
-
11
Click "OK to close the CSS Rule Definition dialog box.
-
1
Tips & Warnings
Letter spacing is measured in a typesetting unit of measurement known as an "em." An em is defined by a letter's height and width with respect to the point size -- the size of the type -- of the font in use. In other words, the larger the text, the bigger the em. You can click the "Apply" button in the CSS Rule Definition dialog box to see your changes as you make them.
Keep in mind that a little em goes a long way. Use tenths and hundredths, such as .2 or .09, rather than whole numbers. You'll probably need to experiment a little to get the desired spacing.
You can also adjust the spacing between words with the "Word-spacing" option in the Block section of the CSS Rule Definition dialog box.
You can change your type's font properties, such as font family, font style, and font size, from the Type section of the CSS Rule Definition dialog box.
References
Resources
- Photo Credit Creatas/Creatas/Getty Images
