Tutorialspoint

Celebrating 11 Years of Learning Excellence! Use: TP11

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

person icon Muhammad Ahsan Pervaiz

4.4

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

updated on icon Updated on Jun, 2025

language icon Language - English

person icon Muhammad Ahsan Pervaiz

English [CC]

category icon Design,Web Design,

Lectures -79

Resources -8

Duration -8.5 hours

Lifetime Access

4.4

price-loader

Lifetime Access

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

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.    

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

Goals

  • 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

Prerequisites

  • Must have good knowledge of Adobe Photoshop (For Designers)

  • Must know HTML and CSS (For Developers)

  • Download and Install Adobe Photoshop Latest version

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

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction to Typography

12 Lectures
  • play icon Intro to Typography Course? 04:40 04:40
  • play icon How this course has been laid out → Headshot video 02:02 02:02
  • play icon What are Fonts, Font Families and Font Styles 05:09 05:09
  • play icon Typography Terms & Anatomy 06:36 06:36
  • play icon Type Classification - Old and Transitional 06:45 06:45
  • play icon Type Classification - Modern, Sans-serif, Script 05:34 05:34
  • play icon Optimal Line-Length for Web and Mobile 03:14 03:14
  • play icon Which text alignment for what purpose ? 04:55 04:55
  • play icon Line-Height (Leading) 06:39 06:39
  • play icon Letter Spacing (Kerning) 04:47 04:47
  • play icon Tracking in Typography 08:56 08:56
  • play icon EXERCISE: Designing Awesome Article Page in Photoshop 10:58 10:58

More about Typography

2 Lectures
Tutorialspoint

Typography Scales and Grids

10 Lectures
Tutorialspoint

EXERCISES: Modular + Baseline Grid Design Ultimate Exericse

5 Lectures
Tutorialspoint

How to Select Fonts?

4 Lectures
Tutorialspoint

How to Pair Fonts?

8 Lectures
Tutorialspoint

How to get Variation in text for Great Designs

4 Lectures
Tutorialspoint

EXERCISES: Dribbble LEVEL Designs

6 Lectures
Tutorialspoint

Exercise: Social Media Ad Design with 3 different fonts

4 Lectures
Tutorialspoint

Nature Health Themed Typography Exercises

3 Lectures
Tutorialspoint

Typography for IPhone and Android App Designs (Mobile App Typography)

3 Lectures
Tutorialspoint

Typography for Web Developers

12 Lectures
Tutorialspoint

Responsive Typography for Developers

3 Lectures
Tutorialspoint

New and Latest in Typography

3 Lectures
Tutorialspoint

Instructor Details

Muhammad Ahsan Pervaiz

Muhammad Ahsan Pervaiz

Instructing more than 100K+ UI UX Design students worldwide for the past 8 years. I began working as a Web Designer 20 years ago, and I had to learn everything the hard way.

I started from nothing and eventually found work with FORTUNE 500 businesses like Coca-Cola, Intel, and Panasonic.

Furthermore, I developed new design patterns for correctly displaying passwords in password fields while designing user experiences for the UK GP Tools mobile app, games, and e-commerce websites.

I'm a multi-talented individual that has won a Gold Medal, a national poster design competition from Panasonic, and numerous landing page design competitions on 99 designs.

I gained a lot of experience working with clients while freelancing, namely in the USA, Australia, the UK, and the United Arab Emirates.


These days, you can find me guiding startups with their landing page creation, SaaS web app designs, and on-boarding UX flows.

Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515