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