Best Practices Web Design

Looking for the lessons? Get started!

The many ways to format text in HTML and CSS.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

Many web designers spend time focusing on navigation, style and colors, but formatting text properly is just as important. — Michelle L. Devon

On a word processor, it's easy. You just push "Enter," and the program begins a new paragraph for you. Or you click the big B button, or the I button, or the cool button that lets you change the font color or the size or whatever, and the word processor takes care of all the style formatting for you. Easy as clicking. In HTML, you need to do those chores yourself — you tell the browser what to do with a line of text.

Here are some easy tips on how to do some of this text formatting.

(Note: Some of this information is referred to in the lessons.)

Deprecated Elements

In a nutshell, deprecated elements are, with a few exceptions, presentational elements that are obsolete. They don't work in HTML 4.01 Strict, so as a rule, I don't go into any detail about them. Why learn the old brokedown way of doing things if that's not what you'll be doing?

Quick explanation: In 1999, when the W3C replaced the older HTML specifications with the 4.01 specs, they wanted to find a way to move Web standards forward without instantly rendering millions of Web pages obsolete and dysfunctional. They created three separate "flavors" of the 4.01 specs: Strict, which is what we use; Transitional (once called "loose"), and Frameset. The Transitional spec allows those deprecated, or obsolete, HTML elements to still function within the 4.01 framework, giving designers time to bring their sites up to snuff and revamp them according to Strict standards. In 2006, Web designer Jennifer Niederst Robbins wrote, "Now that style sheet alternatives to presentational HTML are widely supported, it is time to start phasing deprecated elements out of your documents as well." Robbins was correct in 2006. Four years (and counting) later, the time to "start phasing out" deprecated elements is past. Now it's time to relegate them to the junkpile of history and move on.

Paragraph

The paragraph element — <p> </p> — is probably the most basic and fundamental HTML formatting element. In its simplest form, it wraps around a bunch of words to form a paragraph. It's important not only because it groups those words semantically, identifying them as a paragraph, but because it breaks apart the text into nicely spaced chunks. Unless overridden by CSS commands, the browser includes a bit of spacing before and after a paragraph. It does not, however, indent paragraphs (we'll see about that property a bit later). So on the Web, the convention is that each paragraph is not indented, but is displayed with space between itself and the next paragraph, or other element, on the page. This site didn't change the spacing for paragraphs: notice that every paragraph is spaced apart from the ones before and after it?

In the old days, we'd often fake the appearance of paragraphs by using double line-breaks (<br><br>), but this has no semantic meaning — it doesn't conceptually distinguish two separate ideas and is purely presentational. Don't do it. — Craig Cook

Obsolete tutorials will tell you that it's okay to leave off the end tag for the paragraph:

<p>Old and outdated content.
<p>More outdated content.

Don't do it. Modern best practices requires that elements such as the paragraph need ending tags, even if most browsers are forgiving enough to display the paragraphs properly.

You can modify paragraphs with the following attributes:

• ID
• class
• style (for inline styling)
• title

Blockquote

Blockquotes — <blockquote> </blockquote> — sets off quoted text. Unless the default is changed (as it has been on this site), browsers display blockquotes as indented in blocks (i.e. the entire chunk of text is indented, not just the first line). However, don't use blockquotes simply to indent blocks of text. Semantically, the blockquote should be reserved for presenting quotations. There are other ways to indent text, most often via your stylesheet, such as:

margin-left: 2em;

Blockquotes can contain more than one paragraph, as long as they are nested properly. Remember, the <blockquote> </blockquote> elements go outside the <p> </p> tags:

<blockquote><p>content of paragraph</p></blockquote>

You can modify blockquotes with the following attributes:

• ID
• class
• style (for inline styling)
• title

Bold

In the early days of HTML, making text bold was as simple as wrapping a <b> </b> tag around the text. Like this:

<b>Back in the day, when we herded pixels on horseback...</b>

