The website http://webtypography.net has wonderful information on CSS typography and how it applies to the web. The topics focus on type rhythm and proportion, horizontal and vertical spacing, blocks and paragraphs, and hyphenation and pagination. There were a few items I wanted to highlight that can really help tighten one’s typographical web design. Enjoy!
1. The designer should size text using the em unit since it is a true typographic unit and is recommended by the W3C rather than pixels.
2. Paragraphs can be indented using the text-indent property. To set a paragraph to flush left, the text-indent should be set to zero:
p {
text-indent:0 }
3. To set text justified or ragged, the designer sets the CSS text-align property, as follows:
p {
text-align:left /* ragged right */ }
p {
text-align:right /* ragged left */ }
p {
text-align:justify }
4. In justified text, the evenness of word spacing and frequency of hyphenation can be difficult. One should set their text ragged right to lighten the page when using multiple column. In addition, sans-serif type looks better when set to ragged.
5. Just like in print layout programs, such as Adobe InDesign, the designer can specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:
blockquote {
margin:1.5em }
p {
hyphenate-before:2;
hyphenate-after:3; }
6. A designer can also insert a page-break before or after a specified element. For example:
h1 {
page-break-before:always }
.section {
page-break-after:always }
