Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design Web Design Typography

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
Rating: 4.1 out of 54.1 (595 ratings)
5,167 students
Created by Muhammad Ahsan Pervaiz
Last updated 12/2020
English
English [Auto]
30-Day Money-Back Guarantee

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

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

Featured review

Anthony Primus
Anthony Primus
778 courses
12 reviews
Rating: 5.0 out of 5a year ago
This course was absolutely fantastic! One of the best, practical course on typography that I've taken. It's jam-packed with all types of goodies that seriously took my typographic skills to the next level. I particularly loved the sections on typographic scale, modular/vertical grids, layouts, and themes. All in all, It's perfect! This really is a solid resource filled with well explained, helpful information :) Thank you Muhammad Ahasn for putting this together... I really do appreciate it ^_^

Course content

14 sections • 87 lectures • 8h 38m total length

  • Preview04:40
  • Preview02:02
  • What are Fonts, Font Families and Font Styles
    05:09
  • Typography Terms & Anatomy
    06:36
  • Resources for Typography Terms & Anatomy
    00:14
  • Quiz : Typography Anatomy Test
    10 questions
  • Preview06:45
  • Type Classification - Modern, Sans-serif, Script
    05:34
  • Resources for Type Classficiation
    00:11
  • Quiz - Identify Font Classes
    10 questions
  • Optimal Line-Length for Web and Mobile
    Preview03:14
  • Which text alignment for what purpose ?
    04:55
  • Line-Height (Leading)
    06:39
  • Preview04:47
  • Tracking in Typography
    08:56
  • Quiz - Basics of Typography
    5 questions
  • Preview10:58

  • Preview02:28
  • Using Quotation marks properly → Student Request Lecture
    02:52

  • Preview04:37
  • Preview03:00
  • Online Tools for Typographic Scales
    05:28
  • Student Question → How to extend Modular Scale to apply in Responsive Design
    06:56
  • Resources for Type Scale
    00:09
  • How many Levels of Typographic Hierarchy do I need?
    03:13
  • Vertical Rhythm and Spacing
    05:13
  • Vertical Rhythm in Adobe Photoshop
    Preview07:02
  • DESIGN Exercise: Typographic Scales, Making and Breaking Vertical Rhythm
    12:04
  • Using Modular Grid for Designing Web, Mobile Layout
    11:07

  • Preparing Modular and Baseline Grid in Photoshop
    10:44
  • Blog Design: 1st Design with Modular Grid
    16:21
  • Blog Design: 2nd Design Iteration with Modular Grid
    10:02
  • Blog Design: 2nd Design Refinements
    03:10
  • Blog Design: 3rd Design Layout with Modular Grid
    09:30
  • Blog Post Design Challenge using Vertical Rhythm and Modular Grid
    1 question

  • Preview05:18
  • Training your eye for Moods or Voice of Typefaces
    12:42
  • Effect of Color on Typeface Mood (Voice)
    03:57
  • How I experiment and select my typefaces?
    00:05

  • Preview03:49
  • Pairing fonts from Same Designer + Using Mega Font Families
    05:15
  • Matching Fonts with X-Height
    05:28
  • Using Contrast to Pair Fonts
    07:47
  • Look for Similar Features while Font Pairing
    10:04
  • Preview04:15
  • Online Tools for Font Pairing
    05:31
  • Resources for Font Pairing
    00:13
  • Download 33 Typeface Combos Kit to start your Designs
    00:03

  • Using Bold, Italic & Capitalize for Variation in Type
    03:30
  • Variation using Line-Height and Letter-Spacing
    03:38
  • Variation using Colors in Type
    02:58
  • Variation using Reverse Colors in Type
    Preview03:02
  • Quiz - Variation in Type
    4 questions

  • Tech Company Web Design (Preperations)
    Preview05:00
  • Tech Company Web Design (Part 1)
    16:19
  • Tech Company Web Design (Part 2)
    15:31
  • Preview03:52
  • Userable Web Design (Part 1) → Chainging Fonts to change theme
    07:42
  • Userable Web Design (Part 2) → Spacing & White space fine tuning
    05:34

  • Preview03:59
  • Exercise fonts and resources links
    00:06
  • Exercise: Social Media Ad Design → Part 1
    06:38
  • Exercise: Social Media Ad Design → Part 2
    14:26
  • Exercise: Social Media Ad Design → Final touches
    02:54

  • Preview03:26
  • Exercise fonts and resources links
    00:06
  • Fresh & Juicy Design Exercise - Part 1
    15:58
  • Fresh & Juicy Design Exercise - Part 2
    12:03

Instructor

Muhammad Ahsan Pervaiz
UI UX Designer + Freelancer + Web Developer
Muhammad Ahsan Pervaiz
  • 4.4 Instructor Rating
  • 4,736 Reviews
  • 46,778 Students
  • 16 Courses

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

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.