Typography for the Web
In this course, we'll learn how to start thinking about type on the web by considering the many contexts for which we have to design.
What you'll learn
If you want your users or customers to retain information and have a more pleasant experience, then type is one of the single most important factors. In this course, we'll learn how to start thinking about type on the web by considering the many contexts for which we have to design. We'll go over how the browser renders type, different methods for using and pairing fonts on the web, and how to use readability, hierarchy, contrast, and white space to improve our typography for the web. This tutorial assumes a basic knowledge of typography, and some of the discussion and concepts are explored using basic CSS.
Table of contents
- Type on the Web 3m
- Understanding Default Browser Styles 9m
- Web Safe Fonts 5m
- Thinking About Context 9m
- Readability and Choosing a Font 6m
- Using and Pairing Web Safe Fonts 8m
- Choosing and Pairing Typekit Fonts 11m
- Using Typekit Fonts 11m
- Choosing and Using Google Fonts 10m
- Using Font-face 14m
- Creating a Font Stack 5m
- The Importance of Hierarchy 5m
- Hierarchy and Creating a Typographic Scale 7m
- Using a Typographic Scale 9m
- Creating a Responsive Scale with Ems 7m
- Using Contrast 8m
- Using Color 9m
- Kerning and Tracking with Letter Spacing 8m
- Line Height and Leading 4m
- Vertical Rhythm and White Space 16m
- Line Length 5m
- Alignment 6m
- Special Characters and Typographic Quotes 5m
- En Dash, Em Dash, and Hyphens 5m
- Type in Different Contexts 7m