Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Typography Masters™️️️ Essential
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
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
4.1. What is Grid and why you need it
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock