• No products in the basket.


Get Access to Entire Course Library of 2000+ Courses at £99 Get Now

In website design, the element of every layout plays a vital role. Throughout the Diploma in Typography for UI Designers course, you will learn the basics of typography for web and mobile UI to make the copy powerful.

The course teaches Font Pairing, Web Typography, App Typography & Vertical Rhythm.  At first, you will be introduced to the typography terms and anatomy and learn how to create stunning and elegant web and mobile app design by using meaningful fonts. The course covers the use of fonts, line-height and letter spacing, Google android typography, using Vertical Rhythm in Bootstrap, balancing your design by using LEGO Blocks method, connecting your Photoshop Screen to iPhone or Android Device, and more.

Upon completion, you will be able to convert your boring design into Dribbble level by applying the acquired techniques.

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


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

Course Curriculum

Introduction to Typography
1.2.Intro to typography course 00:05:00
1.3. how typography cousre is laid out 00:02:00
1.4.What are Font Families 00:05:00
1.5.typography-antomy-terms 00:07:00
1.6.Humanist Old and Transitional 00:07:00
1.7.Sans-Serif Script Other Sans 00:06:00
1.8. Line-length in Typography 00:03:00
1.9.Alignments of your text 00:05:00
1.10.Line-height matters 00:07:00
1.11.Letter Spacing kerning 00:05:00
1.12.exercise to apply all we learned 00:11:00
More about Typography
2.1.Different Types of Hyphens & Dashes 00:02:00
2.2. About Quotation Marks 00:03:00
Typography Scales and Grids
3.1.1Expanding Scales-NEW 00:07:00
3.1.Roles Of Typefaces-1 00:05:00
3.2.Typography Scale-1 00:03:00
3.3Type Hierarchy Online Tools 00:05:00
3.4.How Many Levels Of Hierarchy-update 00:03:00
3.5.Vertical Rhythm-updated 00:05:00
3.6.Vertical Rhythm In Photoshop 00:07:00
3.7.exercise Vertical Rhythm-1 00:12:00
3.8.modular Grid 00:11:00
EXERCISES: Modular + Baseline Grid Design Ultimate Exericse
4.1.prepare Modular Grid For Design Exericse 00:11:00
4.2.Modular Design part 1 00:16:00
4.3.Modular design 2nd 00:10:00
4.4.Modular Design Refining the design 00:03:00
4.5.Modulr Design 3rd Layout 00:10:00
How to Select Fonts?
5.1.how Many Fonts 00:05:00
5.2.Moods Voices Of Typefaces- 00:13:00
5.3.colors Efffect On Typo 00:04:00
How to Pair Fonts?
6.1.Font Pairing Intro-Updated 00:04:00
6.2.X-height Matching 00:05:00
6.3.Contrast Matching 00:08:00
6.4.Look For Similar Features 00:10:00
6.5.Avoid Too Similarity 00:05:00
6.6.Pairing Fonts Same Family Designer 00:05:00
6.7.Online Tools Font Pairing 00:06:00
How to get Variation in text for Great Designs
7.1.variation with bold italic 00:04:00
7.2.variation with colors 00:03:00
7.3.Variation with Reverse-colors updated- 00:03:00
7.4.variation with lineheight 00:04:00
EXERCISES: Dribbble LEVEL Designs
8.1. Dribbble Hero Design preperation 00:05:00
8.2.dribbble Hero Design V1 Part 1 00:16:00
8.3.dribbble Hero Design V1 Part 2 00:16:00
8.4. Dribbble Hero Variation Intro 00:04:00
8.5. Dribbble Hero Variation 2 Part 1 00:08:00
8.6. Dribbble Hero Variation 2 Part2 00:06:00
Exercise: Social Media Ad Design with 3 different fonts
9.1.summer Discount Ad DesignPreperations 00:04:00
9.2 Preparing base of design 00:07:00
9.3. Adding Text and styles 00:14:00
9.4.final Adjustments 00:03:00
Nature Health Themed Typography Exercises
10.1.juicy Design Exercise Preperations-1 00:03:00
10.2.making Of Juicy Design-2 00:16:00
10.3.juicy Designs Final-3 00:12:00
Typography for Iphone and Android App Designs (Mobile App Typography)
11.1 Intro IOS point sizing 00:05:00
11.2.IOS Font Specs 00:03:00
11.3.Designing multiple IOS Screens 00:14:00
11.4. Student Question About Resoltutions 00:14:00
11.5.connect Your Iphone With Photoshop 00:05:00
11.6. Android Typography 00:04:00
11.7.android Design Exercise For All Sizes 00:09:00
Typography for Web Developers
12.1.Using Google Fonts 00:04:00
12.2.using Premium Fonts 00:06:00
12.3.Intro to css font sizigin 00:03:00
12.4.what Is Em Font Size 00:08:00
12.5.What is rem font size 00:05:00
12.6.How percentage font size works 00:04:00
12.7.How vw font unit works 00:04:00
Responsive Typography for Developers
13.1.how Vertical Rhythm Works In CSS 00:08:00
13.2.Gridlover Exercise 00:08:00
13.3.custom Typographic Scale Boostrap-3 00:13:00
13.4.dont Use Code From Typescale 00:02:00
New and Latest in Typography
14.1.responsive Typography Intro 00:07:00
14.2.different Ratios And Scales In Responsive Typography 00:10:00
14.3.percentage Value Technique For Responsive Type 00:12:00
15.1 Color Fonts 00:05:00
15.2 variable-fonts101 00:08:00


This course is for anyone who's interested in this topic and wants to learn more about it. This course will also help you gain potential professional skills.

No prior qualifications are needed to take this course.

You can study this course from wherever and whenever you want. You can study at your own pace and from any device. Just log in to your account from any device and start learning!

Yes, there is a test at the end of the course. Once you’ve completed all the modules of the course, you will have to give a multiple-choice test. The questions will be based on the topics of the modules you studied. And of course, you can take the test at any time, from any device and from anywhere you want.

Don’t worry if you fail the test, you can retake it as many times as you want.

You don’t have to wait a minute after your payment has been received, you can begin immediately. You will create your login details during the checkout process and we will also send you an email confirming your login details.

We make the payment process easy for you. You can either use your Visa, MasterCard, American Express, Solo cards or PayPal account to pay for the online course. We use the latest SSL encryption for all transactions, so your order is safe and secure.

After you complete the course, you’ll immediately receive a free printable PDF certificate. Hard Copy certificate is also available, and you can get one for just £9! You may have to wait for 3 to 9 days to get the hard copy certificate.

Validate your certificate

Select your currency
GBP Pound sterling