Web Typography
Treehouse
Course Summary
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.
-
+
Course Description
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
About the Teacher
Hailing from Athens, GA, Mattox Shuler designs type and goods through his personal foundry, Fort. He dabbled for a few years in web and graphic design before diving into the world of type. It began as a fun side-project exploring what it takes to create a typeface. After a few feeble, yet amusing attempts, he put out his first professional typeface in early 2013 through distributors like MyFonts. From there, the foundry surprisingly and quickly took off with that initial typeface and each subsequent release making their way onto “Hot New Fonts†lists. Designing type now takes up the majority of his work, but he still loves building logos and websites from time-to-time. @fortfoundry @mattoxshuler
-
+
Course Syllabus
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 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. 8 stepsBasic 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 stepsLaying 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 stepsFinal 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 steps
