Typography

Choosing, pairing and setting type like a professional.

Video tutorialTrack course · Envato Tuts+

Graphic Design Full Course for Beginners

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 2 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

12/12

1. 00:00Typography. Choosing, pairing and setting type like a professional.
2. 00:05Typography is 90% of most design work.
3. 00:10Type carries the message, sets the tone and builds the hierarchy — usually before colour does anything at all.
4. 00:17Reference table: Classification, Feel, Good for.
5. 00:22Two typefaces maximum: one display, one body. Three if one is monospace.
6. 00:27Pair by contrast, not similarity — a geometric sans with an old-style serif.
7. 00:32Body line-height 1.5-1.7; heading line-height 1.0-1.2.
8. 00:37Line length 45-75 characters for readable paragraphs.
9. 00:42Tighten tracking as size grows; loosen it for small uppercase labels.
10. 00:47Never stretch or squash type — use a real condensed or extended weight.
11. 00:52A type scale (1.25 ratio) (css): :root {…
12. 00:57Note: If a design feels amateur but you can't say why, it is almost always the type: too many faces, wrong line-height, or lines that run too long.

Typography is 90% of most design work. Type carries the message, sets the tone and builds the hierarchy — usually before colour does anything at all.

• Two typefaces maximum: one display, one body. Three if one is monospace.
• Pair by contrast, not similarity — a geometric sans with an old-style serif.
• Body line-height 1.5-1.7; heading line-height 1.0-1.2.
• Line length 45-75 characters for readable paragraphs.
• Tighten tracking as size grows; loosen it for small uppercase labels.
• Never stretch or squash type — use a real condensed or extended weight.

:root {
  --t-xs: 0.64rem;
  --t-sm: 0.8rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.563rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;
  --t-4xl: 3.052rem;
}
h1 { font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -0.02em; }
p  { font-size: var(--t-base); line-height: 1.6; max-width: 65ch; }