Choosing and Using Web Fonts
With Laura Franz
Liked by 114 users
Duration: 6h 52m
Skill level: Beginner
Released: 6/27/2012
Course details
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).
Skills you’ll gain
Earn a sharable certificate
Share what you’ve learned, and be a standout professional in your desired industry with a certificate showcasing your knowledge gained from the course.
Learning
LinkedIn Learning
Certificate of Completion
-
Showcase on your LinkedIn profile under “Licenses and Certificate” section
-
Download or print out as PDF to share with others
-
Share as image online to demonstrate your skill
Meet the instructor
Learner reviews
5 out of 5
The overall rating is calculated using the average of submitted ratings. Ratings and reviews can only be submitted when non-anonymous learners complete at least 40% of the course. This helps us avoid fake reviews and spam.
Contents
-
-
Understanding Venetian fonts4m
-
Identifying a Venetian font4m 46s
-
Understanding handwritten letters3m 22s
-
Choosing a Venetian font3m 47s
-
Creating a Typekit account and building a kit3m 43s
-
Adding a Venetian font (Calluna) to your kit2m 51s
-
Applying Calluna to your web site5m 54s
-
Troubleshooting Typekit fonts that don't load2m 2s
-
Changing styling as necessary to improve the readability of the text4m 25s
-
Working with more than four styles in Typekit5m 22s
-
Looking at how using a Venetian font affects the look and feel of a web page3m 31s
-
-
-
Identifying an Old Style font6m 26s
-
Choosing an Old Style font4m 30s
-
Applying Crimson Text to a web site using Google web fonts3m 8s
-
Changing styling as necessary to improve the readability of the text9m 20s
-
Making various weights and styles work correctly across different browsers5m 16s
-
Looking at how using an Old Style font affects the look and feel of a web page4m 13s
-
-
-
Identifying a Geometric Sans Serif font2m 51s
-
Choosing a Geometric Sans Serif font4m 33s
-
Downloading a free font licensed for use on the web3m 53s
-
Using Font Squirrel to create an @font-face kit5m 12s
-
Adding the @font-face syntax to the CSS2m 57s
-
Implementing the font family in the CSS5m 29s
-
Changing styling as necessary to improve the readability of the text3m 56s
-
Looking at how using a Geometric Sans Serif font affects the look and feel of a web page2m 32s
-
-
-
Understanding what to look for when pairing fonts6m 58s
-
Using one font for headings and another for text6m 6s
-
Using different fonts for different kinds of information on the page8m 38s
-
Mixing and matching fonts within text3m 48s
-
Looking at how using two fonts affects the look and feel of a web page7m 32s
-
-
-
Understanding Script fonts2m 19s
-
Choosing a Script font for display use8m 12s
-
Changing styling as necessary to improve the form and placement of letters on the page3m 33s
-
Choosing a second font to pair with the Script Display font3m 42s
-
Incorporating a second font with the Script Display font2m 53s
-
Setting fallback fonts2m 55s
-
-
-
Understanding Wood Type fonts3m 25s
-
Choosing a Wood Type font for display use8m 35s
-
Changing styling as necessary to improve the form and placement of letters on the page4m 57s
-
Choosing a second font to pair with the Wood Type font2m 28s
-
Incorporating a second font with the Wood Type display font4m 42s
-
Setting fallback fonts2m 31s
-
-
-
Choosing a Futuristic font for display use5m 33s
-
Applying the Futuristic font and changing the styling as necessary to improve the form and placement of letters on the page6m 40s
-
Choosing a second font to pair with the Futuristic font2m 48s
-
Incorporating a second font with the Futuristic display font4m 21s
-
Setting fallback fonts2m 22s
-
Looking at the set of four ads5m 54s
-
What’s included
- Practice while you learn 1 exercise file
- Learn on the go Access on tablet and phone