Typography for Designers & Developers – Don’t suck at design

Typography for Designers & Developers – Don’t suck at design
Typography for Designers & Developers – Don’t suck at design

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 9 Hours | 1.46 GB
eLearning | Skill level: All Levels

Shift your boring designs to Dribbble level by learning Font Pairing, Web Typography, App Typography & Vertical Rhythm

Have you ever wondered that Why the designs of Dribbble and Behance looks so elegant. One of the secrets behind those great Web and Mobile App Designs is perfect use of Font Combinations, powerful usage of white space and grids.

To learn this Super Power of Typography and use of Time and Space, Take this course

This course main focus is on Typography for Designers and Developers. All great designers possess the skill of Typography and their usage of white space is always out class.

Take Away For Designers :-

  • In this course we will convert your boring designs to Dribbble level designs by learning
  • Basics of Typography Classes and Anatomy
  • Learn how to make your text look interesting by using variation techniques
  • Create elegant web & Mobile app design by selecting and pairing meaningful fonts
  • How different Moods or Voices of Fonts works
  • Master Font pairing and learn tons of online resources to automatically pair fonts
  • How to use white space effectively by using Vertical Rhythm and Modular Grid
  • Learn about IOS App Typography and understand different IPhone Screen sizs
  • Learn Google Android Typography, its scale and its SP unit of type
  • Use Free Apps to connect your Photoshop Screen to IPhone or Android Device
  • How to balance your design using LEGO Blocks method
  • Dribbble Styled Design Exercises to improve your designs

Take Away For Developers :-

  • How to use padding, margins and other elements to create Vertical Rhythm in CSS
  • How to use Vertical Rhythm in Bootstrap
  • What are absolute & relative font-size units e.g em, rem, vm, % and when to use them?
  • Step by Step coding exercises to apply Baseline Grid for Developers
  • How to show baseline grid in HTML page with just one line of code
  • What font sizes are best standards as Base font Size
  • How to set up Typography Scale using online tools easily
  • A lot of quizzes to test your knowledge

So if you really want to step ahead of your fellow Designers & want to get out of the crowd.

+ Table of Contents

Introduction to Typography
1 Intro to Typography Course
2 Optimal Line-Length for Web and Mobile
3 Which text alignment for what purpose
4 Line-Height (Leading)
5 Letter Spacing (Kerning)
6 EXERCISE Designing Awesome Article Page in Photoshop
7 How this course has been laid out в†’ Headshot video
8 What are Fonts, Font Families and Font Styles
9 Typography Terms & Anatomy
10 Resources for Typography Terms & Anatomy
11 Type Classification – Old and Transitional
12 Type Classification – Modern, Sans-serif, Script
13 Resources for Type Classficiation

More about Typography
14 Hyphen, en & em dash usage в†’ Student Request Lecture
15 Using Quotation marks properly в†’ Student Request Lecture

Typography Scales and Grids
16 Roles of Typefaces
17 Using Modular Grid for Designing Web, Mobile Layout
18 Typographic Scales for hierarchy
19 Online Tools for Typographic Scales
20 Student Question в†’ How to extend Modular Scale to apply in Responsive Design
21 Resources for Type Scale
22 How many Levels of Typographic Hierarchy do I need
23 Vertical Rhythm and Spacing
24 Vertical Rhythm in Adobe Photoshop
25 DESIGN Exercise Typographic Scales, Making and Breaking Vertical Rhythm

EXERCISES Modular + Baseline Grid Design Ultimate Exericse
26 Preparing Modular and Baseline Grid in Photoshop
27 Blog Design 1st Design with Modular Grid
28 Blog Design 2nd Design Iteration with Modular Grid
29 Blog Design 2nd Design Refinements
30 Blog Design 3rd Design Layout with Modular Grid

How to Select Fonts
31 How many fonts to select
32 Training your eye for Moods or Voice of Typefaces
33 Effect of Color on Typeface Mood (Voice)

How to Pair Fonts
34 Basic Principles of Font Pairing
35 Pairing fonts from Same Designer + Using Mega Font Families
36 Matching Fonts with X-Height
37 Using Contrast to Pair Fonts
38 Look for Similar Features while Font Pairing
39 Avoid too much similarity between Fonts
40 Online Tools for Font Pairing
41 Resources for Font Pairing
42 Ready made Font Combination to start your Designs

How to get Variation in text for Great Designs
43 Using Bold, Italic & Capitalize for Variation in Type
44 Variation using Line-Height and Letter-Spacing
45 Variation using Colors in Type
46 Variation using Reverse Colors in Type

EXERCISES Dribbble LEVEL Designs
47 Tech Company Web Design (Preperations)
48 Tech Company Web Design (Part 1)
49 Tech Company Web Design (Part 2)
50 Userable Web Design Intro (Preperations)
51 Userable Web Design (Part 1) в†’ Chainging Fonts to change theme
52 Userable Web Design (Part 2) в†’ Spacing & White space fine tuning

Exercise Social Media Ad Design with 3 different fonts
53 Exercise Social Media Ad в†’ Gathering Resources
54 Exercise fonts and resources links
55 Exercise Social Media Ad Design в†’ Part 1
56 Exercise Social Media Ad Design в†’ Part 2
57 Exercise Social Media Ad Design в†’ Final touches

Nature Health Themed Typography Exercises
58 Fresh & Juicy Design Exercise – Preperations
59 Exercise fonts and resources links
60 Fresh & Juicy Design Exercise – Part 1
61 Fresh & Juicy Design Exercise – Part 2

Typography for Iphone and Android App Designs (Mobile App Typography)
62 Understanding IOS Screen Sizes and Point sizes for Typography
63 Exercise Design Simple Blog Post for Multiple Android Screen Sizes
64 IOS Font Sizes and Specifications
65 Resources for IOS App Design (Typography)
66 Resources for Connecting Photoshop to Smart Phone Screen
67 Exercise Design Blog Post for Iphone 1x, 2x and 3x screens in Photoshop
68 Student Question 1X and 2X Resolution IOS Font Sizing Problems
69 Connecting (Mirroring) Photoshop to Iphone Screen while designing
70 Android Typography Specifications – What are SP font Sizes and DPI
71 Resources for Android App Design (Typography)

Typography for Web Developers
72 Using Google fonts Pros and Cons
73 Vertical Rhythm & Typography Scales with Boostrap
74 Dont use TypeScale Online tool (use gridlover instead)
75 Using Premium Fonts Pros and Cons with guide to purchasing them
76 Introduction to CSS font-size units
77 What is em font-size unit
78 What is Percentage % font-size
79 What is VW font-size
80 What is rem font size
81 How Vertical Rhythm works in CSS
82 CODE Exercise Using Vertical Rhythm with Gridlover tool

Responsive Typography for Developers
83 Responsive Typograhy Introduction
84 Percentage font-size for Responsive Typography
85 Different Typographic Scales for Responsive Typography
86 % Responsive Typographic Scale by Richardo Zea

New and Latest in Typography
87 What are Color Fonts
88 What are Variable Fonts
89 What to do NEXT