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
How students rated this class
Leave Review

Watch more to review

We ask our students to watch a few lessons before reviewing to make sure we get quality feedback!

Best Suited for
 --  Beginner Intermediate Advanced Beginner/Intermediate Intermediate/Advanced All Levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Be the first!

No ratings just yet—watch a few lessons to be the first to share whether this class met your expectations.

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Be the first to leave a review in our updated system!
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update. You are welcome to edit your old review into the new system!

11 of 11 students recommend this class