Several properties are available that can format text to increase (or decrease!) readability and add special effects.

CSS Text Spacing

Extra whitespace can be added between words, characters or lines of text using three different properties. Each property accepts a numerical value (px, pt, em, mm, cm, etc.) indicating the amount of spacing.

word-spacing: 20px;
letter-spacing: 15px;
line-height: 10px;


Where do ants go for their holidays?

Frants!

This paragraph has a low line-height value, with causes the lines to overlap one another. The higher the positive value, the further apart the lines would be spaced. A line-height value of zero causes each line to be place directly on top of the previous line... have fun trying to read that!

CSS Text Indentation

The first line of a block of text can be indented using the text-indent property with a positive numerical value.

p { text-indent: 25px; }

This paragraph begins with a 25px indentation that can be applied to all paragraphs on a webpage by adding a single line of CSS to an external stylesheet. Pretty neat, huh?

CSS Text Decoration

Text decorations are lines that go over, through, or under text, or do not show up at all. They can also cause text to blink, which can be a very annoying feature that I would not recommend for general use. Text decorations are often used to remove underlines from links, etc.

text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
text-decoration: blink;


This Is An Example of text-decoration: none;

This Is An Example of text-decoration: overline;

This Is An Example of text-decoration: line-through;

This Is An Example of text-decoration: underline;

This Is An Example of text-decoration: blink;

CSS Text Transformation

The text-transform property will change the capitalization of the text that it is applied to. Four values are available to this property.

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;


This is an example of text-transform: none;

This is an example of text-transform: capitalize;

This is an example of text-transform: uppercase;

This is an example of text-transform: lowercase;

CSS Text Alignment

Text is horizontally aligned to the left by default, but can be centered, justified, or aligned to the right using the text-align property.

text-align: left;
text-align: right;
text-align: center;
text-align: justify;


This paragraph is aligned to the left. It is the default setting when a text alignment is not specified. It is also the easiest to read, as it is the standard that everyone is accustomed to.

This paragraph is aligned to the right. It usually makes paragraphs difficult to read, but may be useful for positioning small lines of text.

This paragraph is centered.

This paragraph is justified, meaning that it is stretched across 100 % of the available width so that the two sides of the paragraph are even. I can't see, personally, why this is any better or worse than aligning to the left, but to each his or her own!

Vertical CSS Text Alignment

Text and can be aligned vertically using the vertical-align property. Various HTML elements, such as the image element, can be vertically aligned as well. This property accepts the following values:

length	Positive or Negative Numerical Value (px, pt, em, cm, in, etc.)
percentage	Positive or Negative Percentage Value (%)
baseline	(Default) Aligns An Element's Base With Parent Element
bottom	Align's Element's Bottom With Lowest Element on Line
middle	Vertically Aligns Element In Middle of Parent Element
sub	Aligns Element As A Subscript
super	Aligns Element As A Superscript
text-top	Aligns the Top of An Element With the Top of Its Parent Element's Font
text-bottom	Aligns the Bottom of An Element With the Bottom of Its Parent Element's Font
top	Aligns the Top of An Element With the Top of the Tallest Element In the Line

CSS Text Shadows

Not all browsers support the text-shadow property, which does exactly what its name suggests, but it can be a fun effect when it is supported. This property accepts four values at one time. One value sets the color of the shadow, two values (positive or negative numerical values) set the location of the shadow, and a 4th value sets the blurriness of the shadow.

p { text-shadow: #658C00 4px 4px 8px; }

This paragraph may or may not have a shadow, depending on the browser that you are using.

p { color: black; text-shadow: 2px 2px 3px #999999; }

This paragraph may or may not have a shadow, depending on the browser that you are using.

p { color: white; text-shadow: black 0.1em 0.1em 0.2em; }

This paragraph may or may not have a shadow, depending on the browser that you are using.

Multiple sets of values can be specified at a time, comma separated, to create a glowing effect.

p {
  color: white;
  font-size: 25px;
  text-shadow: 0 0 24px #FFA100, 0 0 4px #FFA100, 1px 1px 2px #C0C0C0;
}

This paragraph may or may not be glowing.