The design and arrangement of type on a web page is a subtle art. While most of the properties that follow can be applied to any text element, this table includes examples where they are most commonly or best used.
| Property | Explanation | Example |
|---|---|---|
color | Color of text. Can use any color values. | p {
color: #993;
}
|
text-align
| Alignment of text to the containing block: left, center, right, or justify. justify is normally used for paragraphs when there is a great deal of content on the page (such as this document). Be careful with center and right alignment: web pages on wide monitors with a mixture of center, left, or right justification can induce a “ping pong” effect in the viewer.
| h1 {
text-align: center;
}
|
line-height
| The vertical space between lines of text, referred to as “leading” in most other typographical contexts. Usually measured as a floating point number. | p {
line-height: 1.6;
}
|
letter-spacing
| The space between letters. Usually applied to heading elements. | h1 {
letter-spacing: 0.8em;
}
|
word-spacing
| The space between words. Usually applied to heading elements. | h2 {
word-spacing: 2em;
}
|
text-indent | Amount of horizontal indentation of the first line of text. Commonly applied to paragraphs (especially the first paragraph in a block of text). | h2 + p {
text-indent: 2em;
}
|
text-decoration
| Can take values of underline, overline, line-through, and none. Be especially careful with underline: using it can confuse users into thinking that underlined text is a link. Conversely, text-decoration: none set on an a selector will remove underlining on links, which also has to be approached with care. line-through is sometimes used to indicate redacted text, although that should be marked up with del
| h3 {
text-decoration: underline;
}
|
font-style
| Formats text to italic or re-formats it to normal. A value of oblique is also possible to force a font without an italicized face into pseudo-italics.
| h4 {
font-style: italic;
}
|
font-weight
| Sets the weight (boldness or lightness of a font). Can be specified in numbers (100 to 900, in increments of 100; 400 is normal, 700 is bold; 100 is light), or by keyword: bold, bolder, or lighter. Note that the effect of this should be tested, as not all fonts have generated light or bold variants.Avoid font-weight: bold on headings, as it rarely makes any difference. (h1 - h4 are bold by default. Do not use font-weight as a substitute for markup: headings should still be marked up as headings.
| h1 {
font-weight: 100;
}
|
text-transform | Takes values of uppercase, lowercase and capitalize. Especially useful on headings and links, where it can be used to ensure consistency of text appearance without worrying about always leaving the capslock key on (or off) while creating content.
| h1 {
text-transform: uppercase;
}
|
font-variant | Sets the text content of the selected element to Latin-style small-caps. Useful for headings and the first lines of opening paragraphs.
| h1 {
font-variant: small-caps;
} |
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
