Introduction to Typography
  • Intro to Typography Course?
  • How this course has been laid out → Headshot video
  • What are Fonts, Font Families and Font Styles
  • Typography Terms & Anatomy
  • Resources for Typography Terms & Anatomy
  • Quiz : Typography Anatomy Test
  • Type Classification - Old and Transitional
  • Type Classification - Modern, Sans-serif, Script
  • Resources for Type Classficiation
  • Quiz - Identify Font Classes
  • Optimal Line-Length for Web and Mobile
  • Which text alignment for what purpose ?
  • Line-Height (Leading)
  • Letter Spacing (Kerning)
  • Tracking in Typography
  • Quiz - Basics of Typography
  • EXERCISE: Designing Awesome Article Page in Photoshop
More about Typography
  • Hyphen, en & em dash usage → Student Request Lecture
  • Using Quotation marks properly → Student Request Lecture
Typography Scales and Grids
  • Roles of Typefaces
  • Typographic Scales for hierarchy
  • Online Tools for Typographic Scales
  • Student Question → How to extend Modular Scale to apply in Responsive Design
  • Resources for Type Scale
  • How many Levels of Typographic Hierarchy do I need?
  • Vertical Rhythm and Spacing
  • Vertical Rhythm in Adobe Photoshop
  • DESIGN Exercise: Typographic Scales, Making and Breaking Vertical Rhythm
  • Using Modular Grid for Designing Web, Mobile Layout
EXERCISES: Modular + Baseline Grid Design Ultimate Exericse
  • Preparing Modular and Baseline Grid in Photoshop
  • Blog Design: 1st Design with Modular Grid
  • Blog Design: 2nd Design Iteration with Modular Grid
  • Blog Design: 2nd Design Refinements
  • Blog Design: 3rd Design Layout with Modular Grid
  • Blog Post Design Challenge using Vertical Rhythm and Modular Grid
How to Select Fonts?
  • How many fonts to select?
  • Training your eye for Moods or Voice of Typefaces
  • Effect of Color on Typeface Mood (Voice)
  • How I experiment and select my typefaces?
How to Pair Fonts?
  • Basic Principles of Font Pairing
  • Pairing fonts from Same Designer + Using Mega Font Families
  • Matching Fonts with X-Height
  • Using Contrast to Pair Fonts
  • Look for Similar Features while Font Pairing
  • Avoid too much similarity between Fonts
  • Online Tools for Font Pairing
  • Resources for Font Pairing
  • Download 33 Typeface Combos Kit to start your Designs
How to get Variation in text for Great Designs
  • Using Bold, Italic & Capitalize for Variation in Type
  • Variation using Line-Height and Letter-Spacing
  • Variation using Colors in Type
  • Variation using Reverse Colors in Type
  • Quiz - Variation in Type
EXERCISES: Dribbble LEVEL Designs
  • Tech Company Web Design (Preperations)
  • Tech Company Web Design (Part 1)
  • Tech Company Web Design (Part 2)
  • Userable Web Design Intro (Preperations)
  • Userable Web Design (Part 1) → Chainging Fonts to change theme
  • Userable Web Design (Part 2) → Spacing & White space fine tuning
Exercise: Social Media Ad Design with 3 different fonts
  • Exercise: Social Media Ad → Gathering Resources
  • Exercise fonts and resources links
  • Exercise: Social Media Ad Design → Part 1
  • Exercise: Social Media Ad Design → Part 2
  • Exercise: Social Media Ad Design → Final touches
Nature Health Themed Typography Exercises
  • Fresh & Juicy Design Exercise - Preperations
  • Exercise fonts and resources links
  • Fresh & Juicy Design Exercise - Part 1
  • Fresh & Juicy Design Exercise - Part 2
Typography for Iphone and Android App Designs (Mobile App Typography)
  • IOS Typography (Typefaces, Type Scale and Usage)
  • Resources for IOS App Design (Typography)
  • Google Material Typography (4dp Grid, Type Scale and Usage)
  • Resources for Android App Design (Typography)
  • Responsive Web Typography (Different Type Scales for Different Screens)
Typography for Web Developers
  • Using Google fonts: Pros and Cons
  • Using Premium Fonts: Pros and Cons with guide to purchasing them
  • Introduction to CSS font-size units
  • What is "em" font-size unit?
  • What is "Percentage %" font-size?
  • What is "VW" font-size?
  • What is "rem" font size?
  • How Vertical Rhythm works in CSS?
  • CODE Exercise: Using Vertical Rhythm with Gridlover tool
  • Vertical Rhythm & Typography Scales with Boostrap
  • Dont use TypeScale Online tool (use gridlover instead)
Responsive Typography for Developers
  • Responsive Typograhy Introduction
  • Percentage font-size for Responsive Typography
  • Different Typographic Scales for Responsive Typography