Typography Basics

Typography plays a crucial role in readability, aesthetics, and the overall user experience of a website. CSS provides properties to control spacing between lines, letters, and words.

Here are the core typography basics every web designer should know:

Font Family

The font family defines the typeface used for text. You can use web-safe fonts or import custom fonts from Google Fonts.

Example:

<p style="font-family: Arial, sans-serif;">
  This text is in Arial (a sans-serif font).
</p>

<p style="font-family: 'Times New Roman', serif;">
  This text is in Times New Roman (a serif font).
</p>

Output :

Line-Height

The line-height property controls the vertical spacing between lines of text. Proper line spacing makes text easier to read and prevents it from looking crowded or cluttered.

Example:

<p style="line-height: 1;">
  This paragraph has a line-height of 1 (tight spacing).
  <br>Each line looks very close to the other.
</p>

<p style="line-height: 2;">
  This paragraph has a line-height of 2 (loose spacing).
  <br>Each line has extra breathing space.
</p>

Output :

Letter-Spacing

letter-spacing adjusts the space between individual characters. It’s often used in headings, logos, or stylized text to improve clarity or create a visual effect.

Example:

<h2 style="letter-spacing: 0px;">Normal Letter Spacing</h2>
<h2 style="letter-spacing: 4px;">Wide Letter Spacing</h2>
<h2 style="letter-spacing: -2px;">Tight Letter Spacing</h2>

Output :

Word-Spacing

word-spacing controls the space between words in a line of text. This can improve readability, especially for justified text or large blocks of content.

Example:

<p style="word-spacing: 0px;">
  Normal word spacing in this sentence.
</p>

<p style="word-spacing: 10px;">
  Increased word spacing in this sentence.
</p>

<p style="word-spacing: -2px;">
  Reduced word spacing in this sentence.
</p>

Output :

Text Indent

Shifts the first line of a paragraph inward.

<p style="text-indent: 50px;">
  The first line of this paragraph is indented by 50px.
</p>

Output :

learn code with durgesh images

Text Shadow

Adds depth, glow, or stylistic effects to text.

Example:

<h1 style="text-shadow: 2px 2px 5px gray;">
  This heading has a gray shadow.
</h1>

<h1 style="text-shadow: 0 0 8px red;">
  This heading has a glowing red shadow.
</h1>

Output :

White-Space & Wrapping

Controls how text handles spaces and breaks.

Example:

<p style="white-space: nowrap; background: #eee;">
  This sentence will not wrap to the next line no matter how long it gets.
</p>

<p style="width: 200px; word-wrap: break-word; background: #eee;">
  ThisIsAReallyLongWordThatWillBreakAndWrapIntoMultipleLines.
</p>

Output :

Example: Typography Basics in CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typography Basics Demo</title>
  <style>
    body {
      font-family: "Georgia", "Times New Roman", serif;
      background: #f9f9f9;
      padding: 30px;
      color: #333;
      line-height: 1.6;
    }

    h1 {
      font-family: "Roboto", Arial, sans-serif;
      font-size: 42px;
      text-align: center;
      text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
      margin-bottom: 20px;
    }

    h2 {
      font-size: 28px;
      letter-spacing: 2px;
      margin-top: 40px;
      margin-bottom: 10px;
      color: #185a9d;
    }

    p {
      font-size: 18px;
      word-spacing: 4px;
      text-indent: 30px;
      margin-bottom: 20px;
    }

    .nowrap {
      white-space: nowrap;
      background: #eee;
      padding: 5px;
      display: inline-block;
    }

    .break {
      width: 200px;
      background: #eee;
      padding: 5px;
      word-wrap: break-word;
    }
  </style>
</head>
<body>

  <h1>Typography Basics in CSS</h1>

  <h2>Font Family, Size & Line Height</h2>
  <p>
    This paragraph is styled using the <strong>Georgia</strong> font with a line-height of 1.6 and font-size of 18px. Proper line-height makes text easier to read and visually balanced across different devices.
  </p>

  <h2>Letter Spacing & Word Spacing</h2>
  <p>
    Notice how this paragraph uses increased <em>word spacing</em> and the heading above used <em>letter spacing</em>. These small tweaks improve readability and add style to text content.
  </p>

  <h2>Text Indent</h2>
  <p>
    The first line of this paragraph is indented by 30px, which is often used in books, blogs, and articles to signal the start of a new section. It gives a professional, editorial feel to text layout.
  </p>

  <h2>Text Shadow</h2>
  <p style="text-shadow: 1px 1px 4px rgba(255,87,51,0.5); font-size:20px;">
    This paragraph has a soft orange shadow applied, making it stand out from the background while maintaining readability.
  </p>

  <h2>White-Space & Wrapping</h2>
  <p>
    <span class="nowrap">This sentence will never break into a new line.</span>
  </p>
  <p class="break">
    ThisIsAVeryLongWordThatWouldNormallyBreakTheLayoutButWithWordWrapItBreaksNicely.
  </p>

</body>
</html>

CSS Tutorial