3. Typography & Text Styling

Level: BeginnerDuration: 20m

Fonts & Typography

Typography is a key part of web design. CSS allows you to control font family, size, weight, and style to make your text readable and visually appealing.

css

/* Basic font styling */
p {
  font-family: Arial, Helvetica, sans-serif; /* web-safe fonts */
  font-size: 16px;                            /* font size */
  font-weight: bold;                           /* normal, bold, 100-900 */
  font-style: italic;                          /* normal, italic, oblique */
  color: #333333;                              /* text color */
}

Web-safe fonts are universally available across devices. For more variety, you can use Google Fonts or custom fonts via `@font-face`.

css

/* Using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

/* Custom font with @font-face */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2');
}

h1 {
  font-family: 'MyCustomFont', sans-serif;
}

Text Properties

CSS offers many properties to style and control text appearance, alignment, spacing, and behavior.

css

/* Text styling examples */
p {
  color: #1a1a1a;             /* text color */
  text-align: justify;         /* left, right, center, justify */
  line-height: 1.6;            /* spacing between lines */
  letter-spacing: 1px;         /* spacing between letters */
  text-decoration: underline;  /* underline, line-through, none */
  text-transform: uppercase;   /* capitalize, lowercase, uppercase */
  text-shadow: 2px 2px 4px #aaa; /* shadow effect */
  white-space: nowrap;          /* normal, nowrap, pre */
  word-break: break-word;       /* break long words */
  overflow-wrap: break-word;    /* fallback for word-break */
}

By combining these properties, you can make text more readable, attractive, and responsive to different screen sizes.

Mini Project Step

Create a blog article layout with headings, paragraphs, and quotes. Use a web-safe font for the body, a Google Font for headings, and experiment with font size, weight, color, line-height, letter-spacing, and text-shadow. Test text alignment and wrapping for responsiveness. Add a blockquote with italic style and a subtle text shadow.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Typography Project</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 20px;
    }
    h1, h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      color: #2c3e50;
      text-shadow: 1px 1px 2px #ccc;
    }
    p {
      font-size: 16px;
      letter-spacing: 0.5px;
      margin-bottom: 15px;
    }
    blockquote {
      font-style: italic;
      color: #555;
      border-left: 4px solid #2c3e50;
      padding-left: 10px;
      margin-left: 0;
      text-shadow: 1px 1px 1px #eee;
    }
  </style>
</head>
<body>
  <h1>CSS Typography Basics</h1>
  <h2>Introduction</h2>
  <p>This is a paragraph demonstrating the body font, line height, and letter spacing. Adjust these properties to see how typography affects readability.</p>
  <blockquote>Typography is the craft of endowing human language with a durable visual form.</blockquote>
  <p>Experiment with colors, text alignment, and shadows to create visually engaging text.</p>
</body>
</html>

MDN CSS Typography Guide

Page

Fonts & Typography

Text Properties

Mini Project Step