This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
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
Variable Fonts 101
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
