CSS — Text

Text color

p {
    color: #333;            /* dark gray reads softer than pure black */
}
a {
    color: #0d9488;
}

What the browser displays

(Body paragraphs in comfortable dark gray, links in teal.)

Convention worth copying: body text #333–#444 instead of #000 — pure black on white is harsh at length.

Text alignment

h1        { text-align: center; }
.bio      { text-align: right; }
body      { text-align: left; }     /* default */
.job-post { text-align: justify; }  /* flush both edges — use sparingly */

Value	Effect	Where it belongs
left	Ragged right edge	Body text default
center	Centered lines	Headings, hero content
right	Ragged left edge	Dates, prices in tables
justify	Clean both edges	Print-like columns; can create rivers of gaps

Decoration — mostly for links

a           { text-decoration: none; }         /* strip underline   */
a:hover     { text-decoration: underline; }    /* restore on hover  */
.old-price  { text-decoration: line-through; } /* struck through    */

Removing the underline is fine if links stay visually distinct another way (color + context). Links indistinguishable from text are an accessibility failure.

Transformation

.nav-link    { text-transform: uppercase; }
.product-sku { text-transform: lowercase; }
.name        { text-transform: capitalize; }

<p style="text-transform: uppercase;">shout this</p>

Displays as: SHOUT THIS

Handy because the underlying HTML keeps its natural casing (good for copy-paste, SEO, screen readers) while the presentation changes.

Letter and word spacing

.logo      { letter-spacing: 4px; }     /* airy brand mark    */
.overline  { letter-spacing: 2px;
             text-transform: uppercase;
             font-size: 12px; }          /* the "eyebrow" label above headings */
.crowded   { word-spacing: 8px; }

Wide-tracked uppercase small text is a designer's favorite eyebrow/kicker pattern:

<p style="letter-spacing:3px; text-transform:uppercase; font-size:12px;">
    Chapter One
</p>
<h1>The Silent Forest</h1>

Line height — readability's hidden dial

article {
    line-height: 1.6;    /* unitless = multiplier of font size */
}

Value	Feel
1.0	Cramped, hard to scan
1.5–1.7	Comfortable reading (sweet spot)
2.0+	Airy, poetry-like

Unitless numbers are preferred — they inherit cleanly. If your paragraphs feel dense but you can't say why, it's usually this.

Text shadow

.hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
/*            x  y  blur  color */

Classic use: white headline over a photo gains legibility from a soft dark shadow. Glow effects are negative-blur tricks; subtle beats glow almost always.

Putting it together

.article {
    font-size: 17px;
    line-height: 1.65;
    color: #374151;
}
.article h2 {
    margin-top: 2em;
    letter-spacing: -0.01em;
}
.article .eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b7280;
}

Comfortable measure, generous leading, quiet gray body, punchy headings, tiny tracked labels — that's professional typography with six properties you now know.

Mini Practice

1. Set body text to #374151, line-height: 1.65; feel the upgrade vs defaults
2. Build the eyebrow-label + heading combo twice with different tracking
3. Strip link underlines; re-add them only on :hover
4. Style a price with line-through old value beside a bold new one
5. Add a soft text-shadow to white-on-photo text and compare with/without

Next: fonts →