Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Typography, Colors and Layout Master Class for Designers and Developers (Bundle of 3 Courses)
Introduction to Typography Basics
Intro to Typography Course (4:40)
How this course is laid out (2:02)
What are font families (5:09)
Typography Anatomy and Terms (6:36)
Humanist (Old) and Transitional Typefaces (6:45)
Sans Serif and Script Typefaces (5:34)
Line Length in Typography (3:14)
Alignments of your text (4:55)
Line-height Matters (6:39)
Kerning/ Letter Spacing (4:47)
Tracking in Typography (8:56)
Exercise All we have learned so far (10:58)
Download Typography Resources and Design Files
A bit more about Typography
Quotation Marks in Typography (2:52)
Types of Hyphens and Dashes (2:28)
Typography Scales and Vertical Rhythm
Roles of Typefaces (4:37)
Typography Scales (3:00)
Type Hierarchy Online Tools (5:28)
Expanding Type Scales (6:56)
How many levels of Type Hierarchy (3:13)
Vertical Rhythm (5:13)
Vertical Rhythm in Photoshop (7:02)
Exercise Vertical Rhythm (12:04)
Creating Modular Grid (11:07)
Modular Baseline Grid with Exercise
Prepare Modular Grid (10:44)
Modular Design Part 1 (16:21)
Modular Design Part 2 (10:02)
Refining your Modular Design (3:10)
Modular Design Grid Layout (9:30)
How many fonts + Typography Voice or Moods
How many fonts do we need? (5:18)
Moods or Voices of Typefaes (12:42)
Effect of Colors on Typefaces (3:57)
Pairing Typefaces - 5 Techniques
Intro to Type Pairing (3:49)
Matching X-Height (5:28)
Matching with Contrast (7:47)
Looking for Similarities (10:04)
Avoid too much similarities in Typefaces (4:15)
Pairing typefaces from the same Designer (5:14)
Online tools for type pairing (5:31)
Contrast and Variation with Type
Variation using Bold and Italic (3:30)
Color Variations with Typography (2:57)
Variation with Line-height (3:38)
Variation with Reverse Colors (3:02)
Dribbble level Hero/Header Design Exercise
Hero Header Design Preperations (5:00)
Design Dribbble like Header Part 1 (16:19)
Design Dribbble like Header Part 2 (15:31)
Design Dribbble like Header Part 3 - Variations (3:52)
Design Dribbble like Header Part 4- Variations (7:41)
Design Dribbble like Header Part 5- Variations (5:34)
Social Media Ad Design Exercise
Summer Discount Advertisement Preperation (3:59)
Prepare base of Ad Design (6:38)
Adding Text and Styles (14:26)
Final Refinements (2:54)
Juicy Food header Design Exercise
Juicy Design Preperations (3:26)
Making of Juicy Design (15:58)
Finalizing Juicy Header Design (12:03)
Typography for Web Developers
Using Google Fonts (3:36)
Why use Premium Typefaces? (5:37)
Intro to Font Sizing in CSS (2:37)
What is em font size (8:11)
What is rem (4:34)
How vw units work? (4:09)
Precentage Font sizes in CSS (4:15)
Vertical Rhythm for Web Developers
How Vertical Rhythm works in CSS (8:28)
Gridlover Exercise (8:05)
Custom Typographic Scales Bootstrap (12:33)
Dont use Typescale Code (2:22)
Responsive Typography for Developers
Intro to Responsive Typography (6:55)
Ratios and Scales in Web Typography (9:44)
Percentage value technique in Web Typography (11:38)
What's new in Typography
Variable Fonts 101 (7:52)
What are Color Fonts? (5:13)
Mobile Typography - Using Fonts for IOS, Google Material and Responsive Web Design
IOS Apple iPhone Typography (14:47)
Google Material Design Typography (10:02)
Responsive Web Design Typography (7:08)
IOS Typography Resources
Google Material Typography Resources
Teach online with
What are Color Fonts?
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock