Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Typography course for UX/UI Designers. VIP
Module 0. Welcome
0.1. Welcome to the Typography for UX/UI designers course (6:35)
0.2. How to get maximum out of this course and become a Pro in typography (17:27)
0.3. Typography exercise. Yes, let’s start with a simple but powerful practice lesson (4:04)
Module 0 Quiz
Module 1. Introduction to Typography
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
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
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
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
5.1. What is typeface psychology (38:46)
5.2. Why we need to know it (42:46)
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
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. When to use one typeface over another (5:46)
6.6. Where to find font pairs (25:01)
6.7. Superfamilies (9:11)
6.8. How to make new pairs (56:58)
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
Typography Masters™ Live Calls
VIP Live Call Sep 8th Recording (61:40)
All-hands Live Call Sep 16th Recording (187:12)
VIP Live Call Sep 28th Recording (85:20)
Live Call Feb 8th Recording (from Premium plan)
Module 8 Live Call for VIP only (142:37)
Mastermind Live Call May 7th (137:36)
Mastermind Live Call. May 21st 2022 (88:35)
Module 7. Practical typography. Tips and Secrets
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 the 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
Module 8. Practical typography. Monetization & Efficiency
8.1. How to make money with the knowledge of typography (23:51)
8.2. How to monetize your skills in typography and get motivation to create more (13:15)
8.3. What you can create and sell with typography (14:46)
8.4. How to sell your works (11:38)
8.5. How to design a profitable website/app (21:56)
8.6. Where to find clients (13:57)
8.7. How much your work should cost (10:45)
8.8. When to increase your prices (14:36)
8.9. How to explain the value of paid typefaces to your clients
8.10. Typography for infotainment systems (17:36)
8.11. Typography for TV apps (31:20)
Bonuses
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
8.9. How to explain the value of paid typefaces to your clients
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock