Margins define the reading area of your page by separating the main text from the surrounding environment. Margins provide important visual relief in any document, but careful design of margins and other "white space" is particularly important in Web page design because Web content must coexist on the computer screen with the interface elements of the browser itself and with other windows, menus, and icons of the user interface. When used consistently, margins provide unity throughout a site by creating a consistent structure and look to the site pages.
They also add visual interest by contrasting the positive space of the screen (text, graphics) from the negative (white) space. Text blocks have different ways of sitting within margins. Ranged-left, centered, ranged-right, and justified text are the alignment options available.
Justified text is set flush with the left and right margins. They create solid rectangles. Justification is achieved by programs useing a hyphenation dictionary to check for and apply at each line's end and then adjust word spacing. Even with sophisticated software, justified text blocks often suffer from poor spacing, excessive hyphenation and require manual refinement.
|
Centered and ranged-right text blocks are difficult to read. We, in the West, read from left to right, anchoring our tracking across the page at the vertical line of the left margin. The ragged left margins produced by centering or ranged-right text make that scanning much harder, because your eye needs to search for the beginning of each new line.
Ranged-Left text is the most legible option for Web pages because the left margin is even and predictable and the right margin is irregular. Unlike justified text, ranged-left requires no adjustment to word spacing.
The resulting "ragged" right margin adds variety and interest to the page without interfering with legibility. Titles and headings over ranged-left body text should also be flush left.
|
 |
|
Ranged Left
Text blocks have different ways of sitting within margins. Ranged-left, centered, ranged-right, and justified text are the alignment options available. |
|
Ranged Right
Text blocks have different ways of sitting within margins. Ranged-left, centered, ranged-right, and justified text are the alignment options available. |
|
Centred
Text blocks have different ways of sitting within margins. Ranged-left, centered, ranged-right, and justified text are the alignment options available. |
|
Justified
Text blocks have different ways of sitting within margins. Ranged-left, centered, ranged-right, and justified text are the alignment options available. |
|
|
