Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Typography course for UX/UI Designers. Premium (Extension)
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 practical 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 (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
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
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 should 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 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 break 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
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
7.17. Bonus: Advanced typeface features in Figma
7.18. Bonus: How to improve performance of the website with typography checklist
Live Call Recording. Sep 16th 2021
Live Call Recording. Feb 8th 2021
Mastermind Live Call. May 7th 2022 (137:36)
Mastermind Live Call. May 21st 2022 (88:35)
7.4. Typography anatomy and why you should know it
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock