Typography & Vertical Rhythm for UI Designers and Web Developers

Ahsan Idrisi, UI UX Visual Designer

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

      4:35
    • Introduction to Typography

      4:40
    • About Font and Font Families

      5:09
    • Typography Anatomany terms

      6:36
    • Humanist Old and Transitional

      6:45
    • Sans Serif and Script

      5:34
    • About Line Length

      3:14
    • Text Alignements

      4:55
    • Line-Height (Leading)

      6:39
    • Letter Spacing (Kerning)

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

      10:58
    • Hyphen, en & em dash usage

      2:28
    • Using Quotation marks properly

      2:52
    • Roles of Typefaces

      4:37
    • Typographic Scales

      3:00
    • Online Tools for Typographic Scales

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

      3:13
    • Vertical Rhythm

      5:13
    • Vertical Rhythm in Photoshop

      7:02
    • Design Exercise for Vertical Rhythm

      12:04
    • Intro to Modular Grid

      11:07
    • Preparing Grid for Blog Layout Design Exercise

      10:44
    • Design First Blog Layout

      16:21
    • Design Second Layout for Blog

      10:02
    • Refining the 2nd Layout Design

      3:10
    • Last layout for Blog Design

      9:30
    • How many fonts to select?

      5:18
    • Moods/Voices of Typefaces

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

      3:57
    • Introduction to Font Pairing

      3:49
    • x-height matching

      5:28
    • Pairing with contrast

      7:47
    • Pairing typefaces on similar features

      10:04
    • Avoid too much similarity

      4:15
    • Pairing fonts from same designer or family

      5:15
    • Online Tools for Font Pairing

      5:31
    • Dribbble Design Exercise Preperations

      5:00
    • Hero Header Design Part 1

      16:19
    • Hero Header Design Part 2

      15:31
    • Hero Header Design -2nd Theme

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

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

      5:34
    • Social Media Ad Design Exericse → Preperations

      3:59
    • Social Media Ad Design Part 1

      6:38
    • Social Media Ad Design Part 2

      14:26
    • Social Media Ad Design Final Touches

      2:54
    • Juicy Design Exercise - Preperations

      3:26
    • Juicy Typography Design Exercise Part 1

      15:58
    • Juicy Typography Design Exercise Part 2

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

      12:00
    • IOS Typography Specifications

      3:22
    • Designing Multiple resolution IOS Screens with Photoshop

      13:57
    • Student Question about Resolutions

      13:55
    • Mirroring your Photsshop to Iphone

      5:04
    • Android Typography and Scales

      4:16
    • Desinging for Multiple Android Screen Sizes

      8:30
    • For Developers → Using Google Fonts

      3:36
    • For Developers → Using Premium Fonts

      5:38
    • For Developers → CSS Font Sizing

      2:37
    • For Developers → em Font Sizing

      8:11
    • For Developers → rem Font Sizing

      4:34
    • For Developers → % Font Sizing

      4:15
    • For Developers → vw Font Unit

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

      8:28
    • For Developers→ Gridlover Coding Exercise

      8:05
    • For Developers→ Custom Typographic Scale Bootstrap

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

      2:22
    • For Developers → Intro to Responsive Typography

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

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

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

      6:56