Browse topics
Filter lessons by topic
Why care about typography?
An overview of Latin type anatomy
Making sense of typographic classifications
Exploring punctuation
Introducing weights & styles
Introducing alternate glyphs
Understanding numerals
OpenType features in practice
Introducing variable fonts
Introducing color fonts
How typefaces are designed & fonts are made
Choosing web fonts: A beginner's all-in-one guide
A checklist for choosing type
Emotive considerations for choosing typefaces
Choosing reliable typefaces
Exploring typefaces with multiple weights or grades
Exploring width in type
Choosing typefaces that have optical sizes
Pairing typefaces
Pairing typefaces within a family & superfamily
Pairing typefaces by the same type designer or type foundry
Pairing typefaces using the font matrix
Exploring x-height & the em square
Adding fonts to Google Docs and Slides
From type to logotype
Vertical spacing & line-height in design systems
How to make type feel authentic
Installing & managing fonts—including variable fonts
Language support in fonts
Choosing a suitable line height
Understanding measure/line length
Track carefully or not at all
Manual kerning is rarely required
Avoiding widows & orphans
Working with hanging punctuation
Breaking the rules
Designing with variable fonts in desktop apps
Using web fonts
The foundations of web typography
Using web fonts from a font delivery service
Self-hosting web fonts
Implementing OpenType features on the web
Loading variable fonts on the web
Styling type on the web with variable fonts
Switching from static to variable fonts
Introducing parametric axes
The complications of typographic size on the web
Typesetting on a curved path
Em
A unit of measurement, 1em is equal to the size of a font. Adjusting font size will resize glyphs relative to the em square.
Weight axis (wght)
An axis found in some variable fonts that controls the font file’s weight parameter.
Optical sizes
Different versions of a typeface optimized for use at specific sizes or size ranges.
Typeface
A typeface is what you see; a font is what you use.
X-height
The height of the lowercase characters that have no ascenders nor descenders, which indicates how tall or short the type appears.
Contrast
The difference between the thick and thin parts of a stroke. A monolinear typeface has low stroke contrast, and is the opposite of a high contrast face.