- Web Measurements
- Type Size & Line Height
- Type Space
- Text Alignment
This chapter is from the book
This chapter is from the book
This chapter is from the book
Text Alignment
Text alignment is generally taken for granted on the Web—left alignment suits most purposes most of the time. In order to create a sense of rhythm and movement on your page, helping to guide the reader’s eye around and adding visual interest to the page, a little alignment variation can go a long way.
Set body text alignment to minimize gaps and maximize scanning
Text alignment in Web pages is, by default, to the left, with ragged edges on the right. Justified text—sometimes called newspaper columns, where both edges of the text are aligned—is rare on the Web.
text-align: left; text-align: justify;
In print, justified text is created using a variety of techniques including word spacing, letterspacing, hyphenation, and glyph reshaping. In addition, well-formed justification is calculated on a paragraph level to prevent “rivers” of white space flowing down the middle. On the Web, unfortunately, justification is simply created by adding small amounts of space between words. On the screen, where you can only add whole pixels, this often results in uncomfortably large amounts of space between some words, especially in narrower columns.
When choosing to use left or justified alignment, keep in mind these factors:
- Justified text is often seen as more formal and structured, while left alignment is more informal and approachable.
- Justified text reinforces the grid structure of a page but can be harder to scan, since it often creates rivers of white space throughout the text, which interrupts the eye path.
- Left-aligned text adds an element of white space to the right edge, softening the overall appearance of the page.
)
Center or right-justify text for effect and variety
More rarely used, centering or right-justifying text can create a specific feeling on the page.
text-align: center; text-align: right;
Centering and right aligning text is integrally dependent on the design you are creating and how you want your readers to scan the page. While using a variety of justifications helps create rhythm and motion on your page, it can quickly seem cluttered or obnoxious. Always have a specific purpose for the variance of alignment, and use it sparingly. Here are a few ideas:
- Bulleted or numbered lists should not be centered or right aligned, as this makes them harder to scan by moving the beginning of each line around.
- Center section or module titles/headers if you want to make your site look a little different. Generally, section titles are best when left aligned, but centering them gives your designs a unique feel and may also improve scannability.
- Right-align text in the left column of a page or table if it helps show a closer relationship between the elements in adjacent columns.
)
Increase margins for longer quotations and style the citation
Short quotes of less than three lines are included in a paragraph surround by quotation marks, requiring no other special formatting. In HTML, the blockquote tag is used to set off a block of text as a quotation, generally of two lines of text or longer. The quotation should be styled to distinguish it from other text by indenting its left and right margins and increasing the top and bottom margins. The amount of left/right indentation is based on the width of the column and then adjusted so that it does not conflict with any other indents. A good measure to offset blockquotes is to double the font size (2em), although more or less space may be required for wider or narrower columns:
blockquote { margin: 2em; }
In this chapter, we are only considering spacing issues with blockquotes and citations. Chapters 5
and 6 offer other ways to style text, including weights, italics, backgrounds, and borders. These can be deployed to creatively
display longer quotations.
This will clearly space the blockquote away from the rest of the text, but it’s also up to the copywriter to make it clear that the text is a quote and to supply its source, possibly using the cite tag, which indicates a citation. Turning the cite tag into a block-level element and right-aligning it when it is included in a blockquote creates a strong style.
blockquote cite {
display: block;
text-align: right; }
The code above will force any text marked by the citation tag to a new line and right-align it.
)
Set footnotes and scientific or mathematical annotations using positioning rather than vertical alignment
Vertical text alignment allows you to adjust the position of inline text in relation to its natural baseline, shifting it up or down. For footnotes, mathematics, and scientific notation, it will not be enough to simply raise or lower the characters; you will also need to reduce their size relative to the surrounding text. These styles can be applied to the superscript and subscript tags, setting the vertical position to the baseline and then setting a position relative to that:
sup, sub { font-size: .5em;
vertical-align: baseline;
position: relative; }
sup { top: -.65em; }
sup.math { top: -.8em }
sub { top: .2em; }
Although vertical-align provides several values to set the vertical position of the text, these have proved to be unreliable in multi-column layouts. The exact values will vary depending on the font, and you may also need to add some left/right margins to add breathing room.
)
Type Inspirations: Jon Tangerine
Beautiful typographic contrast.
Insightful typography editorials.
Jon is a designer living in Bristol, UK, with some of the cleanest pure Web typography I’ve seen. On top of this, his information and opinions on Web typography are required reading for anyone interested in the ongoing issues we face.
)
How he does it:
Jon uses a font stack of Web safe fonts, including Cochin, Baskerville, and Palatino Linotype, down to Georgia. He then combines a wide variety of sizes, styles, weights, and colors all scaled and spaced within a strong grid to provide clear eye paths and legible text.
)
)
)
)