CSS Typography: Enhancing Text Styles with CSS Properties

In this blog post, we will explore various CSS properties that can be used to style and enhance text in web design. These properties can help you transform text, add decorations, align text, modify spacing, apply shadows, and control line breaks and wrapping. Let’s dive in!

Text Transform

The text-transform property allows you to change the case of an element’s text. There are four valid values:

capitalize: Uppercases the first letter of each word.
uppercase: Uppercases all the text.
lowercase: Lowercases all the text.
none: Disables transforming the text, preventing inheritance.

Example:

1
2
3

p {
  text-transform: uppercase;
}

Text Decoration

The text-decoration property is used to add decorations to text, such as underlines, overlines, line-throughs, or blinking effects. You can also customize the style and color of the decoration.

Example:

1
2
3

p {
  text-decoration: underline;
}

Customizing the style and color:

1
2
3

p {
  text-decoration: underline dashed yellow;
}

Alternatively, you can use the specific properties text-decoration-line, text-decoration-color, and text-decoration-style to accomplish the same effect.

Text Alignment

The text-align property controls the horizontal alignment of text within its container. The default value is start, which aligns the text based on the language direction. Other possible values include end, left, right, center, and justify.

Example:

1
2
3

p {
  text-align: right;
}

Vertical Alignment

The vertical-align property determines how inline elements are vertically aligned. You can set length or percentage values to align the text higher or lower than the baseline of the parent element. Alternatively, you can use keywords like baseline, sub, super, top, text-top, middle, bottom, or text-bottom.

Line Height

The line-height property allows you to adjust the vertical spacing between lines of text. This property affects the space between baselines, not the actual font size.

Example:

1
2
3

p {
  line-height: 0.9rem;
}

Text Indentation

The text-indent property is used to indent the first line of a paragraph. You can specify a length or percentage value to determine the indentation amount.

Example:

1
2
3

p {
  text-indent: -10px;
}

Controlling the Last Line Alignment

By default, the last line of a paragraph is aligned following the text-align value. You can use the text-align-last property to change this behavior.

Example:

1
2
3

p {
  text-align-last: right;
}

Adjusting Word and Letter Spacing

The word-spacing property modifies the spacing between words. You can use the normal keyword to reset inherited values or specify a length value.

The letter-spacing property modifies the spacing between letters. Similarly, you can use the normal keyword or a length value.

Example:

p {
  word-spacing: 2px;
}

span {
  word-spacing: -0.2em;
}

Similarly for letter-spacing.

Adding Text Shadows

The text-shadow property allows you to apply a shadow effect to the text. You can specify the X and Y offset of the shadow, the blur radius, and the color (optional).

Example:

p {
  text-shadow: 0.2px 2px;
}

span {
  text-shadow: yellow 0.2px 2px 3px;
}

Handling White Space

The white-space property controls how white space, new lines, and tabs are handled within an element. Valid values that collapse white space are normal, nowrap, and pre-line. Valid values that preserve white space are pre and pre-wrap.

Customizing Tab Sizes

The tab-size property sets the width of the tab character. You can set an integer value to define the number of character spaces or specify a length value.

Example:

p {
  tab-size: 2;
}

span {
  tab-size: 4px;
}

Adjusting Text Writing Mode

The writing-mode property defines whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress.

Handling Line Breaks and Wrapping

The hyphens property determines if hyphens should be automatically added when going to a new line. You can choose between none, manual, or auto.

The word-break property specifies how to break lines within words. Values like normal, break-all, and keep-all control the line break behavior.

The overflow-wrap property controls what happens when a word is too long to fit a line. You can use break-word to break the word at the line’s exact length or anywhere to break it when there is a soft wrap opportunity.

And that covers the major CSS properties related to typography! By harnessing these properties, you can create visually appealing and well-structured text in your web designs.

Tags: CSS, Typography, Text Styles, Line Height, Text Alignment, Vertical Alignment, Indentation, Word Spacing, Letter Spacing, Text Shadows, White Space Handling, Tab Sizes, Writing Mode, Line Breaks, Overflow-Wrap