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
14 students are watching this class