Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: Typography for Designers & Developers - Don't suck at design
Rating: 4.4 (721 reviews)

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

Created byMuhammad Ahsan Pervaiz

Last updated 12/2022

English

What you'll 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

Course content

14 sections • 89 lectures • 8h 51m total length

Intro to Typography Course?4: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
How this course has been laid out → Headshot video2:02
A little about how this Typography course has been laid out
What are Fonts, Font Families and Font Styles5:09
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
Typography Terms & Anatomy6:36
In this lesson, we will learn about Anatomy of Type, few terms that every designer should know about Typography
Resources for Typography Terms & Anatomy0:13
I have shared few online resources to learn more in depth about Typography Terms and Antomay
Quiz : Typography Anatomy Test
Type Classification - Old and Transitional6:45
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
Type Classification - Modern, Sans-serif, Script5:34
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
Resources for Type Classficiation0:12
Few more in depth resources to learn more about Type Classficiation
Quiz - Identify Font Classes
Optimal Line-Length for Web and Mobile3:14
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
Which text alignment for what purpose ?4:55
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
Line-Height (Leading)6:39
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
Letter Spacing (Kerning)4:47
When to use tight Kerning and when to use loose Kerning? This lecture answers both question and how to do it using Photoshop.
Tracking in Typography8:56
What is Tracking in Typography and how to use it in Design and Development
Quiz - Basics of Typography
EXERCISE: Designing Awesome Article Page in Photoshop10:58
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!
Download Source Files and PDF Notes0:04
Download PSD Design Source files along with PDF notes for Typography class

Hyphen, en & em dash usage → Student Request Lecture2:28
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
Using Quotation marks properly → Student Request Lecture2:52
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

Roles of Typefaces4:37
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
Typographic Scales for hierarchy3:00
In this lesson, we will learn how Typographic Scales work, and how we calculate the size of Headings and Paragraph text for Web Design
Online Tools for Typographic Scales5:28
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
Student Question → How to extend Modular Scale to apply in Responsive Design6:56
Answer to the question asked by a student. This is how we can expand our Typographic Scale to be used in all different device sizes.
Resources for Type Scale0:09
Online tools i use throughout this site to generate Type Scales, line-height and baseline calculations
How many Levels of Typographic Hierarchy do I need?3:13
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
Vertical Rhythm and Spacing5: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 in Adobe Photoshop7:02
You will learn how to apply vertical rhythm to a web or mobile app design using Photoshop
DESIGN Exercise: Typographic Scales, Making and Breaking Vertical Rhythm12:04
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
Using Modular Grid for Designing Web, Mobile Layout11:07
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.

Preparing Modular and Baseline Grid in Photoshop10:44
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
Blog Design: 1st Design with Modular Grid16:21
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: 2nd Design Iteration with Modular Grid10:02
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 Refinements3:10
Just a few more refined touches to the Blog Design in 2nd Iteration
Blog Design: 3rd Design Layout with Modular Grid9:30
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 Post Design Challenge using Vertical Rhythm and Modular Grid

How many fonts to select?5:18
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
Training your eye for Moods or Voice of Typefaces12:42
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
Effect of Color on Typeface Mood (Voice)3:57
How can we use colors to change the effect and mood of our Typeface? In this lesson, we are going to learn about it
How I experiment and select my typefaces?0:05
Learn how I experiment, mix and match typefaces based on a Design direction of a Web Design project

Basic Principles of Font Pairing3:49
We will learn all the basic principles of font pairing and what is the biggest rule of Font pairing
Pairing fonts from Same Designer + Using Mega Font Families5:15
We will look at two most easiest methods of combining fonts with each other which even beginners and novices can master in no time
Matching Fonts with X-Height5:28
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
Using Contrast to Pair Fonts7:47
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
Look for Similar Features while Font Pairing10:04
We will workout how to look for similar features and similarities among fonts while pairing them. So don't miss it
Avoid too much similarity between Fonts4:15
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)
Online Tools for Font Pairing5:31
What are the online tools to master Font pairing and how to train your eyes, brain and gut for better font pairing
Resources for Font Pairing0:13
A list of online tools and websites to sharpen your font pairing skills. Few online games to match and pair fonts
Download 33 Typeface Combos Kit to start your Designs0:03
Download and start using these 32 font combos I have created. All these are Free fonts

Using Bold, Italic & Capitalize for Variation in Type3:30
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
Variation using Line-Height and Letter-Spacing3:38
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 Colors in Type2:58
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 Reverse Colors in Type3:02
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
Quiz - Variation in Type

Tech Company Web Design (Preperations)5:00
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
Tech Company Web Design (Part 1)16:19
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 2)15:31
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
Userable Web Design Intro (Preperations)3:52
In this lesson, i will show you what we need to create an awesome website Dribbble styled design with some business tech elegant theme
Userable Web Design (Part 1) → Chainging Fonts to change theme7:42
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 2) → Spacing & White space fine tuning5:34
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

Exercise: Social Media Ad → Gathering Resources3:59
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
Exercise fonts and resources links0:06
Download links to all the fonts and patterns used in this exercise
Exercise: Social Media Ad Design → Part 16:38
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 214:26
In this lecture, we will add the styles and more details to our social media ad design.
Exercise: Social Media Ad Design → Final touches2:54
I will show you in this lecture the final and fine tune adjustments to this Social Media ad design

Fresh & Juicy Design Exercise - Preperations3:26
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
Exercise fonts and resources links0:06
Fresh & Juicy Design Exercise - Part 115:58
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 212:03
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

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 → 25th September 2020

Added New Resources → 3 New Lectures about Mobile Typography

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

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

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

This course's 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 the 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 CC latest version

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

Who this course is for:

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

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

What you'll learn

Explore related topics

Course content

Introduction to Typography15 lectures • 1hr 11min

More about Typography2 lectures • 5min

Typography Scales and Grids10 lectures • 59min

EXERCISES: Modular + Baseline Grid Design Ultimate Exericse5 lectures • 50min

How to Select Fonts?4 lectures • 22min

How to Pair Fonts?9 lectures • 42min

How to get Variation in text for Great Designs4 lectures • 13min

EXERCISES: Dribbble LEVEL Designs6 lectures • 54min

Exercise: Social Media Ad Design with 3 different fonts5 lectures • 28min

Nature Health Themed Typography Exercises4 lectures • 32min

Requirements

Description

Who this course is for: