BESTPROOFINGSERVICE.COM

digital proofs - www.bestproofingservice.com

Menu


The box is the (usually transparent) rectangle that contains a block of text.   To begin, let it be known that a block of web text, whether


it's a single line or an entire paragraph, sits inside a rectangle or box. By default, the box is completely transparent, but its rectangular shape becomes apparent when you give it a border or background color (see "Considering Colors and Borders" later in this chapter). It's good to bring this up now, as visualizing your text as sitting in a box helps you to make sense of some of the spacing options available to you. TECHTALK Line height is the amount of space between lines of type.     6.2.3.1. Looking at line spacing Normally, lines of text on the page are roughly as tall as the type size. Therefore, if you're displaying 16-pixel text, your lines are about 16 pixels tall. But with CSS, you can change the line height, as Figure 6-6 shows. Figure 6-6. These paragraphs in 16-pixel type have a line height of 24 pixels   Because your lines are normally as tall as your type, you can very easily compute the line height for different kinds of spacing. Assuming that you have 16-pixel text, a line height of 16 pixels is the equivalent of normal, single-spaced text. A line height of 24 pixels gives you line-and-a-half spacing (16 times 1.5). For double spacing, increase the line height to 32 (16 times 2). TIP To improve the legibility (and skimmability) of your running text, particularly when you have multiple paragraphs one after the other, you might try line-and-a-half-style spacing. To do this, set the line height to 1.5 times the type size.     6.2.3.2. Looking at word and character spacing You can control the amount of spacing between the words in a line of type. In Figure 6-7, the second paragraph has three extra pixels of word space, which makes it easier to read at this small type size. Figure 6-7. Increasing the word space improves readability   Generally speaking, the larger the type size, the less word space you need. It's smart to decrease the word spacing for headings and the like, so you can fit more words onto a single line. Conversely, if your running text is 8 or 9 pixels long, you could probably stand to increase the word spacing to improve legibility. TIP Wide fonts like Verdana often look better with extra word and character space. Condensed fonts often look better with less of both.   Similarly, you can control the amount of spacing between characters in a line of type, as Figure 6-8 shows. Character spacing follows the same general guidelines as word spacing in terms of when to increase and decrease it. For large type sizes, less character space works well. In Figure 6-8, the words in the second heading have two fewer pixels of character space, giving it a more compact look and making it easier to read. Figure 6-8. The second heading has two fewer pixels of letter space     6.2.3.3. Looking at margins