The <b> </b> tag tag still works, and is still valid HTML, but as Ian Lloyd writes:

While the b element isn't deprecated … its use is declining, as in many cases it's more appropriate to use either an emphasis (em) or strong emphasis (strong) element instead. … This element is used to mark up text which needs to be stylistically offset from the normal prose in a way that doesn't confer any extra importance on that text. The b element should, therefore, be used only as a last resort when no other element is more appropriate. … Such elements are referred to as presentational HTML elements, and they should be avoided.

The idea of strictly "presentational" HTML is particularly important to visually disabled users, who rely on screen readers to read the text of your site aloud to them. Screen readers will usually ignore b or i elements, while the machine voice will react appropriately to emphasis elements such as strong and em.

I am not going to get into the idea of "semantically appropriate HTML" in a site designed for beginners, but my take on it is that the b tag is becoming obsolete. Use the <strong> </strong> tag instead.

<strong>Nowadays, we send pixels out over matter transmitters.</strong>

Web developer Will Bontrager suggests using a CSS enhancement to further punch up your emphasized text and even give it a "tooltip," using the title attribute. Here's his example (you're welcome to use your own styling if you choose to employ this technique):

.helpcursor { 
   cursor: help; 
}

.dotsunder {
   border-bottom-color: #999;
   border-bottom-style: dotted;
   border-bottom-width: 1px;
}

giving us this:

You can really set off your text with this technique.

This can, of course, also be used to style the b element.

Italics

Something similar happened with the idea of italics for your text. We used to use the <i> </i> tag.

<i>Yes, the cavemen loved that "i" element.</i>

The times they have a-changed, and in most all instances, we don't use that <i> </i> element. Instead, we use the <em> </em> element (for emphasis).

<em>Modern folks prefer that "em" element.</em>

Note: You can use the two together to make an extremely powerful emphasis, but make sure you nest the elements properly:

<strong><em>Nested is bestest.</em></strong>

Underline

In days of old, when designers were bold, they routinely used the u element to underline text (often book titles and so forth), like this:

<p>We read <u>The Grapes of Wrath</u> in school.</p>

You shouldn't do that any longer, at least not on the Web. Period. I don't care what Strunk & White say. Web expert Tom Gilder writes:

[U]nderlining text that isn't a link is a very very bad idea. Very bad. Awful. Even if you think that underlining a heading doesn't look like the rest of the links or something, don't do it. Pages use different link styles, and pretty much everyone has just got into the idea that "underline = link".

And Ian Lloyd agrees:

Wrap this around some text and needless underlining occurs that only serves to confuse users. This is because in web pages, underlined text normally signifies a link — which the u element most definitely isn't!

If you really want to underline text, and don't care about confusing your readers, you can use the following CSS command:

text-decoration: underline;

but unless you have a really good reason for doing so, don't. Emphasis tags work just as well:

<p>We read <em>The Grapes of Wrath</em> in school.</p>

When your English teacher complains, point him or her to this page, and tell him or her that I, too, am an English teacher. So there.

Non-Breaking Space

This is an easy one. You can insert single spaces that won't break (even if it forces the text to run past the right edge of the browser window) by using the following non-breaking space code:

 

(Note: Although this is often used to format text strings such as sentences and phrases, technically the non-breaking space is a character entity.)

Naturally, a browser will insert a single "white space" (see the whitespace property below) if you type one, or two, or ten spaces using your spacebar. But if you need to make sure that there is a good bit of spacing between particular words or code strings, use this.

Less skilled designers use the non-breaking space entity to position text or even element blocks. Here's an example of how to properly use the non-breaking space:

Major General

and here's how not to use it:

     This is the first sentence of an indented paragraph, using the   entity to indent the text.

Code

The <code> </code> tag is another one from the olden days of HTML. It's still in use, almost always for showing "machine code" of one kind or another, whether it's HTML or C++. Here's a random snippet of JavaScript:

