Typography - Pro CSS Techniques - page 209

h1 {
text-align: center;
}
p {
text-align: left;
}
These styles will produce centered headers and left-aligned (or “ragged right”) paragraphs.
text-align also offers the ability to “justify” text, in which case the space between words
is adjusted so that the text creates a clean edge on both the left and right sides:
p {
text-align: justify;
}
This is a common effect in printed type, and can be seen in most newspapers. The down-
side to justified text is the inconsistent spacing between words, which can sometimes lead to
unsightly “rivers” of whitespace flowing vertically down the page and decreasing readability.
What typically prevents this effect in print is hyphenation. By breaking up words via hyphen-
ation, the full width of the measure can be put to use and the word spacing becomes more
consistent. However, web browsers (and CSS) do not currently offer automatic hyphenation.
As such, justified text is uncommon on the Web. If you elect to use it, be sure to choose your
line length wisely, or you're likely to see large white holes in your lines of text. Justified text
tends to work better with longer measures.
Block Paragraphs vs. Traditional Paragraphs
By default, web browsers display block paragraphs—that is, paragraphs are separated by
a line break. However, traditional typography, like that you'll find in most topics, magazines,
and newspapers, does not provide a line break in between paragraphs. Web browsers create
this line break with the CSS margin property. Generally, a margin of 1 em is applied above and
below each paragraph, like so:
p {
margin: 1em 0;
}
In order to remove the line break, you simply need to override this default style with
a zero margin:
p {
margin: 0;
}
Indicating New Paragraphs
If you choose to remove the line break, though, you will need to find some other visual device
for separating one paragraph from the next. The most common technique used is indenting.
Indenting in CSS is done via the text-indent property. As with many of the text-related prop-
erties in CSS, text-indent can accept any unit of measurement, but em is often used due to its
relationship to the current text size. For example: