Typography Theming

Part of the Practical Frontend section of Coddy's HTML journey — lesson 15 of 35.

Typography is an important part of theming and design. Instead of writing font styles everywhere, we can define them as CSS variables and reuse them across the site. This keeps the style consistent and makes it easier to change later.

You can define variables for:

Font family (e.g., --font-family-base, --font-family-heading)

Font sizes (e.g., --font-size-base, --font-size-h1)
Line height
Letter spacing

First, let's define our typography variables in the :root element:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

Now, apply these variables to your text elements:

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

This setup creates a unified typography system that you can easily modify by changing the variable values in one place.

Challenge

Easy

Create a typography theme for a blog website with separate variables for headings and paragraph text. Your task:

Define CSS variables for:
- Font sizes for headings (--h1-size and --h2-size)
- Text color for paragraphs (--text-color) — choose a color other than pure black for better readability
- Text color for headings ( --heading-color ) — pick a color that stands out from the body text
Apply these variables to style:
- The body text
- h1 and h2 headings

Your CSS should create a clear visual hierarchy between headings and paragraph text.

Cheat sheet

Use CSS variables to create consistent typography systems by defining font styles once and reusing them across the site.

Define typography variables in the :root element:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

Apply variables to text elements using var():

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

Common typography variables include:

Font family (base and heading fonts)
Font sizes (base size and heading sizes)
Line height
Letter spacing
Colors (text and heading colors)

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <title>Typography Theming</title>
  <style>
    :root {
      /* Typography variables */
      --primary-font: "Georgia", serif;       /* for paragraphs */
      --secondary-font: "Arial", sans-serif; /* for headings */

    }

    body {
      font-family: var(--primary-font);
      color: #000000;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1, h2 {
      font-family: var(--secondary-font);
      color: #000000;
      margin-bottom: 0.5em;
    }

    h1 {
      font-size: 16px;
    }

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 1.2em;
    }

    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="blog-post">
    <h1>The Beauty of Typography in Web Design</h1>
    <p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>

    <h2>Why Typography Matters</h2>
    <p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>

    <h2>Mobile-First Typography</h2>
    <p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
  </div>
</body>
</html>