<code>function findInPage(str) {
   var txt, i, found;</code>

and here's how it displays, with no CSS formatting:

function findInPage(str) {
   var txt, i, found;

Basically, what the <code> </code> tag does is show the tagged machine code in a monospace, or fixed-width, font. (I put the gray background on it for this site. You won't get that effect unless you create it in your stylesheet.)

More about fonts, including monospace fonts.

It does not display the HTML brackets in "code" format; you still have to use special characters for that.

More about character entities, or special characters.

The folks at Tizag.com remind us:

It is not a good idea to use this tag to format large pieces of text. Often times you will lose track of the tags and debugging can be tedious.

Good reminder.

SAMP

A corollary tag to the cite tag is the samp tag. Basically, it's used to cite "sample" output from a computer or other code generator. I'll use the example Ian Lloyd gives:

<p>If the browser spits out an error message such as <samp>HTTP 404 – File not found</samp>, you may simply have typed the address incorrectly.</p>

Like the cite tag, the browser generally displays a string of text formatted with the samp tag in a monospace, or fixed-width display.

Pre

The pre tag (standing for preformatted) shows material you have typed exactly as written, with no browser adjusting of line spaces and so forth. Generally, browsers render text formatted with the pre tag in a monospace, or fixed-width, font.

Like the cite tag, pre doesn't render the brackets in "code" format, so here again you need those special character entities.

Here's an example of something coded in pre formatting, cribbed from the Tizag.com page:

<pre>Roses are red,
   Violets are blue,
I may sound crazy,
   But I love you!</pre>

Here it is as it stands:

Roses are Red,
   Violets are blue,
I may sound crazy,
   But I love you!

Ian Lloyd says:

Use pre for content whose whitespace has semantic meaning.

As with poetry or machine code that depends on spacing.

Like the cite tag, you can style this in your stylesheet for a different font, color, spacing, and what have you. I've certainly done it on this site — all the code examples in black boxes are actually wrapped in the pre element.

You can modify pre elements with the following attributes:

• ID
• class
• style (for inline styling)
• title

Q

The q tag can be described as the blockquote's little brother. It is an inline, not a block, element, and is used for much smaller chunks of text. In theory, browsers show material enclosed in <q> </q> tags in quotation marks, without you having to type them. This code:

<p>Mom says, <q>Look both ways before crossing the street!</q></p>

gives us this:

Mom says, Look both ways before crossing the street!

The q element isn't fully supported by all browsers (yes, IE), so you might want to just play it safe and use quotations marks for your quotes instead, though that is not as semantically accurate.

More about block and inline elements.

Cite

Many capable Web designers pay no attention to the cite element, but they are semantically uninformed. The cite element is used to "cite" a source, i.e. giving the source of a quotation.

<p>Jack Vance, author of <cite>The Green Pearl</cite>, is a well-known science fiction and fantasy author.</p>

gives us this:

Jack Vance, author of The Green Pearl, is a well-known science fiction and fantasy author.

Abbr

The abbr element stands for "abbreviation" — it's used to give the full meaning of an abbreviation. This bit of code:

<p>The <abbr title="Central Intelligence Agency">CIA</abbr> has a listening device implanted in my dog.</p>

gives us this:

The CIA has a listening device implanted in my dog.

Hover over the abbreviation "CIA" to see what happens. The abbr element uses its only attribute, title, to provide a "tooltip" of information for the discerning user.

Unfortunately, different browsers handle the abbr element differently. IE6 doesn't handle it at all, leading many designers to avoid it. Firefox and Opera highlight marked-up text with a light dotted line. Safari and Chrome recognize the abbr content, but don't underline it. All four browsers display the title attribute with a tooltip, which means mouse users can access it but keyboard users cannot. Hence, many designers just write out the abbreviation in their text:

The CIA (Central Intelligence Agency) has a listening device implanted in my dog.

Web ninja Ian Lloyd lays out the case for ignoring the abbr element:

The ways in which browsers deal with the abbr element — presenting it in a tooltip, underlined, italicized, and so on — do little to help users reading the content in printed form. This provides yet another reason to simply write out the abbreviation in the text … You may consider using generated content in CSS instead, but that approach is hindered by some browser support limitations.

If you do decide to use the abbr element, web developer Will Bontrager suggests using a CSS enhancement on it that provides a "help" cursor:

.helpcursor { 
   cursor: help; 
}

and adding that .helpcursor class to your abbr element:

<p>The <abbr title="Central Intelligence Agency" class="helpcursor">CIA</abbr> has a listening device implanted in my dog.</p>

You get the following results:

The CIA has a listening device implanted in my dog.

See the cursor change when you hover over the CIA abbreviation?

More about classes and IDs.

Acronym

Some would argue that "CIA" is an acronym, not an abbreviation. They would have a point. Ian Lloyd gives us the difference:

Whereas the abbr element is used to describe any abbreviated phrase, acronym is used only where the phrase comprises initial letters that make a word.

In other words, CIA — Central Intelligence Agency — is an acronym. Oops. Maybe we should consider using the acronym element instead?

There are compelling reasons for using the acronym element besides the fact that the abbr element doesn't work in IE6. For one, the acronym element works nicely in screen readers and other assistive devices, making it very accessibility-friendly. For another, it works in IE6, unlike its less able cousin.

Like the abbr element, acronym only has one attribute, title. It works much like its cousin:

<p>The <acronym title="Central Intelligence Agency">CIA</acronym> has a listening device implanted in my dog.</p>

giving us this:

The CIA has a listening device implanted in my dog.

Aside from IE6, the same browser caveats apply: Firefox and Opera give acronym a light underline, Safari and Chrome do not. And the title-engendered tooltip is not accessible to keyboard users. Many designers don't like these tradeoffs, and like the abbr element, prefer to ignore it, relying on straight text instead.

Also like the abbr element, web developer Will Bontrager suggests using a CSS class to change the cursor to "help":

.helpcursor { 
   cursor: help; 
}

and adding that .helpcursor class to your acronym element:

<p>The <acronym title="Central Intelligence Agency" class="helpcursor">CIA</acronym> has a listening device implanted in my dog.</p>

You get the following results:

The CIA has a listening device implanted in my dog.

More about classes and IDs.

It's worth noting that HTML 5 deprecates the acronym element. So unless that changes (which it well could), the acronym element, like its cousin abbr, might do better to stay in the toolbox and not be used.

The folks at HTML-5.com suggest using abbr in place of acronym, but then write:

Acronyms should be enclosed by the HTML <abbr> tag. Since some browsers, most notably IE, do not activate the tool tip to assist the user when the title attribute appears on the abbr tag, the abbr tag should be placed inside an <a> tag with the title.

Like this:

<p>The <a title="Central Intelligence Agency">CIA</a> has a listening device implanted in my dog.</p>

giving us this:

The CIA has a listening device implanted in my dog.

As you've noticed, because I've styled my a element, the marked content looks much like a link. Hmmmm.

Address

The address element is used to identify physical or virtual addresses: contact information, basically. You might use it like this:

<address>This site operated by Joe and Charlie:<br>
<a href="mailto:joe@example.com">Email Joe!</a><br>
Mail us at PO Box 123, Metropolis, NY 10011<br>
Tel 212 123-4567</address>

Generally, text modified with the address element is displayed in italics, but you can change that in your stylesheet.

You can modify addresses with the following attributes:

• ID
• class
• style (for inline styling)
• title

Subscript and Superscript

You're designing a site for your Chemistry 101 class, and you find yourself needing to write carbon dioxide's formula. How do you get that number to drop down a bit? Or you're writing a figure with an exponent. How to get that number to raise up a bit?

You use the subscript and superscript tags.

Here they are:

<p>The air is laden with CO<sub>2</sub>.</p>

giving you this:

The air is laden with CO₂.

And:

<p>The answer to the equation is 10<sup>5</sup>.</p>

giving you this:

The answer to the equation is 10⁵.

Superscripts are also nice for footnotes.

Del and Ins

There are times when you want to indicate something has been written over, or superseded. It's easy enough to just replace text, but who knows what was there before? If that's important for the reader, then you can indicate superseded or obsolete text with the del tag.

<p>To do before bed: take out garbage, <del>feed dog</del>, wash dishes.</p>

gives us

To do before bed: take out garbage, feed dog, wash dishes.

(We're going to assume that you've already fed the dog, and aren't just blowing him off.)

It's also popular on blogs and forums to indicate verbal (or thought-bubble) asides:

The next time I see that fellow, I will kick him in the slats greet him politely and be on my way.

The ins is the mirror image of del, in that it indicates recently added information:

<p>To do before bed: take out garbage, <ins>feed dog</ins>, wash dishes.</p>

gives us:

To do before bed: take out garbage, feed dog, wash dishes.

Notice that on most browsers, the text marked up with the ins tag is underlined.

Often, they are combined:

<p&/>The designer of this site is <del>Joe</del> <ins>Charlie</ins>.</p>

giving us:

The designer of this site is Joe Charlie.

and thus alerting site visitors to the change.

You can modify elements using the del and ins tags with the following attributes:

• ID
• class
• style (for inline styling)
• title

Text Decorations

Here's something slightly different. The CSS text-decoration attribute allows you to put underlines, overlines, line-throughs, or no lines through a string of text:

p {
   text-decoration: line-through;
}

OR

p {
   text-decoration: overline; 
}

OR

p {
   text-decoration: underline; 
}

OR

p {
   text-decoration: none; 
} 

In practice, this is pretty straightforward.

This text has a line through it.

This text has a line over it.

This text has a line under it.

The text-decoration value of none is actually the most popular of the four, and the first CSS many of us learned. Why? Because it's the styling that gets rid of the underlines browsers put under links by default:

a {
   text-decoration: none;
}

Text Indent

The text-indent attribute is a much more valid way to indent paragraphs and other text without using clunky and obsolete HTML workarounds such as repeated instances of   spacers, or even worse, "spacer gif" images.

The text-indent attribute can be set with either percentages, ems, or absolute (pixel) values:

p {
   text-indent: 10%;
}

OR

p {
   text-indent: .1em;
}

OR

p {
   text-indent: 10px;
}

In this case, it's probably better to use pixels instead of percentages, as the percentage indents can vary widely from one display to another.

Negative values are allowed; as you can imagine, this can give us a cool "hanging indent" effect, which looks great in certain circumstances and not so hot in others. The problem here is that sometimes the negative value makes the text disappear off the left side of the browser, unless you add left-side padding to compensate. And, some older browsers don't like the negative values.

Text Align

Text in most browsers is aligned to the left by default. However, there are times where you might want to align your text to the right, or justify it (align it to both left and right, like a newspaper column — the text in the center content columns of this site is justified). Here are the five values text-align can have:

• left
• right
• center
• justify
• inherit

Here's how you might use it:

p {
   text-align: right;
}

OR

p {
   text-align: justify;
}

The inherit value ensures that the designated child element "inherits" the same text-align value as its parent.

Text alignment only works with block-level elements and table cells.

More about block and inline elements.

More about tables.

Vertical Align

The vertical-align property lets you vertically align an inline element. (Therefore it won't work on a block-level element such as a paragraph.)

More about block and inline elements.

This is a fairly tricky little property, and a lot of Web designers avoid it unless absolutely necessary. But we're up for the challenge, right?

The vertical-align property has 11 values:

• baseline (the default)
• sub
• super
• top
• text-top
• middle
• text-bottom
• bottom
• percentage value (i.e. 20%)
• length value (i.e. .2em)
• inherit

This property is based on the concept of the "baseline", which we explain more fully elsewhere in the page. Basically, the vertical-align property uses the baseline of the text to determine what the vertical alignment is. The default value, baseline, aligns the text with the baseline of the parent element.

More about the box model.

We most often use the vertical-align property with images, to align them the way we want them with surrounding text.

The sub value lowers the designated element relative to the baseline, while the super element raises it. Think "subscript" and "superscript." CSS does not designate how far the element will be raised or lowered, but leaves that to the browser.

The text-top and text-bottom values align an element with the top and bottom edges of the surrounding text, respectively. How much depends on the font size.

The middle value aligns the vertical midpoint of the element with the midpoint of the surrounding text.

The top and bottom values align the element with the top and bottom of the line-height of the element.

More about line height.

Using a percentage element raises or lowers the element relative to the baseline. You can use positive or negative percentages.

Text Transform

Use the text-transform attribute to modify the capitalization of your text. You can present it in all caps, in strictly lowercase, or capitalizing the first letter of every word:

p {
   text-transform: uppercase;
}

OR

p {
   text-transform: lowercase;
}

OR

p {
   text-transform: capitalize;
}

gives us:

This text is in all uppercase letters.

This text is in all lowercase letters.

This text has each word capitalized.

Font Variant

A similar technique to the text-transform property is the font-variant. Right now, there's only two values: the default of normal, and the small-caps value.

p {
   font-variant: small-caps;
}

gives us:

This text is in small capitals.

Notice that the uppercase letters (the T in "This," for example) still displays in a regular uppercase letter.

White-space

When you leave a lot of spaces in your code, they show up on the text page as a lot of spaces, but the browser automatically collapses all that spacing into a single space. Web developer Louis Lazaris writes:

This comes in handy, because it allows us to correctly indent and seperate the elements in our (X)HTML so it will be readable and maintainable — without creating extra unwanted space and line breaks in the browser output.

It sure helps us in keeping our designs organized. But what if we want some of those spaces to appear in our displayed HTML?

There's always the pre element, but that is better used for formatting large and varied strings of text. And there's the non-breaking space entity, but that's using HTML to force a presentational aspect in your code: like using a pair of pliers when a wrench would be the proper tool. Lazaris calls the white-space attribute a "cleaner," CSS-based method of controlling the space in your document.

How does it work? Simple. The white-space attribute, with its value nowrap, allows you to prevent text from wrapping until you place a <br> break into your text:

p {
   white-space: nowrap; 
}

gives us:

This text goes on far longer than the column will normally allow, and will continue going on and on and on and on, ad infinitum and nevermore, until I finally get with the program, stop fiddling about, and use a <br>
code break to force it onto the next line.

(I used a CSS overflow property to make this appear more usefully on the page. Hence the scrollbar. The white-space property by itself would just have made the text run right out of the column and disappear. No one wants that. Including you in your design, so be careful how you use this attribute.)

More about the overflow property.

Lazaris reminds us:

One possible problem for beginners using this property … is that they assume that setting whitespace: nowrap on an element will prevent that element from dropping to the next line if it is part of a group of floated boxes. The white-space property, however, will only apply to the inline elements inside of the element its applied to, and will not affect block elements or the spacing of the element itself.

More about block and inline elements.

The white-space property has a default value of normal (as opposed to nowrap), but the only time you'd use it is to override an earlier setting of nowrap.

There are three other values for white-space:

• pre
• pre-line
• pre-wrap

Surprisingly few designers use these.

The white-space: pre; value works exactly like the HTML element pre, as discussed above.

The white-space: pre-line; value works just like the white-space: pre; value, except that it allows for natural line breaks.

The white-space: pre-wrap; value works just like the white-space: pre-line; value, except that it naturally wraps lines according to its parent element. Unfortunately, this quite useful value is ignored by IE6 and below, and Firefox 2.

Lazaris gives more information and excellent examples of the various uses of the white-space property in his article.

Word Spacing

By using the word-spacing attribute, you can override the default value of your browser display to put whatever spacing (in pixels) you like between your words. Let's use an example of 10 pixels between words:

p {
   word-spacing: 10px;
}

gives us:

This line of text is well spaced, perhaps overly so.

Like most similar properties, word-spacing can also use ems, though few designers do this. It also supports the inherit value.

Line Height

Basically, line-height defines the minimum distance between the baselines of vertically adjacent lines of text. (Baseline, basically, it's a play on words, get it? Okay, I'll stop.) The "baseline" of a line of text is the imaginary line upon which the bottoms of the characters sit. We're not talking about the "tail" (yes, tail, though it's more precisely known as the "descender") of a letter, such as the portion of the lower-case p, g, or q that drops below the baseline. All letters "sit" on the baseline. If you're knowledgeable about printing, typesetting, or desktop publishing, you might call this "leading," or less likely, "interlinear space". Increasing the line height of a block of text gives a bit more space between the lines, more room to "breathe," design-wise.

There are five values you can use for line-height:

• normal (the default)
• a number (i.e. 3)
• a length (i.e. 3em)
• a percentage (i.e. 300%
• inherit

Let's look at some examples:

p.spacy {
   line-height: normal;
}

As noted, this is the default. You wouldn't use this unless you were resetting the value from something earlier in your stylesheet. Most browsers set the default value at 120% of the line-height, so if the font size was 10px, the line height would be 12px.

p.spacy {
   line-height: 2;
}

which gives us:

This paragraph has a relatively large line-height value. You can see it when this line finally wraps around and demonstrates it. That's a pretty big chunk of space between these lines!

This is one of the few times you'll see a number like this used without a value, such as px or em. The number is actually a scaling factor, meaning the line height is 3 times, or triple, the font size. If your font size were 10px, your line height would be 30px. (This is a pretty big value for a line height. You should try smaller numbers to see the effect before trying values this large.)

p.spacy {
   line-height: 3em;
}

This uses a length value (in this case, the em, though you could use pixels also) to designate the line height. Like the other example, the line height here would be triple the font size.

p.spacy {
   line-height: 300%;
}

Same doubling as above, just using a percentage value instead of the previous examples.

You can use negative values, which usually makes the lines overlap; this is sometimes used for artistic effect.

The last one, inherit, is tricky.

p.spacy {
   line-height: inherit;
}

You'd use this when you want your line height to "inherit" a value from the parent element. Note that the child element receiving the "inherited" line height gets the computed value from the parent, not the specified value.

Huh? Let's try an example.

If you have a div with a font size of 12px and a line height of 1em, the line height calculates to 12px. If your line height is 2em, the calculated line height is 24px. Let's say you have the latter. A paragraph element that is the child of that particular div will inherit the 24px line height, not the relative 2em value. If the paragraph has a really large font size, i.e. over 24px, the lines will overlap. Surprise!

Internet Explorer 7 (and earlier versions as well) doesn't handle line-height quite right, not recognizing inherit at all and mishandling the other values in certain circumstances. You can read more about it on the SitePoint Reference. The same is true of Firefox 1.0, but who uses that browser?

Letter Spacing

Using the letter-spacing attribute, you can override the default value of your browser display to put whatever spacing (usually in pixels) you like between your letters. Using an example of 3 pixels between letters:

p {
   letter-spacing: 3px;
}

gives us:

Every letter of this paragraph is spaced.

Playing with this attribute, including negative letter spacing (i.e. letter-spacing: -1px), can create some elegant and sophisticated effects in heading text. As with all things Web, test it carefully, in multiple browsers, before treating the public to your design.

You can also use ems in your letter spacing, but most designers don't, mostly because the results vary from one browser to the next, and this is something that most designers like to control as closely as possible. You can also use the inherit value.

Also note that IE 7 and below don't implement the property quite right, nor do they support the inherit value.