Modules and Lessons
Module 0. Welcome
Available in
days
days
after you enroll
Module 1. Introduction to Typography
Available in
days
days
after you enroll
- 1.1. The history of typography (67:41)
- 1.2. What typography really is (2:19)
- 1.3. Why typography is important (2:50)
- 1.4. The main goal of typography (8:18)
- 1.5. The purpose of Typography in UX/UI design (4:20)
- 1.6. Readability & Legibility (25:37)
- 1.7. Where typography is used (8:28)
- 1.8. The difference between typography for Graphic and UX/UI design (15:31)
- 1.9. Bonus: The list of type-focused websites for inspiration
Module 2. Practical typography. Preparation
Available in
days
days
after you enroll
- 2.1. How to work with information efficiently (27:11)
- 2.2. The role and the place of typography in the design project (2:43)
- 2.3. Where to start (6:05)
- 2.4. What every page consists of (4:34)
- 2.5. Content, navigation and IA (20:56)
- 2.6. On-page Information Architecture (21:42)
- 2.7. Preparing text for the page (16:30)
- 2.8. Design tools to use (0:59)
- 2.9. Baseline grid & Vertical rhythm (11:07)
- 2.10. Base font size and line-height (20:28)
- 2.11. Exercise: The first step and explanation of the homework (13:04)
- 2.12. Homework 1: Homepage/Landing page
- 2.13. Homework 2: Mobile app
- 2.14. Homework 3: Menu
- 2.15. Homework 4: Checklist
- 2.16. Homework 5: eBook
- 2.17. Homework 6: Social media post
- 2.18. Homework 7: Presentation
Module 3. Practical typography. Hierarchy
Available in
days
days
after you enroll
- 3.1. Visual Hierarchy in Typography - Part 1 & 2 (80:27)
- 3.2. Typescale. How to choose font sizes. A system for scaling Typography (37:24)
- 3.3. Size and Responsive typography based on the medium type (6:32)
- 3.4. Maximum and minimum font size. Logic and accessibility (4:59)
- 3.5. Italic and bold. What to apply (7:54)
- 3.6. Oblique vs italic. Simple difference (7:37)
- 3.7. Size vs weight. How to select font-weights. What to apply (21:17)
- 3.8. Line-height for headings and paragraphs (25:48)
- 3.9. SEO and Typography. Semantic hierarchy (14:19)
- 3.10. Typography styleguide. What to include (19:59)
- 3.11. Additional sizes and composition in Typography (7:28)
- 3.12. Bonus. Anchors/nails. The importance of eyebrows (30:19)
- 3.13. Bonus. Typography size guide by project type
- 3.14. Create styles in the design tool (8:41)
- 3.15. Exercise: Apply styles to your text (9:28)
- 3.16. Bonus: Typography stylesheet for desktop and mobile
- 3.17. Bonus: Typescale for desktop and mobile with examples
- 3.18. Homework 1: Homepage/Landing page
- 3.19. Homework 2: Mobile app
- 3.20. Homework 3: eMenu
- 3.21. Homework 4: Checklist
- 3.22. Homework 5: eBook
- 3.23. Homework 6: Social media post
- 3.24. Homework 7: Presentation
Module 4. Practical typography. Grids, layouts and formatting
Available in
days
days
after you enroll
- 4.1. What is Grid and why you need it (12:00)
- 4.2. Different grids. Pros and cons (24:04)
- 4.3. How to create a perfect grid for your content (33:18)
- 4.4. Should the grid be 4px? Explanation (12:12)
- 4.5. Horizontal rhythm. What, why and how (27:10)
- 4.6. Vertical rhythm. Why and how (11:37)
- 4.7. Spacing between headings and paragraphs (25:00)
- 4.8. Length. How many columns for headings and paragraphs (24:01)
- 4.9. Alignment. Which one to choose (30:18)
- 4.10. Left vs Center alignment (22:58)
- 4.11. When to use alignment Justified (8:19)
- 4.12. Whitespace and typography (21:43)
- 4.13. Spacing/padding vs Line heights (12:38)
- 4.14. Exercise: Putting text on the grid (8:45)
- 4.15. Bonus: Typography layouts and grids for web
- 4.16. Bonus: Type spacing cheatsheet
- 4.17. Bonus: Vertical and horizontal rhythm helper
- 4.18. Homework 1: Homepage/Landing page
- 4.19. Homework 2: Mobile app
- 4.20. Homework 3: Menu
- 4.21. Homework 4: Checklist
- 4.22. Homework 5: eBook
- 4.23 Homework 6: Social media post
- 4.24. Homework 7: Presentation
Module 5. Practical typography. Psychology
Available in
days
days
after you enroll
- 5.1. What is typeface psychology (38:46)
- 5.2. Why we need to know it (21:23)
- 5.3. Categories of typefaces (10:16)
- 5.4. How our culture and background influence the typography choice (8:06)
- 5.5. The connection between different typefaces & emotions/feelings (29:33)
- 5.6. Why it’s important to know your Target Audience to choose the typeface (15:53)
- 5.7. Serif vs Sans Serif. Where to use and why (+industries) (44:03)
- 5.8. Script & Display typefaces. Where to use, how and why (20:06)
- 5.9. How to choose the right typeface for your project. Step by step guide (62:49)
- 5.10. Exercise: Try a new typeface in your design (8:33)
- 5.11. Bonus: Typefaces by industry
- 5.12. Bonus: Typography psychology guide
- 5.13. Homework 1: Homepage/Landing page
- 5.14. Homework 2: Mobile app
- 5.15. Homework 3: eMenu
- 5.16. Homework 4: Checklist
- 5.17. Homework 5: eBook
- 5.18. Homework 6: Social media post
- 5.19. Homework 7: Presentation
Module 6. Practical typography. Font pairing & Adjustments
Available in
days
days
after you enroll
- 6.1. Why we need to know font pairing (37:07)
- 6.2. Where and how to use different font pairs properly (77:52)
- 6.3. How to choose typefaces for paragraphs and other elements (43:10)
- 6.4. How to choose typefaces for headings (13:17)
- 6.5. The reasons when to use one typeface over another (5:46)
- 6.6. Where to find font pairs (25:01)
- 6.7. How to make new pairs (56:58)
- 6.8. Superfamilies (9:11)
- 6.9. Can we use 3 typefaces (10:01)
- 6.10. How to use letter-spacing properly (12:00)
- 6.11. Type color (12:22)
- 6.12. Line-height adjustments (5:00)
- 6.13. Accessibility of typography (24:11)
- 6.14. Exercise: Adjustments according to new typefaces (16:21)
- 6.15. Bonus: Typography pairs
- 6.16. Bonus: Typography trios
- 6.17. Bonus: The list of supertypefaces and where to get them
- 6.18. Homework 1: Homepage/Landing page
- 6.19. Homework 2: Mobile app
- 6.20. Homework 3: Menu
- 6.21. Homework 4: Checklist
- 6.22. Homework 5: eBook
- 6.23. Homework 6: Social media post
- 6.24. Homework 7: Presentation
Module 7. Practical typography. Tips and Secrets
Available in
days
days
after you enroll
- 7.1. Fonts licensing (11:04)
- 7.2. Paid or free typeface (8:32)
- 7.3. Where to find good fonts and how to understand them (12:28)
- 7.4. Typography anatomy and why you need to know it (9:10)
- 7.5. 3 steps to make your design look professional only with typography (16:54)
- 7.6. How to animate typography (22:01)
- 7.7. How to improve the readability of your design (11:09)
- 7.8. How to explain your typography decisions to a client/manager (4:54)
- 7.9. Colours in typography. What to colourize (12:05)
- 7.10. Accessibility of colours in typography (19:38)
- 7.11. How to breaks rules in typography (9:49)
- 7.12. How to convert typography Px to Rem in Figma (4:36)
- 7.13. How to name text styles in the design system (13:50)
- 7.14. Typography for Cyrillic fonts (8:21)
- 7.15. Responsive typography for a seamless experience across all platforms (12:42)
- 7.16. Typography and SEO. Performance and Page speed secrets (12:27)
- 7.17. Bonus: Advanced typeface features in Figma
- 7.18. Bonus: How to improve performance of the website with typography checklist
Bonuses
Available in
days
days
after you enroll
- 3.13. Bonus. Typography size guide by project type
- 3.16. Bonus: Typography stylesheet for desktop and mobile
- 3.17. Bonus: Typescale for desktop and mobile with examples
- 4.15. Bonus: Typography grids for web
- 4.16. Bonus: Type spacing cheatsheet
- 4.17. Bonus: Vertical and horizontal rhythm helper
- 5.11. Bonus: Typefaces by industry
- 5.12. Bonus: Typography psychology guide
- 6.15. Bonus: Typography pairs
- 6.16. Bonus: Typography trios
- 6.17. Bonus: The list of superfamilies and where to get them
- 7.17. Bonus: Advanced typeface features in Figma
- 7.18. Bonus: How to improve performance of the website with typography checklist
- Live Call link. Sep 16th 2021
- Live Call link. Feb 8h 2022
- Mastermind Live Call. May 7th 2022 (137:36)
- Mastermind Live Call. May 21st 2022 (88:35)