Skip to content
#4 in TypographyUdemyTypographyPaid courseIntermediate levelCertificate

Typography for Designers & Developers - Don't suck at design (Udemy.com)

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

Created by: Muhammad Ahsan Pervaiz

Last updated December 2022

Our take

Based on the ratings of 721 students, a sample of their written reviews and the syllabus, as the course stood in December 2022. No course pays to be reviewed.

A typography course with two audiences: most of its 8.8 hours go to designers working in Photoshop, then two sections, about an hour and a half, for developers who need vertical rhythm, baseline grids and font-size units in CSS. The syllabus covers type anatomy, font pairing, modular grids, iOS and Android type scales, and a handful of Dribbble-style exercises across 89 lectures. Muhammad Ahsan Pervaiz teaches from his own freelance UI work, and he is upfront that this is not for novices. It expects working Photoshop skills for the design half and HTML and CSS for the developer half.

Reviewers say the modular and baseline grid lessons were the moment things clicked. One self-taught designer credits the course with improving his work tremendously, and another says he finally understands why his text never looked balanced. The complaints are consistent, though. Some students found the narration hard to follow and had to rewind often, and the auto-captions have spelling errors. Others say he rushes through examples, and one three-star review calls out his habit of saying Google it instead of explaining. The design exercises are also criticised for feeling too similar to one another.

The course was last updated in December 2022 and the exercises still run in Photoshop, so anyone working in Figma will need to translate. Unlike the After Effects and graphic design theory courses it sits beside, it has a track for people who write CSS, which is the main reason to pick it. If you want the code side of type, or you design in Photoshop and want rules rather than taste, it is a solid choice. Pure Figma users may be happier with a UI design bootcamp.

Best forWorking designers or front-end developers who know their layouts feel off but can't say why the type is wrong.
Skip it ifYou design in Figma and want a polished, current walkthrough, or you're a beginner without Photoshop or CSS.

Pros

  • Modular and baseline grid lessons that reviewers say finally explained why their layouts looked unbalanced
  • A dedicated developer track covering vertical rhythm, em vs rem, and baseline grids in CSS and Bootstrap
  • Covers iOS and Android type scales as well as web, plus 33 ready-made font pairings added as a resource
  • Instructor explains his decisions during the project exercises, drawing on real freelance UI work

Cons

  • Narration is hard to follow for some students, and the auto-captions carry frequent misspellings
  • Rushes past examples at times, telling students to Google it rather than explaining in depth
  • Design exercises run in Photoshop and feel repetitive; last updated December 2022
This course is a real gem. It goes into a lot of detail about the rules of design using typography. I always wondered why my text documents did not look balanced and now I know why and more importantly I know how to balance them.
Alessandro Pistocchi, a student

Intermediate is accurate: it needs working Photoshop for the design half and HTML and CSS for the developer sections.

icon
What you will 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 · 8.9 hours of video 4 quizzes, 1 assignment, 13 articles

  1. 1Introduction to Typography 6 free previews15 lectures · 3 quizzes · 1.2 hours
  2. 2More about Typography 1 free preview2 lectures · 5 min
  3. 3Typography Scales and Grids 3 free previews10 lectures · 59 min
  4. 4EXERCISES: Modular + Baseline Grid Design Ultimate Exericse5 lectures · 1 quiz · 50 min
  5. 5How to Select Fonts? 1 free preview4 lectures · 22 min
  6. 6How to Pair Fonts? 2 free previews9 lectures · 42 min
  7. 7How to get Variation in text for Great Designs 1 free preview4 lectures · 1 quiz · 13 min
  8. 8EXERCISES: Dribbble LEVEL Designs 2 free previews6 lectures · 54 min
  9. 9Exercise: Social Media Ad Design with 3 different fonts 1 free preview5 lectures · 28 min
  10. 10Nature Health Themed Typography Exercises 1 free preview4 lectures · 32 min

Who it is for

The instructor says it suits

  • 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

What you need before you start

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

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 88 / 100

icon
Course Description

Last UPDATED on 25th September 2021
Added New Resources 33 Pre-made Font Combination for your Design Project
--------------------------------------------------------------------------------------------------------------------------------

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.
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 courseWho 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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

placeholder

I started my Freelance Design Career 10 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.
Improved User Experience of UK GP Tools Mobile App, few Games and e-commerce websites and created new Design patterns for showing passwords safely in password fields

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 nation-wide Poster Design competition from PANASONIC and won many Landing Page design contests on 99designs.
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 8 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

icon
More courses by Muhammad Ahsan Pervaiz

$69.99

$13.99

$13.99

$89.99

$84.99

$64.99

icon
More Typography courses

Free

$79.99

$74.99

$199.99

$44.99

$39.99

icon
Reviews

4.4

721 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Kash UIUX on 11/14/2020

Changed my mind. Very good course. Very good teacher. He helped me advised me in all my learning problems. Highly recommended.

By Karolina ukjaniuk on 11/7/2020

The tutor seems to have knowledge but the way he is talking about it is not professional. His English is not on the level that he could be a tutor what make it difficult to understand what he means. And the explanation is quite basic and poor. Without presentation it would be hard to get what he is talking about.

By Prashanth kumar on 10/20/2020

thanks to you now i know how to use vertical rhythm in my design projects.

By Sridhar on 10/13/2020

good

By Natasha Frank on 10/1/2020

I really enjoy this course. It's perfect explanation and very helpful.

By Abdullah Mushtaq on 9/17/2020

Muhammad Ahsan Pervaiz is an excellent instructor. I've never met anyone with such a good balance between theoretical and practical knowledge, and between comfortable informality and professionalism.
Also, the thing that I liked most in the course is the resources files that are awesome to understand and to do some particle tactics. The course was very engaging and informative.

By A D on 8/10/2020

This guy is the real deal when it comes to teaching UI design. The only teacher I've found who actually teaches the absolutely necessary details of UI design. Look no further none of the udemy instructors I found can match this guy. I bought most of his courses.

By Danielle D Cowden on 6/25/2020

So far the information has been very good.

By Mykhailo Obelchak on 6/18/2020

First of all - course is extremely boring, it's hard to listen to the tutor and he is not interactive at all.
Second - a lot of information is outdated and you can fit this all course in 2 hours max.
Wouldnt suggests buying this course unless you want to waste your time and money.

By Swapnam Pradhan on 6/2/2020

I like the course very much because Sir explains each part in detailing which is very helpful to understand the topics properly.

By Marc Schroder on 5/17/2020

Great Course...Easy to understand even if you listen in double speed.

By tun vit l on 4/25/2020

Exactly what i need

Showing 12 of 194 reviews