Chapter 1.5☕ 15 min read

Advanced Typography & Text Layout

Master text spacing, alignment, decoration, transformation & Google Fonts for professional web typography.

01Text Layout & Alignment

Control how text flows and sits within its container. These properties affect readability and visual hierarchy.

Property Value Description

line-height 1.6 Vertical spacing between lines. Unitless values scale with font size. Ideal: 1.4-1.6 for body, 1.2-1.3 for headings.

letter-spacing 0.5px Horizontal spacing between characters. Use sparingly (typically -0.5 to 0.5px) mainly for headings.

word-spacing 2px Horizontal spacing between words. Useful for creating visual breaks in headings.

text-align center Horizontal text alignment. Options: left, right, center, justify. Left is default for readability.

text-indent 2em Indent the first line of a paragraph. Useful for traditional print-style typography.

white-space nowrap Controls how whitespace and line breaks are handled. nowrap prevents text from wrapping.

.article {
  text-align: justify;
  text-indent: 2em;
  line-height: 1.8;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}

h1 {
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tagline {
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

02Text Decoration & Transformation

Add visual effects to text and transform its case for different design contexts.

Property Description Example

text-decoration Adds visual lines (underline, overline, line-through) text-decoration: underline wavy #f97316;

text-transform Changes text case (uppercase, lowercase, capitalize) text-transform: uppercase;

text-shadow Adds shadow to text for depth and emphasis text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

font-variant Controls font variant (small-caps for acronyms, etc.) font-variant: small-caps;

/* Text Decoration — links and special effects */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.done { text-decoration: line-through; color: #94a3b8; }

/* Text Transform — visual consistency */
.section-title { text-transform: uppercase; letter-spacing: 0.1em; }
.user-name { text-transform: capitalize; }
.alert-text { text-transform: lowercase; }

/* Text Shadow — use sparingly */
h1 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.glow {
  text-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
}

🎨

Pro Tip: Use text-transform: uppercase only for short headings or UI labels. Don't use it on long paragraphs — it reduces readability significantly.

03Google Fonts — Custom Typography

Google Fonts gives you access to thousands of free fonts. Here's how to use them professionally.

/* Method 1: @import in CSS (simplest) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Method 2: <link> in HTML head (recommended for performance) */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

/* Method 3: @font-face with local files (best performance) */
@font-face {
  font-family: 'MyFont';
  src: url('fonts/myfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Use the font */
body {
  font-family: 'Inter', -apple-system, Arial, sans-serif;
}

Performance Tips:

Always use display=swap to prevent FOIT (Flash of Invisible Text)
Subset fonts: &text=ABC123 — only load characters you need
Self-host fonts for best performance — download from Google Fonts and serve locally
Limit to 2-3 font families and 3-4 font weights max

04Typography Best Practices

Professional typography rules that will make your websites look polished and professional.

Readability first: Line height 1.5 provides perfect balance. Don't go below 1.4 for body text.
Heading hierarchy: h1 (2.5rem) → h2 (2rem) → h3 (1.5rem) → body (1rem) — consistent scale matters.
Limit font families: 2-3 per page. Serif + Sans-serif is a classic combination.
Letter spacing: Headings can use negative (-0.02em) or slightly positive (0.05em). Body text should stay at 0.
Text alignment: Left-align body text. Center-align short headings. Avoid justify on narrow columns.
Color contrast: Body text should have sufficient contrast against background — WCAG AA requires 4.5:1 ratio.

/* Professional typography setup */
body {
  font-family: 'Inter', -apple-system, Arial, sans-serif;
  font-size: 1rem;                  /* 16px base */
  font-weight: 400;
  line-height: 1.6;                 /* Comfortable reading */
  color: #1e293b;                   /* Dark slate — good contrast */
  text-align: left;
}

h1 {
  font-family: 'Georgia', serif;    /* Serif for headings */
  font-size: 2.5rem;                /* 40px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;          /* Tight for headings */
  color: #0f172a;
}

p {
  max-width: 65ch;                  /* Optimal reading width */
  margin-bottom: 1.5rem;
}

05Exercise — Advanced Typography

Write CSS below and see instant preview. Practice advanced typography techniques.

Open VS Code. Create advanced-typography.html.

Use the starter code and experiment with all typography properties:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Advanced Typography</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; max-width: 800px; margin: auto; padding: 40px; }
    h1 { font-family: 'Georgia', serif; font-size: 2.5rem; font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: -0.02em; color: #f97316; }
    h2 { font-size: 1.5rem; margin-top: 40px; text-transform: uppercase; letter-spacing: 0.05em; color: #1e293b; }
    p { font-size: 1rem; line-height: 1.7; color: #374151; margin-bottom: 1.5rem; }
    .tagline { text-align: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; color: #94a3b8; }
    .highlight { text-decoration: underline wavy #f97316; text-underline-offset: 4px; }
    .price { text-decoration: line-through; color: #ef4444; }
  </style>
</head>
<body>
  <h1>🌶️ Hyderabad Food Guide</h1>
  <p class="tagline">Your culinary journey through the city of Nizams</p>
  <h2>The Biryani Trail</h2>
  <p>Start your Hyderabadi food journey at the legendary Paradise Hotel, where the dum biryani has been perfected over decades. The fragrant basmati rice, tender meat, and aromatic spices create an unforgettable experience.</p>
  <p>Best paired with mirchi ka salan and a cold glass of chaas. <span class="price">₹450/-</span> ₹349/- only on weekdays.</p>
</body>
</html>

Try these experiments:

Add text-shadow to the h1 with a warm orange glow Change the tagline to font-variant: small-caps Set max-width: 65ch on paragraphs for optimal reading width Try text-align: justify on paragraphs — see how it affects word spacing Add text-indent: 2em to the first paragraph for print-style typography

Done — Key Points:

✅ line-height: 1.5-1.8 body, 1.2 headings — unitless values scale with font size
✅ letter-spacing: -0.02 to 0.05em for headings, 0 for body text
✅ text-decoration supports underline, overline, line-through + style + color (e.g. underline wavy orange)
✅ text-transform for visual consistency — avoid on long text, reduces readability
✅ Google Fonts: display=swap, subset fonts, self-host for best performance
✅ Max-width: 65ch on paragraphs for optimal reading experience
✅ WCAG AA requires 4.5:1 color contrast ratio for body text

Previous1.4 — Typography & Fonts 📋 All Chapters Next Chapter1.6 — Display & Visibility →