Web Typography Course (How To)

As web features barrel ahead, web typography advances with it. We now have more control over type than ever before. But, as the often-quoted line from Spiderman goes, “With great power, comes great responsibility.” Well-built websites can be plagued by bad typography, creating an unpleasant experience to the user. In this course, we’ll cover all you need to know to begin building websites with good typography, giving users a great experience.

What you'll learn

• What is Typography
• Choosing and Using Webfonts
• Laying out Type for the Web
• Responsive Typography

Introduction to Typography

Before diving into utilizing or laying out type, we’ll need some basic knowledge about typography. This stage will give us the foundation to build upon as we learn what is typography, the terms used to describe it, and more.

Chevron 8 steps

• What is Typography?

  4:21

• Review: What is Typography?

  5 questions

• Terminology

  6:04

• Review: Terminology

  5 questions

• Different Types of Type

  6:42

• Review: Different Types of Type

  5 questions

• Print vs. The Web

  4:19

• Review: Print vs. The Web

  5 questions

How to Choose and Use Webfonts

Now that we have some general knowledge about typography, let’s look at what to consider when choosing a typeface and the different ways you can implement your webfont choice.

Chevron 8 steps

• Choosing a Text Typeface for the Web

  7:53

• Choosing a Text Typeface for the Web: Review

  6 questions

• Choosing a Display Typeface for the Web

  5:25

• Choosing a Display Typeface for the Web: Review

  5 questions

• Self-hosted Webfonts

  7:36

• Self-hosted Webfonts: Review

  5 questions

• Webfont Hosting Services

  6:52

• Webfont Hosting Services: Review

  5 questions

Basic Web Typography

Now that we have some background on typography and how to call custom typefaces to our site, we’ll familiarize ourselves with some of the basics of web typography.

Chevron 9 steps

• Weights and Styles

  9:44

• Weights and Styles: Review

  5 questions

• Font-Sizing: Px, Em, and Rem

  5:20

• Font-Sizing: Px, Em, and Rem - Part 2

  4:41

• Font-sizing: Review

  6 questions

• Horizontal Space: Measure and Margins

  4:44

• Horizontal Space: Review

  5 questions

• Vertical Space: Line-Height and Vertical Rhythm

  8:42

• Vertical Space: Review

  5 questions

Laying Out Type for the Web

With the basics of web typography in our tool belt, we can now explore more advanced techniques like creating typographic hierarchy and responsive typography.

Chevron 9 steps

• Typographic Hierarchy: Weight, Style, Size, and Position

  9:22

• Typographic Hierarchy: Review

  5 questions

• Typographic Hierarchy: Caps, Color, and Pairing Typefaces

  5:21

• Typographic Hierarchy: Caps, Color, and Pairing Typefaces - Part 2

  8:53

• Caps, Color, and Pairing Typefaces: Review

  5 questions

• Responsive Typography

  9:23

• Responsive Typography: Review

  5 questions

• Advanced Web Typography

  12:32

• Advanced Web Typography: Review

  5 questions

Final Project: Create a Typographic Site

To conclude our course on Web Typography, we’ll put what we learned to the test as we build out a website implementing the ideas learned throughout the stages. We’ll use the HTML provided from CSS Zen Garden and build out our own typographic design.

Chevron 7 steps

• Getting Started: HTML and CSS

  10:41

• Header and Summary

  7:35

• Basic One and Two Column Layouts

  9:17

• Styling the Footer

  10:55

• Responsive Typography

  9:18

• Polishing Touches

  10:57

• Web Typography: Review

  5 questions