CPCODELAB
CSS

Text Styling: Align, Decoration, Spacing, Transform

7 min read

Fine-Tuning Text Appearance

Beyond font family and size, CSS provides granular control over how text is aligned, decorated, spaced, and transformed.

css
.article {
  /* Alignment */
  text-align: left;    /* or right, center, justify */

  /* Decoration */
  text-decoration: none;          /* removes underline from links */
  text-decoration: underline dotted #6366f1;

  /* Letter and word spacing */
  letter-spacing: 0.05em;
  word-spacing: 0.1em;

  /* Line height (unitless is safest) */
  line-height: 1.7;

  /* Text transform */
  text-transform: uppercase;   /* or lowercase, capitalize */

  /* Indent the first line */
  text-indent: 2em;

  /* Font weight */
  font-weight: 600;  /* or bold, 400, 700 */

  /* Font style */
  font-style: italic;
}

Use a unitless line-height (e.g., 1.6) rather than a value with units. Unitless values are inherited as a ratio, which scales correctly when child elements have different font sizes.

Ready to test yourself?
Practice CSS— quiz & coding exercises