Text Spacing and Alignment

Typography: Text Spacing and Alignment ✨

The Magic of Arranging Words

Imagine you’re arranging magnets on a fridge. You can push them closer together, spread them apart, line them up on the left, or center them perfectly. That’s exactly what CSS text spacing and alignment does with words on a webpage!

🔤 Letter-Spacing: Space Between Letters

Think of letters as people standing in a line. Sometimes they stand shoulder-to-shoulder, sometimes they need more personal space!

What It Does

The letter-spacing property controls the gap between each letter in a word.

Simple Example

/* Normal - letters stand close */
h1 {
  letter-spacing: normal;
}

/* Spread out - like stretching */
h2 {
  letter-spacing: 2px;
}

/* Tight - squeezing together */
h3 {
  letter-spacing: -1px;
}

When to Use It

• Headings: Add space to make titles look fancy and elegant
• ALL CAPS text: Uppercase letters often look better with extra space
• Logos: Create unique, memorable text styles

Quick Values

📏 Word-Spacing: Gaps Between Words

If letter-spacing is about people in a line, word-spacing is about the gaps between different groups of people!

What It Does

The word-spacing property controls how much space appears between each word.

Simple Example

/* Normal word gaps */
p {
  word-spacing: normal;
}

/* Big gaps between words */
.spacey {
  word-spacing: 10px;
}

/* Tighter words */
.tight {
  word-spacing: -2px;
}

Real-Life Use

• Poetry: Create dramatic pauses between words
• Headlines: Add breathing room for impact
• Justified text: Sometimes needs adjustment

➡️ Text-Align: Lining Up Your Text

Remember lining up toys on a shelf? You could push them all to the left, center them, or spread them evenly. That’s text-align!

What It Does

Controls where text sits horizontally inside its container.

The Four Main Options

/* Push everything left */
.left {
  text-align: left;
}

/* Center everything */
.center {
  text-align: center;
}

/* Push everything right */
.right {
  text-align: right;
}

/* Stretch to fill both edges */
.justify {
  text-align: justify;
}

Visual Guide

LEFT:     |Hello world          |
CENTER:   |     Hello world     |
RIGHT:    |          Hello world|
JUSTIFY:  |Hello          world |

When to Use Each

• Left: Body text, paragraphs (easiest to read)
• Center: Headings, titles, short text
• Right: Numbers in tables, special designs
• Justify: Newspapers, formal documents

↪️ Text-Indent: The First Line Push

Remember how books start each paragraph with a little space? That’s text-indent - it pushes the first line inward!

What It Does

Moves the first line of a paragraph to the right (or left with negative values).

Simple Example

/* Classic book-style indent */
p {
  text-indent: 2em;
}

/* Hanging indent - first line sticks out */
.hanging {
  text-indent: -20px;
  padding-left: 20px;
}

/* No indent */
.flush {
  text-indent: 0;
}

Real-World Uses

• Books & articles: Traditional paragraph style
• Bibliographies: Hanging indents for citations
• Legal documents: Formal formatting

Pro Tip

Use em units so the indent scales with your font size!

↕️ Vertical-Align: Up and Down Positioning

Imagine stacking blocks of different heights on a shelf. Do you line up their tops, bottoms, or middles? That’s vertical-align!

What It Does

Controls how inline elements (like images, icons, or text) line up vertically with each other.

Common Values

/* Sit on the baseline (default) */
img {
  vertical-align: baseline;
}

/* Align middles */
.icon {
  vertical-align: middle;
}

/* Align tops */
.top-align {
  vertical-align: top;
}

/* Align bottoms */
.bottom-align {
  vertical-align: bottom;
}

/* Move up or down */
.custom {
  vertical-align: 5px;
}

Visual Example

baseline: Text [img] here
middle:   Text [img] here (centered)
top:      [img] Text here
bottom:   Text here [img]

Perfect For

• Icons next to text: Use middle for perfect alignment
• Superscript/subscript: Use super and sub
• Table cells: Align cell content vertically

🔄 Text-Wrap: How Text Flows

Imagine pouring water into a glass. It flows and fills the space. Text-wrap tells text HOW to flow into its container!

What It Does

Controls how text breaks and wraps to new lines.

Key Values

/* Normal wrapping (default) */
p {
  text-wrap: wrap;
}

/* Never wrap - one long line */
.no-break {
  text-wrap: nowrap;
}

/* Balance line lengths */
h1 {
  text-wrap: balance;
}

/* Pretty wrapping - avoids orphans */
p {
  text-wrap: pretty;
}

Understanding Each Value

When to Use

• balance: Headlines, titles (looks more professional)
• pretty: Paragraphs (avoids lonely words)
• nowrap: Navigation items, buttons

✂️ Text-Overflow: When Text Is Too Long

What happens when you pour too much water in a glass? It overflows! Text-overflow handles what happens when text is too long for its container.

What It Does

Controls how text that doesn’t fit is displayed (or hidden).

The Options

/* Just cut it off (default) */
.clip {
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
}

/* Show "..." at the end */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Custom string (limited support) */
.custom {
  text-overflow: " [more]";
}

The Magic Three

Important! For text-overflow to work, you need ALL THREE:

.truncate {
  overflow: hidden;      /* 1. Hide overflow */
  white-space: nowrap;   /* 2. Keep on one line */
  text-overflow: ellipsis; /* 3. Show ... */
}

Visual Example

Original:  "This is a very long text"
clip:      "This is a very"
ellipsis:  "This is a ve..."

Perfect For

• Card titles: When space is limited
• Navigation menus: Prevent overflow
• Tables: Keep columns tidy

🎯 Quick Reference

graph TD
    A["Text Spacing & Alignment"] --> B["Letter-Spacing"]
    A --> C["Word-Spacing"]
    A --> D["Text-Align"]
    A --> E["Text-Indent"]
    A --> F["Vertical-Align"]
    A --> G["Text-Wrap"]
    A --> H["Text-Overflow"]

    B --> B1["Space between letters"]
    C --> C1["Space between words"]
    D --> D1["Left/Center/Right/Justify"]
    E --> E1["First line indent"]
    F --> F1["Inline element alignment"]
    G --> G1["wrap/nowrap/balance/pretty"]
    H --> H1["clip/ellipsis"]

🎨 Putting It All Together

Here’s a real example using multiple properties:

/* Elegant heading style */
.fancy-heading {
  letter-spacing: 3px;
  text-align: center;
  text-wrap: balance;
}

/* Clean paragraph style */
.article-text {
  text-indent: 1.5em;
  text-align: justify;
  word-spacing: 1px;
}

/* Truncated card title */
.card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Icon with text */
.icon-text {
  vertical-align: middle;
}

🌟 You Did It!

Now you know how to:

• ✅ Space letters apart or squeeze them together
• ✅ Control gaps between words
• ✅ Align text left, center, right, or justified
• ✅ Indent the first line of paragraphs
• ✅ Vertically align inline elements
• ✅ Control how text wraps to new lines
• ✅ Handle text that’s too long with ellipsis

These simple properties give you complete control over how your text looks and feels. You’re now a typography wizard! 🧙‍♂️