Typography for Developers Tutorial - Full Course

Typography is one of the most important aspects of good design. In this course, you'll learn all you need to know about creating good typography as a UX Designer: how to choose a typeface; what to look for when laying out type, how to create typographic hierarchy, laying out type, and creating responsive typography.

✏️ This course was developed by Hope Armstrong.

⭐️ Course Contents ⭐️
👏 Thanks to JM G for creating these time codes.

⌨️ (0:00) Introduction: What is Typography?
⌨️ (4:11) Typography vs Lettering
⌨️ (4:58) Typeface vs Font

⌨️ (5:57) How Typography Affects User Experience (UX)

⌨️ (10:06) Elements of TypeFace
⌨️ (12:40) Serifs
⌨️ (13:20) Sans-serifs (Without serifs)
⌨️ (13:28) Letterform Contrast
⌨️ (13:54) Text Contrast in Comparison to the Background
⌨️ (14:40) Text Color Contrast

⌨️ (16:27) Typeface Genres (Types of Typefaces)
⌨️ (17:46) Serif Sub-genres
⌨️ (20:54) Sans-serifs Sub-genres
⌨️ (23:25) Scripts

⌨️ (24:39) Print Design vs Digital Design
⌨️ (27:00) Help Clients Understand the Benefit of Good Fonts
⌨️ (29:05) Fixed vs Fluid Layouts

⌨️ (30:28) Choosing and Using Typefaces
⌨️ (31:41) Installing Fonts
⌨️ (32:15) A word on Font Formats
⌨️ (34:45) Choosing a Text Typface
⌨️ (37:12) Counters (Enclosed whitespace in Text)
⌨️ (38:20) Typeface 'Mood' Matching the Content
⌨️ (41:37) Choosing a Display Typeface
⌨️ (46:35) Translating Text Typeface to Display Typeface

⌨️ (48:08) Weight, Styles & Sizes
⌨️ (48:33) Faux Bold & Italics vs True Bold & Italics
⌨️ (51:34) Font Weighting & Styles

⌨️ (53:14) Design Project using Figma

(More time codes to come.)

--

[jmg]

Thanks for posting my Timestamps in the Description =)

0:00 - Introduction - What is Typography?
4:11 - Typography vs Lettering
4:58 - Typeface vs Font

5:57 - How Typography Affects User Experience (UX)

10:06 - Elements of TypeFace
12:40 - Serifs
13:20 - Sans-serifs (Without serifs)
13:28 - Letterform Contrast
13:54 - Text Contrast in Comparison to the Background
14:40 - Text Color Contrast

16:27 - Typeface Genres (Types of Typefaces)
17:46 - Serif Sub-genres
20:54 - Sans-serifs Sub-genres
23:25 - Scripts

24:39 - Print Design vs Digital Design
27:00 - Help Clients Understand the Benefit of Good Fonts
29:05 - Fixed vs Fluid Layouts

30:28 - Choosing and Using Typefaces
31:41 - Installing Fonts
32:15 - A word on Font Formats
34:45 - Choosing a Text Typface
37:12 - Counters (Enclosed whitespace in Text)
38:20 - Typeface 'Mood' Matching the Content
41:37 - Choosing a Display Typeface
46:35 - Translating Text Typeface to Display Typeface

48:08 - Weight, Styles & Sizes
48:33 - Faux Bold & Italics vs True Bold & Italics
51:34 - Font Weighting & Styles

53:14 - Design Project using Figma
56:30 - Typographic Scale
59:00 - Measure
1:01:31 - Tracking / Letter Spacing
1:04:22 - Kerning
1:05:28 - Ligatures
1:06:57 - Leading
1:10:39 - Baseline Grid System
1:16:42 - Laying Out Type (Hierarchy & more)
1:25:47 - Text Alignment
1:28:19 - All about CAPS
1:32:33 - Utilizing Color with Type

1:37:54 - Layout Treatments

1:40:46 - Pairing Typefaces

1:45:30 - Going Further w/ Typography
1:45:49 - Responsive Typography
1:48:40 - More on Grid Systems
1:51:44 - Variable Fonts

1:53:48 - The Fine Details of Typography
1:53:55 - Dangles
1:55:37 - Proper Punctuation
1:56:57 - Stylistic Alternates

1:58:05 - Practice Your New Typography Skills

And ~SCENE~

[EricHillAuthor]

Oh, my goodness. This is a fantastic tutorial. I’m not a designer. Just a guy trying to make his websites look better. You’ve helped a bunch. Thank you.

[nostalgicrewind]

I, m Usman and i, m from PAKISTAN. Just finished the whole course and gotta say that it is just amazing and learnt alot and eager to learn more about typoraphy. Thanks Freecodecamp as well as mam.

[minercreepmc]

I don't have any word higher than "thank you" to give you, I so appricate every course you give, We try to become great Developer, we can do that

[passwords]

Typography's never be my favorite subject because i think it's too complex to understand, but you make it really clear. Thank you. I think i'll be more hardworking on it.

[justingolden]

Awesome video! Goes over nearly everything you'd need to know to start using typography in your design.

[justingolden]

54:30 Nooo don't use pixels for text height on the web! Use rem (default 16px per 1 rem) which scales according to user preference and screen. This scales better for different displays, and allows the user to customize it (improved accessibility). This is what most CSS frameworks such as Bootstrap and Tailwind use.

[gold]

Woah, this is the tutorial I never knew I needed! Can't wait to learn!

[amandajeanne]

thank you so much for this. I am taking a typography class right now at my college and I am fully an online student. My teacher just assigns reading and when I am left confused. I ask her for help, and she just ask me if I read the reading and syllabus. leaving me left with all my questions still un-answered. I have feeling YouTube is the only thing that will get me through this class.

[quietackshon]

Kerning adjusts the space between individual letter forms, while tracking adjusts spacing uniformly over a range of characters.

[braveitor]

Excellent and thorough description of all concetps. Congrats! I've learned quite a few things.

[voidmind]

There are so many design videos using Comic Sans as an example of bad typography that sometimes it seems typography is the art of knowing not to use Comic Sans

[omarzidi]

I've seen so many tutorials like these but he always explains it best.

[fernandodasilva]

Tenho orgulho de estar inscrito neste canal! Hello from Brazil again ❤️

[verjcarreon]

OMG ITS WORKED. Guys it really worked. Thank you

[Kiralalalala]

Thank you so much, it`s extremely useful and well presented for non-native speakers!
Where could I find the teacher`s notes?

[benjaminjaramillo]

Wonderful video! Everything you need to start using typography in your design

[AlejandroMFilz]

Making the mother of all designs, Jack.
CAN fret over every aspect!

[ayushsoni]

Thank you!!! I was just looking for typography tutorial.!

[stefonseca]

looking forward to learning from the rest of your videos. Subscribed!