Typography for Designers & Developers - Don't suck at design
4.6 (85 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,237 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Typography for Designers & Developers - Don't suck at design to your Wishlist.

Add to Wishlist

Typography for Designers & Developers - Don't suck at design

Shift your boring designs to Dribbble level by learning Font Pairing, Web Typography, App Typography & Vertical Rhythm
Bestselling
4.6 (85 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,237 students enrolled
Last updated 5/2017
English
Current price: $35 Original price: $70 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 13 Articles
  • 13 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create elegant web & Mobile app design by selecting and pairing meaningful fonts
  • How to use white space effectively by using Vertical Rhythm and Modular Grid
  • Dramatically improve your boring designs with Modular Grid & Baseline Grid
  • Learn about Typography Classes and Anatomy
  • Learn about how to use line-height and letter spacing effectively
  • Learn about IOS App Typography and understand different IPhone Screen siz
  • Learn Google Android Typography, its scale and its SP unit of type
  • How to connect your Photoshop Screen to IPhone or Android Device
  • How to balance your design using LEGO Blocks method
  • 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 for Developers
  • How to use padding, margins and other elements to create Vertical Rhythm in CSS for Developers
  • How to use Vertical Rhythm in Bootstrap for Developers
  • Learn when to use em, rem, vm or % font-size units for Developers
  • How to set up Typography Scale using online tools easily for Developers
View Curriculum
Requirements
  • Must have good knowledge of Adobe Photoshop (For Designers)
  • Must know HTML and CSS (For Developers)
  • Download and Install Adobe Photoshop Latest version
Description

Last UPDATED on → 13th Dec 2016

3 New Lectures Added: Userable Dribbble styled Website Design

--------------------------------------------------------------------------------------------------------------------------------

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 sizes
  • 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. 

Requirements to take this Course :-

  • Must have good knowledge of Adobe Photoshop (For Designers)
  • Must know HTML and CSS (For Developers)
  • Download and Install Adobe Photoshop CC2015 or latest version

Take this course now and I will see you inside the course

Who is the target audience?
  • NOT for Novices (Must have some Photoshop Experience)
  • Web Designers
  • Mobile App Designers
  • All Designers who think their design have something missing
  • Web Developers
  • Graphic Designer
Curriculum For This Course
87 Lectures
08:31:32
+
Introduction to Typography
13 Lectures 01:05:28

Just a good introduction on how to use Udemy video controls and course content so you get full benefit of this course

Preview 05:40

In this lesson, we will see why Typography is important for Web Design and Mobile App Design. Also what answers this course is going to provide to designers and developers about Typography

Preview 04:40

In this lesson, we will learn about fonts, font families and about Font styles. Every designer should know these basics so don't skip them

What are Fonts, Font Families and Font Styles
05:09

In this lesson, we will learn about Anatomy of Type, few terms that every designer should know about Typography

Typography Terms & Anatomy
06:36

I have shared few online resources to learn more in depth about Typography Terms and Antomay

Resources for Typography Terms & Anatomy
00:18

I will show you few parts (in BLUE COLOR) of fonts and you need to tell the name of that Typography Term

Quiz : Typography Anatomy Test
10 questions

In this lesson, we will learn 3 basic classes of Type: Humanist, Old and Transitional Type and examples of those Type classes. The main problem solved here is how to differentiate between different Classes of Type

Preview 06:45

In this lesson, we will learn Modern classes of Type: Bodoni, Slab Serif, Sans-Serif, Script and few more extras like Humanist Sans serif and Geometric Sans Serif with Examples


Type Classification - Modern, Sans-serif, Script
05:34

Few more in depth resources to learn more about Type Classficiation

Resources for Type Classficiation
00:13

I will give you hints with an image of font and you will guess what class of font i have used

Quiz - Identify Font Classes
10 questions

Line length is important in readability so we will learn what is the Optimal line length for Web and Mobile and how we should handle it

Preview 03:14

A lot of designers don't know how to properly use left, right , center and justified alignment of text so in this lesson we will learn how and when to use Text Alignment properly for Web Design or App Design

Which text alignment for what purpose ?
04:55

Line-spacing (Line height or Leading) is one of the major factors when it comes to readable text so in this lesson we will cover how to use and set the optimal Leading for headings or paragraphs using Photoshop

Line-Height (Leading)
06:39

When to use tight Kerning and when to use loose Kerning? This lecture answers both question and how to do it using Photoshop.

Preview 04:47

Lets see how much do you know about what i taught you in this section about the basics of Typography

Quiz - Basics of Typography
5 questions

In this lesson, we will use line-height, line length and all the things we have learned to create an awesome Dribbble quality blog article page using Photoshop. So lets get started!

Preview 10:58
+
More about Typography
2 Lectures 05:20

In this lesson, you will learn how to properly use hyphen, en and em dash in your web design or development projects. I will show you the shortcut keys in Photoshop for en and em dashes too

Preview 02:28

In this lesson, you will know how to use proper curly quotes while designing and also what does straight quotes actually mean in good Typography

Using Quotation marks properly → Student Request Lecture
02:52
+
Typography Scales and Grids
9 Lectures 51:56

In this lesson, we will learn why some Fonts are meant for just Headings and some should only be used for paragraphs or body text

Preview 04:37

In this lesson, we will learn how Typographic Scales work, and how we calculate the size of Headings and Paragraph text for Web Design

Preview 03:00

You will learn 3 great tools i use online to create Typography Scales and calculate the px, rem or em value of type scale. Or even grab the code automatically to get started

Online Tools for Typographic Scales
05:28

Online tools i use throughout this site to generate Type Scales, line-height and baseline calculations

Resources for Type Scale
00:12

In this lesson, you will learn how many levels of Typographic Hierarchy do you really need. If you just need four headings levels then why create six instead

How many Levels of Typographic Hierarchy do I need?
03:13

In this lesson, you will learn about Vertical Rhythm and vertical spacing and how to enhance your web design or mobile app design to next level using these techniques

Vertical Rhythm and Spacing
05:13

You will learn how to apply vertical rhythm to a web or mobile app design using Photoshop

Vertical Rhythm in Adobe Photoshop
07:02

This exercise is really going to change the way you design Websites or Mobile Apps. We will apply Typographic scale and Vertical Rhythm along with Optimal line-length to upgrade our designs

DESIGN Exercise: Typographic Scales, Making and Breaking Vertical Rhythm
12:04

In this lesson, we will learn how to use Modular Grid modules to design and layout Typography. This Grid practice can make your Web Design or Mobile App Design look awesome in no time.

Using Modular Grid for Designing Web, Mobile Layout
11:07
+
EXERCISES: Modular + Baseline Grid Design Ultimate Exericse
5 Lectures 49:47

In this lesson, we will prepare our Photoshop Canvas for Blog Design. You will learn how to size the canvas, how to use Baseline grid and Modular Grid... Also you will learn simple technique to balance your design

Preparing Modular and Baseline Grid in Photoshop
10:44

This is the first Design Iteration using Modular Grid for Blog Design and Layout. Just watch it patiently to upgrade your web design skills

Blog Design: 1st Design with Modular Grid
16:21

This is the 2nd Design Iteration using Modular Grid for Blog Design and Layout. Just watch it patiently to upgrade your web design skills

Blog Design: 2nd Design Iteration with Modular Grid
10:02

Just a few more refined touches to the Blog Design in 2nd Iteration

Blog Design: 2nd Design Refinements
03:10

This is the 3rd Design Iteration using Modular Grid for Blog Design and Layout. Just watch it patiently to upgrade your web design skills

Blog Design: 3rd Design Layout with Modular Grid
09:30
+
How to Select Fonts?
3 Lectures 21:57

First questions is that how many fonts do i need for my web design or my mobile app. Will it effect the loading speed of my web page? This lesson answer these questions

Preview 05:18

To be a great designer, you really need to train your gut or inner feeling for the Mood or voice of a Typeface (font). We will discuss various typography themes like Business, Fun, Fashion and Sports etc... to train our eyes for moods of various typefaces

Training your eye for Moods or Voice of Typefaces
12:42

How can we use colors to change the effect and mood of our Typeface? In this lesson, we are going to learn about it

Effect of Color on Typeface Mood (Voice)
03:57
+
How to Pair Fonts?
8 Lectures 42:30

We will learn all the basic principles of font pairing and what is the biggest rule of Font pairing

Preview 03:49

We will look at two most easiest methods of combining fonts with each other which even beginners and novices can master in no time

Pairing fonts from Same Designer + Using Mega Font Families
05:15

Matching fonts with similar features and one of them is x-height. We will learn how to match and pair fonts on the basis of their x-heights

Matching Fonts with X-Height
05:28

How to use contrast in font pairing is not easy to learn? I will share one secret technique i found among 90% of fonts paired

Using Contrast to Pair Fonts
07:47

We will workout how to look for similar features and similarities among fonts while pairing them. So don't miss it

Look for Similar Features while Font Pairing
10:04

If you try to combine too similar fonts, you will end up ruining your design so we will look at various examples and figure out how to avoid too much similarity among typefaces (fonts)

Preview 04:15

What are the online tools to master Font pairing and how to train your eyes, brain and gut for better font pairing

Online Tools for Font Pairing
05:31

A list of online tools and websites to sharpen your font pairing skills. Few online games to match and pair fonts

Resources for Font Pairing
00:21
+
How to get Variation in text for Great Designs
4 Lectures 13:07

We will see how to properly use Bold, italic or Capitalize to emphasize some portion of text. A lot of people use it in wrong manner. This can really improve your web design or mobile app design

Using Bold, Italic & Capitalize for Variation in Type
03:30

These two techniques can make your boring text look great. We will also see some examples on how to combine and use them

Variation using Line-Height and Letter-Spacing
03:38

Color is very powerful when combined with Typography so here we will see how to effectively use it and how many colors should we choose for highlighting text.

Variation using Colors in Type
02:57

In a lot of Modern Web Design and even in Magazine design, you see Reverse colors Type a lot. Here we will cover how to use it with few examples

Preview 03:02

I will show you few situations and you are going to tell me the answers

Quiz - Variation in Type
4 questions
+
EXERCISES: Dribbble LEVEL Designs
6 Lectures 53:58

First we will prepare our canvas for design, select our typographic scale, build modular grid and baseline grid. So this is how we start awesome design process

Preview 05:00

We will add few UI Design elements in this lesson, also you will learn few tips and steps for a great Web design

Tech Company Web Design (Part 1)
16:19

Here we will give finishing touches to our Tech company web design hero area, keep watching don't skip. You might miss a great tip in this exercise

Tech Company Web Design (Part 2)
15:31

In this lesson, i will show you what we need to create an awesome website Dribbble styled design with some business tech elegant theme

Preview 03:52

In this lesson, you will learn my technique on using straight and technology styled fonts effectively and how to use Font Match feature of Photoshop CC2017

Userable Web Design (Part 1) → Chainging Fonts to change theme
07:42

In this lesson, you will learn how i used modules and spacial areas to adjust white space in between design elements.

You will also learn what effect does a good margin have on our final web design


Userable Web Design (Part 2) → Spacing & White space fine tuning
05:34
+
Exercise: Social Media Ad Design with 3 different fonts
5 Lectures 28:07

In this lecture, we will look at the fonts and patterns used in this social media ad design exercise. Please Download the resources and fonts before starting this exercise

Preview 03:59

Download links to all the fonts and patterns used in this exercise

Exercise fonts and resources links
00:10

In this lecture, we will first prepare the base of the design or you can say the background elements of this social media design

Exercise: Social Media Ad Design → Part 1
06:38

In this lecture, we will add the styles and more details to our social media ad design.

Exercise: Social Media Ad Design → Part 2
14:26

I will show you in this lecture the final and fine tune adjustments to this Social Media ad design

Exercise: Social Media Ad Design → Final touches
02:54
+
Nature Health Themed Typography Exercises
4 Lectures 31:39

In this lecture, we will create an orange based themed cut out typography effect in Photoshop. The end result will be a header for modern Health Blog or website. Also i will tell you why i selected those fonts for this exercise

Preview 03:26

Exercise fonts and resources links
00:12

In this part, we will choose type scale and also will create most of our Typography mix. Also learn few advanced Drop Shadow techniques that can be applied to text in Photoshop

Fresh & Juicy Design Exercise - Part 1
15:58

This lesson is the final retouching and fine adjustments of your Fresh and Juicy Typography Design. Here we will adjust spaces, text sizes, few colors and alignments to get the best results

Fresh & Juicy Design Exercise - Part 2
12:03
4 More Sections
About the Instructor
Muhammad Ahsan Pervaiz
4.6 Average rating
933 Reviews
18,541 Students
5 Courses
UI/UX Interaction Design Expert + Freelancer

I started my Freelancing Career just 8 years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca Cola.

In just 1 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca Cola and Project Managers from UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wire-frames, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects
I am multi-talented person who have won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing Page design contests.

Worked with Clients all over the world mostly from USA, Australia, UK, and United Arab Emirates while learning a lot on how to deal with clients while freelancing and how to present your work to them

Although I started as a UI Designer 6 years ago but I am playing with Photoshop since year 2002

My ultimate aim is to make more Awesome UI Designers and ease the pain of learning from new comers in this field of UI Design