Typographic treatment

character

These properties set the typographic treatment used with individual characters.

letter-spacing
quotes
tab-size
text-decoration
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-style
text-emphasis-color
text-emphasis-position
text-shadow
text-transform
text-underline-position
white-space
word-break
word-spacing
overflow-wrap

letter-spacing

Compress or expand letter spacing

Fine tune the distance between the individual characters of words to create titling effects and to improve readability.

css, style, character, letter-spacing

quotes

Culturally aware quotations

Set the glyphs used as quotation-mark enclosures with HTML's <q> tag.

css, style, character, quotes

tab-size

Oh no! Tabs versus spaces

Use this property to set the width of the whitespace created by a TAB keystroke.

css, style, character, tab-size

text-decoration

All-in-one spec

This property sets all of these properties in a single declaration: text-decoration-line, text-decoration-style and text-decoration-thickness.

css, style, character, text-decoration

text-decoration-line

Decorative line

Choose which type of decorative line to apply to the element's text.

css, style, character, text-decoration-line

text-decoration-color

Decorative line color

Set the color of underlines, overlines, strikethroughs, and wavy lines.

css, style, character, text-decoration-color

text-decoration-style

Decorative line style

Set the style for decorative lines used with the element's text.

css, style, character, text-decoration-style

text-decoration-thickness

Decorative line thickness

Set the thickness of underlines, overlines, strikethroughs, and wavy lines.

css, style, character, text-decoration-thickness

text-emphasis

All-in-one spec

This property sets both the text-emphasis-color and text-emphasis-style properties in a single declaration.

css, style, character, text-emphasis

text-emphasis-style

Emphasis mark style

This property specifies which symbol to use for East Asian text emphasis marks.

css, style, character, text-emphasis-style

text-emphasis-color

Emphasis mark color

This property sets the color used with East Asian text emphasis marks.

css, style, character, text-emphasis-color

text-emphasis-position

Emphasis mark position

This property sets the position of East Asian emphasis marks.

css, style, character, text-emphasis-position

text-shadow

A typographic lighting effect

This property casts a drop shadow across text using a light source from a specified direction and distance.

css, style, character, text-shadow

text-transform

UPPERCASE/lowercase

Force the letters of an element to be UPPERCASE or lowercase.

css, style, character, text-transform

text-underline-position

Make underlines more readable

Use this property to force text-decoration underlines to be below the baseline of characters, so that the underline does not cross over letter descenders.

css, style, character, text-underline-position

white-space

When you really want to keep those spaces

Determine how spaces, tabs and newlines are handled within an element.

css, style, character, white-space

word-break

Force text to break when spaces are not present

Prevent text that has no spaces from overflowing the element's boundaries.

css, style, character, word-break

word-spacing

Whitespace effect for words

Add additional spacing between words.

css, style, character, word-spacing

overflow-wrap

Prevent overflow

Break a long string of characters without spaces so that it doesn't overflow the element's boundaries.

css, style, character, overflow-wrap