Typography & Vertical Rhythm for UI Designers and Web Developers | Muhammad Ahsan | Skillshare

Typography & Vertical Rhythm for UI Designers and Web Developers

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
71 Lessons (8h 29m)
    • 1. What we will cover in this course

      4:35
    • 2. Introduction to Typography

      4:40
    • 3. About Font and Font Families

      5:09
    • 4. Typography Anatomany terms

      6:36
    • 5. Humanist Old and Transitional

      6:45
    • 6. Sans Serif and Script

      5:34
    • 7. About Line Length

      3:14
    • 8. Text Alignements

      4:55
    • 9. Line-Height (Leading)

      6:39
    • 10. Letter Spacing (Kerning)

      4:47
    • 11. Design Exercise to apply what we have learned so far

      10:58
    • 12. Hyphen, en & em dash usage

      2:28
    • 13. Using Quotation marks properly

      2:52
    • 14. Roles of Typefaces

      4:37
    • 15. Typographic Scales

      3:00
    • 16. Online Tools for Typographic Scales

      5:28
    • 17. How many Levels of Typographic Hierarchy do i need?

      3:13
    • 18. Vertical Rhythm

      5:13
    • 19. Vertical Rhythm in Photoshop

      7:02
    • 20. Design Exercise for Vertical Rhythm

      12:04
    • 21. Intro to Modular Grid

      11:07
    • 22. Preparing Grid for Blog Layout Design Exercise

      10:44
    • 23. Design First Blog Layout

      16:21
    • 24. Design Second Layout for Blog

      10:02
    • 25. Refining the 2nd Layout Design

      3:10
    • 26. Last layout for Blog Design

      9:30
    • 27. How many fonts to select?

      5:18
    • 28. Moods/Voices of Typefaces

      12:42
    • 29. Effect of Color on Typeface Mood (Voice)

      3:57
    • 30. Introduction to Font Pairing

      3:49
    • 31. x-height matching

      5:28
    • 32. Pairing with contrast

      7:47
    • 33. Pairing typefaces on similar features

      10:04
    • 34. Avoid too much similarity

      4:15
    • 35. Pairing fonts from same designer or family

      5:15
    • 36. Online Tools for Font Pairing

      5:31
    • 37. Dribbble Design Exercise Preperations

      5:00
    • 38. Hero Header Design Part 1

      16:19
    • 39. Hero Header Design Part 2

      15:31
    • 40. Hero Header Design -2nd Theme

      3:52
    • 41. Hero Header Design - 2nd Theme Part 1

      7:42
    • 42. Hero Header Design - 2nd Theme Part 2

      5:34
    • 43. Social Media Ad Design Exericse → Preperations

      3:59
    • 44. Social Media Ad Design Part 1

      6:38
    • 45. Social Media Ad Design Part 2

      14:26
    • 46. Social Media Ad Design Final Touches

      2:54
    • 47. Juicy Design Exercise - Preperations

      3:26
    • 48. Juicy Typography Design Exercise Part 1

      15:58
    • 49. Juicy Typography Design Exercise Part 2

      12:03
    • 50. Intro to Point (PT) sizing in IOS Devices

      12:00
    • 51. IOS Typography Specifications

      3:22
    • 52. Designing Multiple resolution IOS Screens with Photoshop

      13:57
    • 53. Student Question about Resolutions

      13:55
    • 54. Mirroring your Photsshop to Iphone

      5:04
    • 55. Android Typography and Scales

      4:16
    • 56. Desinging for Multiple Android Screen Sizes

      8:30
    • 57. For Developers → Using Google Fonts

      3:36
    • 58. For Developers → Using Premium Fonts

      5:38
    • 59. For Developers → CSS Font Sizing

      2:37
    • 60. For Developers → em Font Sizing

      8:11
    • 61. For Developers → rem Font Sizing

      4:34
    • 62. For Developers → % Font Sizing

      4:15
    • 63. For Developers → vw Font Unit

      4:09
    • 64. For Developers → How Vertical Rhythm works in CSS

      8:28
    • 65. For Developers→ Gridlover Coding Exercise

      8:05
    • 66. For Developers→ Custom Typographic Scale Bootstrap

      12:33
    • 67. For Developers → Dont use code from Typescale

      2:22
    • 68. For Developers → Intro to Responsive Typography

      6:55
    • 69. For Developers→ Different Scales for Multiple Screen Sizes

      9:44
    • 70. For Developers → Percentage CSS unit for Responsive Typography

      11:39
    • 71. Student QA → How to Expand Typographic scale for Responsive Web Design usage

      6:56
11 students are watching this class

Project Description

There are many projects and exercises you are going to complete during this course. Please download all the resources from this Google Drive folder. Please complete these design challenges and upload in course projects. Thanks

Download all PSD exercise files + Coded example files

Few images of what you will be designing during this course

ab543afe

7f78cdbb

897dbaa7

Student Projects

Mohit Verma
1 comment
Mel Santonil
3 comments
Dhivakar B
2 comments