• Contents
• Paragraph Alignment
• First Line Indent
• Text Overflow
• Spacing
• Vertical Alignment
• Leading
• Paragraph Spacing
• Text Decoration
• Transform
• Shadow & Stroke
• Initial Letter
• Text Wrap
• H&J
• Kerning & Ligatures
• White Space

Paragraph Alignment and First Line Indent

To control the text’s alignment, use: text-align: (start, end, left, right, center, justify). As different text flow directions push what right and left can mean, there has been a move to adopt start and end as the nomenclature instead of left and right.

To specify the first line indent, use: text-indent: and supply a length or a percentage. It will be a negative indent if you supply a negative value.

Someday soon there will be more control over justified text, as the CSS3 specifications for that are already in place. You will then be able to specify how text is to be justified: text-justify auto, lose, distributed and how the last line will be justified: text-last-line auto, start, end, center, justify but the browsers have yet to implement these justification controls.

The Text Overflow Property

When there is too much text for the box, it is possible to specify the text overflow mode — if, and only if the box also has the overflow property — text-overflow:clip, ellipsis, ellipsis-word. Try removing the overflow property and the text-overflow property breaks down.

Text Spacing, Vertical Alignment and Leading

The ability to control the spacing between Letters, otherwise known as tracking, and words is easily accomplished but know that the controls are a bit course for small text sizes. The increments are based on the character’s rendering, and that depends on the screen in use. Some of the high resolution displays will provide better controls than what are currently considered normal resolution displays.

The vertical alignment of characters, or superscript and subscript, is done with the vertical-align property, using the following values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage and length. Super and text-top are set to around 75% of the line-height. You can specify a percentage beyond that but doing so will increase the leading for that line. Put in a value of 200% and you will see what I mean.

Leading is specified by either relative or an absolute measurement with the line-height property. Relative measurements are based on the em that has been specified for the type, while a height in pixels is absolute, and do not change with changes in the size of the text.

Paragraph Spacing

Paragraph spacing is accomplished through padding and margins. Space before and space after is padding: 10px 0. The left margin is also controlled by padding or margins, and the right margin can be controlled by the paragraph width in addition to padding and margins.

Text Decoration, Text Transform, Text Shadow and Text Stroke

Though these properties affect the individual character more than the flow of characters, they belong to text and not font properties. The text-decoration: none; property/value combination is most often used to remove the default underline from links. Text decoration is used to add an underline, overlain or strike-through to the text.

CSS3 adds the ability to isolate the different parts of this property, and once it becomes adopted, will allow for individual adjustment of style, color and location of the line.

The text-transform property sets the text to lowercase or uppercase.

It is also possible to put a shadow on the text itself using the text-shadowproperty with the following value: length, length, length, color; where the first two values are the horizontal and vertical distance, the next value is the size of the blur and then comes the color.

Last but not least is the ability in CSS3 to add a text stroke. This is not yet supported by all browsers but will soon be: text-stroke: width, color;

Initial Letter

Initial letter sets the size and sink for dropped, raised, and sunken initial letters. This is already possible using the pseudo-element selector ::first-letter but the initial letter property supersedes that in functionality. Though only partially supported as of 2025, it includes initial-letter-align and initial-letter-wrap. I will detail this property once the browsers have settled on its implementation.

Text Wrap

Using the computer’s power to calculate pretty text provides “good typography”: text-wrap: pretty. Each browser can implement the property: Chrome uses it to remove text orphans, which is when only one word remains on the last line. Safari goes much further to create better typography. It not only avoids short last lines, but avoids bad rags. That smooths the ragged edge of the text, keeping it consistent. It does this by implementing hyphenation. Finally, it avoids typographic rivers. That is when spaces created between words form extended vertical white spaces that look like rivers.

The other values for text-wrap are the default value of auto, stable, and balance. text-wrap: auto is where each line of text is laid out by itself, with no consideration for multiple lines. (This is often called a “first-fit” or “greedy” algorithm.) text-wrap: stable is like auto, but used for live text, so the browser does not actively attempt to lay out the text while someone is writing. text-wrap: balance. tells the browser to wrap lines to make every line about the same length as the others. This functions well for headlines but not body text.

Hyphenation

Hyphenation. The default value is . hyphens: manual requires that you put in your own hyphenation by inserting a conditional soft hyphen U+00AD or ­. hyphens: autobreaks words at appropriate hyphenation points as determined by the conditional soft hyphen character or automatically by the browser using a hyphenation resource.

Font Kerning and Text Rendering

The font-kerning property sets the use of the kerning information stored in a font. The values are auto where the browser determines whether or not to use the stored kerning information. Some browsers will disable kerning on small fonts, since applying it could harm the readability of text. normal Font kerning information stored in the font must be applied. none Font kerning information stored in the font is disabled.

The text-rendering property improves kerning pairs & ligatures using text-rendering to optimize legibility. text-rendering: optimizeLegibility CSS property enables high-quality kerning and ligatures in certain browsers. Newer browsers have this behavior enabled by default.

Other values for text-rendering are auto, optimizeSpeed, and geometicPrecision. auto balances quality and performance. optimizeSpeedemphasizes rendering speed over legibility. geometricPrecision when drawing text. It disables kerning and ligatures.

White Space

White space processing and line feed behavior are ubiquitous defaults that determine the behavior of how text flows in an HTML document. The default behavior is to collapse multiple spaces into one space and to ignore returns. Some of the tags, like <pre> do make use of a change in whitespace, rendering the text as it is written, preserving multiple white spaces and line feeds. I use the <pre> in the CSS code view for that purpose, for example.

You can change the white space defaults by changing the value of the white-space-treatment property: ignore, preserve, ignore-if-before-linefeed, ignore-if-after-linefeed, ignore-if-surrounding-linefeed . The same is true of line feeds (or carriage returns, remember the type writer?) with the linefeed-treatment property: auto, ignore, preserve, treat-as-space, treat-as-zero-width-space, ignore-if-after-linefeed. The shorthand for white space processing is the white-space property and the values are: normal, pre, nowrap, pre-wrap, pre-lines.

White Space and Line Return Demo
The space in default white-space collapses and returns are ignored. Change that default behavior.
#space h3{
	letter-spacing: .1em;
	word-spacing: .1em;
}
#space p {
	white-space: pre;
}

Change the white-space from normal to pre or pre-wrap and you’ll see the text as it is in the HTML text editor, with soft-wrap off or, as in this example, on:

White Space and Line Return Demo
The space in default white-space collapses and returns are ignored. Change that default behavior.
#space h3{
	letter-spacing: .1em;
	word-spacing: .1em;
}
#space p {
	white-space: pre;
}