- Design
- Beginner
About this Course
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.
8 stepsHow 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.
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.
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.
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.
7 stepsTeacher
-
Mattox Shuler
Mattox lives in Athens, GA with his wife and daughter. His passion for design evolved from branding and web design into type design through his foundry, Fort. He releases his own typefaces through Fort and also acts as the creative director as new designers release families there. Fort's families have been utilized by Marvel Studios, Netflix, Energizer, Fox, Taco Bell, Samuel Adams, and more.