Style Text with CSS Font Properties

Introduction

In this lab, students will learn how to style text using CSS font properties, exploring fundamental typography techniques in web design. The comprehensive tutorial guides learners through creating an HTML document and applying various font styling methods, including font family, size, line height, style, and weight.

Participants will start by setting up a basic HTML structure, then progressively enhance their typography skills by implementing CSS properties that control text appearance. Through hands-on practice, students will discover how to create visually appealing and readable web content using different font techniques, gaining practical experience in web typography design.

Create HTML File and Set Up Basic Structure

In this step, you'll learn how to create an HTML file and set up its basic structure for styling text with CSS. We'll use the WebIDE to create a new HTML document that will serve as the foundation for our typography styling exercise.

First, navigate to the ~/project directory in the WebIDE. Create a new file called typography.html by right-clicking in the file explorer and selecting "New File".

Here's the basic HTML structure you'll create:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* We'll add our CSS styles here in later steps */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Typography</h1>
    <p>This paragraph will demonstrate various text styling techniques.</p>
  </body>
</html>

Let's break down the key components of this HTML structure:

<!DOCTYPE html> declares this as an HTML5 document
<html lang="en"> sets the language of the document
<head> contains metadata about the document
<meta charset="UTF-8"> ensures proper character encoding
<meta name="viewport"> helps with responsive design
<title> sets the page title
<style> tag is where we'll add our CSS (we'll expand this in later steps)
<body> contains the visible content of the page

Example output when you open this file in a browser:

[A simple page with a heading "Welcome to CSS Typography"
and a paragraph below it]

Apply Font Family to Headings

In this step, you'll learn how to apply different font families to headings using CSS. Font family is a crucial property that determines the typeface of text, allowing you to create visually appealing and readable typography.

Open the typography.html file in the WebIDE and modify the <style> section to add font family properties:

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

Let's explore the key concepts of font family:

Web Safe Fonts: These are fonts that are commonly available across different devices and browsers.
- Sans-serif fonts (like Arial): Clean, modern look
- Serif fonts (like Times New Roman): Traditional, formal appearance
Fallback Fonts: Always provide a generic font family as a backup
- sans-serif
- serif
- monospace
Multiple Font Options: List fonts in order of preference
- First font is the primary choice
- Subsequent fonts are fallbacks if the previous fonts are unavailable

Expand your HTML to demonstrate different headings:

<body>
  <h1>Main Heading (Arial)</h1>
  <h2>Subheading (Times New Roman)</h2>
  <p>Paragraph text in Verdana</p>
</body>

Example output in a browser:

[A page showing:
- Main Heading in Arial
- Subheading in Times New Roman
- Paragraph in Verdana]

Set Font Size and Line Height

In this step, you'll learn how to control text readability and appearance by setting font size and line height using CSS. These properties are crucial for creating visually appealing and easy-to-read typography.

Open the typography.html file and update the <style> section with the following CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

Let's break down the key concepts:

Font Size:
- Measured in pixels (px), em, or rem
- Controls the text height
- Typical sizes:
  - Headings: 24-36px
  - Body text: 14-16px
Line Height:
- Controls vertical space between lines of text
- Improves readability
- Typically set between 1.4 and 1.6
- Can be unitless (recommended) or in pixels

Expand your HTML to demonstrate different text sizes:

<body>
  <h1>Main Heading (36px)</h1>
  <h2>Subheading (24px)</h2>
  <p>Paragraph text with increased line height for better readability.</p>
</body>

Example output in a browser:

[A page showing:
- Large main heading
- Smaller subheading
- Paragraph with comfortable line spacing]

Add Font Style and Weight

In this step, you'll learn how to use font style and weight to add emphasis and variety to your text using CSS. These properties help create visual hierarchy and improve the overall design of your typography.

Open the typography.html file and update the <style> section with the following CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

Let's explore the key concepts:

Font Style:
- normal: Standard text appearance
- italic: Slanted text
- oblique: Similar to italic, but less common
Font Weight:
- normal: Regular text (400)
- bold: Thicker, more prominent text (700)
- Numeric values: 100-900 (increments of 100)
  - 400: Normal
  - 600: Semi-bold
  - 700: Bold

Modify your HTML to demonstrate these properties:

<body>
  <h1>Main Heading (Italic and Bold)</h1>
  <h2>Subheading (Semi-Bold)</h2>
  <p>
    Regular paragraph text.
    <span class="highlight">This text is highlighted</span>.
  </p>
</body>

Example output in a browser:

[A page showing:
- Main heading in italic and bold
- Subheading in semi-bold
- Paragraph with a highlighted span]

Combine Font Properties Using Shorthand

In this step, you'll learn how to use the CSS font shorthand property to combine multiple font-related properties into a single, concise declaration. This approach makes your CSS more readable and efficient.

Open the typography.html file and update the <style> section with the following CSS:

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

Let's break down the shorthand font property syntax:

Basic Syntax: font: [font-style] [font-weight] [font-size] [line-height] [font-family]
- Order matters!
- Not all values are required
Common Shorthand Patterns:
- font: style weight size family
- font: size/line-height family
- font: weight size family

Modify your HTML to demonstrate the shorthand properties:

<body>
  <h1>Main Heading (Shorthand)</h1>
  <h2>Subheading (Compact Syntax)</h2>
  <p>
    Paragraph with line height. <span class="highlight">Highlighted text</span>.
  </p>
</body>

Example output in a browser:

[A page showing:
- Main heading with bold, italic styling
- Subheading with compact font declaration
- Paragraph with integrated line height]

Summary

In this lab, participants learn the fundamentals of text styling using CSS font properties through a step-by-step approach. The initial phase involves creating an HTML file with a basic structure, setting up essential metadata, and preparing a canvas for typography experimentation. Learners are introduced to key HTML elements and attributes, including DOCTYPE declaration, language settings, and viewport configuration.

The lab progresses to practical CSS styling techniques, focusing on font manipulation. Participants explore methods to apply font families to headings, adjust font sizes and line heights, and modify font styles and weights. By working directly in the WebIDE and incrementally building their HTML and CSS code, students gain hands-on experience in transforming text appearance and understanding how different font properties contribute to effective web typography.