Beyond fonts, CSS provides extensive properties for styling text—from alignment and decoration to spacing and shadows. These properties let you fine-tune typography for readability, create visual hierarchy, and add polish to your designs. Mastering text styling is essential for creating professional, user-friendly websites.
text-align
The text-align property controls the horizontal alignment of text within its container.
/* Text alignment options */
.element {
text-align: left; /* Align to left edge (default for LTR) */
text-align: right; /* Align to right edge */
text-align: center; /* Center align */
text-align: justify; /* Stretch to fill width */
text-align: start; /* Align to start (respects direction) */
text-align: end; /* Align to end (respects direction) */
}Text Alignment Examples
Justify caution: text-align: justify can create awkward spacing, especially in narrow containers or with long words. Use sparingly and test carefully. It works best for wider text blocks and languages with shorter words.
text-decoration
The text-decoration property adds decorative lines to text—underlines, overlines, and strikethroughs.
Basic Text Decoration
/* Text decoration options */
.element {
text-decoration: none; /* No decoration (default) */
text-decoration: underline; /* Underline */
text-decoration: overline; /* Line above text */
text-decoration: line-through; /* Strikethrough */
}
/* Multiple decorations */
.element {
text-decoration: underline overline;
}
/* Common use: Remove underline from links */
a {
text-decoration: none;
}Text Decoration Examples
Advanced Text Decoration
CSS provides more control over text decoration with sub-properties:
/* Shorthand */
.element {
text-decoration: underline solid red;
}
/* Individual properties */
.element {
text-decoration-line: underline; /* Line type */
text-decoration-color: red; /* Line color */
text-decoration-style: solid; /* Line style */
text-decoration-thickness: 2px; /* Line thickness */
}
/* Line styles */
.element {
text-decoration-style: solid; /* Default */
text-decoration-style: double; /* Double line */
text-decoration-style: dotted; /* Dotted line */
text-decoration-style: dashed; /* Dashed line */
text-decoration-style: wavy; /* Wavy line */
}
/* Positioning */
.element {
text-underline-position: auto; /* Default */
text-underline-position: under; /* Below descenders */
}Advanced Text Decoration
Animated Underline on Hover
Animated Link Underlines
text-transform
The text-transform property controls the capitalization of text.
/* Text transformation options */
.element {
text-transform: none; /* No transformation (default) */
text-transform: uppercase; /* ALL UPPERCASE */
text-transform: lowercase; /* all lowercase */
text-transform: capitalize; /* Capitalize First Letter Of Each Word */
}Text Transform Examples
Common Use Cases
/* Buttons - all uppercase */
.button {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
/* Section headings - capitalize */
.section-title {
text-transform: capitalize;
}
/* Brand names - preserve original */
.brand {
text-transform: none;
}
/* Labels and badges - uppercase */
.badge {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
}line-height
The line-height property controls the vertical space between lines of text. It's crucial for readability.
/* Line height options */
.element {
line-height: normal; /* Browser default (usually 1.2) */
line-height: 1.5; /* Unitless (recommended) - multiplier */
line-height: 150%; /* Percentage of font-size */
line-height: 24px; /* Fixed pixel value */
line-height: 1.5em; /* Relative to font-size */
}
/* Best practice: Use unitless values */
body {
line-height: 1.6; /* 1.5-1.8 is optimal for body text */
}
h1, h2, h3 {
line-height: 1.2; /* Tighter for headings */
}Line Height Comparison
📏 Line Height Best Practices:
- Use unitless values (1.6 instead of 1.6em) to prevent inheritance issues
- Body text: 1.5-1.8 for optimal readability
- Headings: 1.2-1.3 for tighter spacing
- Buttons/UI elements: 1.0-1.2 for compact appearance
- Longer line lengths need more line-height
letter-spacing
The letter-spacing property controls the space between characters (tracking in design terms).
/* Letter spacing options */
.element {
letter-spacing: normal; /* Default - no extra spacing */
letter-spacing: 1px; /* Add 1px between letters */
letter-spacing: 0.05em; /* Relative to font size */
letter-spacing: -1px; /* Tighter spacing (negative) */
}
/* Common uses */
.uppercase-text {
text-transform: uppercase;
letter-spacing: 2px; /* Uppercase needs more spacing */
}
.heading {
letter-spacing: -0.5px; /* Tighten large headings */
}
.body-text {
letter-spacing: 0.03em; /* Subtle spacing improvement */
}Letter Spacing Examples
Pro Tip: Uppercase text almost always benefits from increased letter-spacing (1-2px). Without it, uppercase text can feel cramped and harder to read. Conversely, large headings often look better with slightly negative letter-spacing (-0.5px to -1px).
word-spacing
The word-spacing property controls the space between words.
/* Word spacing options */
.element {
word-spacing: normal; /* Default spacing */
word-spacing: 5px; /* Add 5px between words */
word-spacing: 0.5em; /* Relative to font size */
word-spacing: -2px; /* Tighter word spacing */
}Word Spacing Examples
text-indent
The text-indent property adds indentation to the first line of text in a block.
/* Text indent options */
.element {
text-indent: 0; /* No indent (default) */
text-indent: 20px; /* Indent first line by 20px */
text-indent: 2em; /* Indent relative to font size */
text-indent: 10%; /* Indent by percentage of width */
text-indent: -20px; /* Negative indent (hanging indent) */
}
/* Classic paragraph indentation */
p {
text-indent: 2em;
}
/* Hanging indent for lists */
.hanging {
text-indent: -2em;
padding-left: 2em;
}Text Indent Examples
text-shadow
The text-shadow property adds shadow effects to text. It's perfect for creating depth, emphasis, or dramatic effects.
/* Text shadow syntax */
.element {
text-shadow: h-offset v-offset blur-radius color;
}
/* Examples */
.element {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Basic shadow */
text-shadow: 0 0 10px #fff; /* Glow effect */
text-shadow: 3px 3px 0 #000; /* Hard shadow */
text-shadow: none; /* Remove shadow */
}
/* Multiple shadows */
.element {
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.3),
-2px -2px 4px rgba(255, 255, 255, 0.3);
}Text Shadow Effects
Creative Text Shadow Examples
Creative Shadow Effects
Performance Note: Complex text shadows with multiple layers can impact rendering performance. Use them sparingly, especially on text that users will scroll through quickly or on mobile devices.
white-space
The white-space property controls how white space (spaces, tabs, line breaks) is handled.
/* White space options */
.element {
white-space: normal; /* Default - collapse spaces, wrap text */
white-space: nowrap; /* No wrapping - text stays on one line */
white-space: pre; /* Preserve spaces/breaks, no wrapping */
white-space: pre-wrap; /* Preserve spaces/breaks, wrap text */
white-space: pre-line; /* Preserve breaks, collapse spaces */
white-space: break-spaces; /* Like pre-wrap but breaks at spaces */
}White Space Examples
Common Use Cases
/* Prevent text wrapping in buttons */
.button {
white-space: nowrap;
}
/* Preserve code formatting */
code, pre {
white-space: pre-wrap;
}
/* Single-line truncation (with ellipsis) */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}text-overflow
The text-overflow property controls how overflowing text is displayed. It requires overflow: hidden and white-space: nowrap to work.
/* Text overflow requires three properties */
.truncate {
white-space: nowrap; /* Prevent wrapping */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Add ... */
}
/* Options */
.element {
text-overflow: clip; /* Cut off text (default) */
text-overflow: ellipsis; /* Add ... */
text-overflow: "→"; /* Custom string (limited support) */
}Text Overflow Examples
✂️ Multi-line Truncation:
For multi-line ellipsis, use the -webkit-line-clamp property with display: -webkit-box. While it has "webkit" in the name, it's supported in all modern browsers. Set the number of lines before truncation with the line-clamp value.
vertical-align
The vertical-align property controls the vertical alignment of inline or table-cell elements.
/* Vertical align options */
.element {
vertical-align: baseline; /* Default - align to parent baseline */
vertical-align: top; /* Align to top */
vertical-align: middle; /* Align to middle */
vertical-align: bottom; /* Align to bottom */
vertical-align: text-top; /* Align to top of text */
vertical-align: text-bottom; /* Align to bottom of text */
vertical-align: sub; /* Subscript */
vertical-align: super; /* Superscript */
}
/* Length values */
.element {
vertical-align: 10px; /* Raise by 10px */
vertical-align: -5px; /* Lower by 5px */
vertical-align: 0.5em; /* Relative to font size */
}Vertical Align Examples
Important: vertical-align only works on inline and table-cell elements. It does NOT work on block-level elements. For vertical alignment of block elements, use Flexbox or Grid instead.
writing-mode
The writing-mode property controls text direction and orientation.
/* Writing mode options */
.element {
writing-mode: horizontal-tb; /* Default - left to right, top to bottom */
writing-mode: vertical-rl; /* Vertical - right to left */
writing-mode: vertical-lr; /* Vertical - left to right */
}Writing Mode Examples
Comprehensive Typography Example
Let's put together multiple text styling properties to create a polished, professional design:
Professional Typography Example
Key Takeaways
- text-align controls horizontal alignment (left, right, center, justify)
- text-decoration adds underlines, overlines, strikethroughs
- text-transform controls capitalization (uppercase, lowercase, capitalize)
- line-height controls line spacing (1.5-1.8 optimal for body)
- letter-spacing controls space between characters
- word-spacing controls space between words
- text-indent indents first line of paragraphs
- text-shadow adds shadow effects to text
- white-space controls space/break handling
- text-overflow shows ellipsis for overflow (requires nowrap + hidden)
- vertical-align aligns inline elements vertically
- Uppercase text needs increased letter-spacing (1-2px)
- Use unitless line-height values to prevent inheritance issues
- Combine properties thoughtfully for polished typography
What's Next?
Congratulations! You've completed the "Colors & Typography" section and now have a complete understanding of how to work with colors, backgrounds, fonts, and text styling in CSS. These are fundamental skills that you'll use in every project.
In the next section, "The Box Model", we'll explore one of CSS's most important concepts: how elements are sized and spaced. You'll learn about padding, borders, margins, and how they all work together to create layouts. Understanding the box model is crucial for precise control over element sizing and spacing.
Typography is a powerful tool for creating beautiful, readable websites. Practice combining different text properties to establish visual hierarchy, improve readability, and create engaging designs. Great typography can elevate even the simplest design!