Typography Mastery For Ui Designers And Developers

Hyphen, en & em dash usage → Student Request Lecture Preview 02: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 Lecture Preview 02: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 Typefaces Preview 04: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 hierarchy Preview 03: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 Scales Preview 05: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 Design Preview 06: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 Scale Preview 00: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? Preview 03: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 Spacing Preview 05: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 Photoshop Preview 07: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 Rhythm Preview 12: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 Layout Preview 11: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 Photoshop Preview 10: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 Grid Preview 16: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 Grid Preview 10: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 Refinements Preview 03:10

Just a few more refined touches to the Blog Design in 2nd Iteration

Blog Design: 3rd Design Layout with Modular Grid Preview 09: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

Design one blog post layout using Modular Grid, Vertical Rhythm and Typographic Scale

How many fonts to select? Preview 05: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 Typefaces Preview 12: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) Preview 03: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? Preview 00:05

Learn how I experiment, mix and match typefaces based on a Design direction of a Web Design project

Basic Principles of Font Pairing Preview 03: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 Families Preview 05: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-Height Preview 05: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 Fonts Preview 07: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 Pairing Preview 10: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 Fonts Preview 04: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 Pairing Preview 05: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 Pairing Preview 00: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 Designs Preview 00:03

Download and start using these 32 font combos I have created. All these are Free fonts

Using Bold, Italic & Capitalize for Variation in Type Preview 03: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-Spacing Preview 03: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 Type Preview 02: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 Type Preview 03: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

I will show you few situations and you are going to tell me the answers

Tech Company Web Design (Preperations) Preview 05: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) Preview 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) Preview 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) Preview 03: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 theme Preview 07: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 tuning Preview 05: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 Resources Preview 03: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 links Preview 00:06

Download links to all the fonts and patterns used in this exercise

Exercise: Social Media Ad Design → Part 1 Preview 06: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 2 Preview 14:26

In this lecture, we will add the styles and more details to our social media ad design.

Exercise: Social Media Ad Design → Final touches Preview 02:54

I will show you in this lecture the final and fine tune adjustments to this Social Media ad design

Fresh & Juicy Design Exercise - Preperations Preview 03: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 links Preview 00:06

Fresh & Juicy Design Exercise - Part 1 Preview 15: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 2 Preview 12: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

IOS Typography (Typefaces, Type Scale and Usage) Preview 14:47

How many typefaces are available in IOS Devices and which one to use for which device. What is Type Scale in iPhone Apps and how to use it.

Resources for IOS App Design (Typography) Preview 00:03

Online articles you need to read to understand more about point sizes, ios screen sizes and IOS App typography

Student Question: 1X and 2X Resolution IOS Font Sizing Problems Preview 13:55

This video is based on Student Question to clear out different IOS Type sizes for 1X screens and 2X screens. It will clear up 72px/inch and 144px/inch problems too

Google Material Typography (4dp Grid, Type Scale and Usage) Preview 10:02

What is the Type Scale Google Material Design use. What are the do's and don't of using Typefaces in Designing Android Apps

Resources for Android App Design (Typography) Preview 00:02

Few online articles, tools and resources to learn more about Google Android App Design (Typography)

Responsive Web Typography (Different Type Scales for Different Screens) Preview 07:08

How to use two Modular Scales and how to shift your Type sizes on different Responsive Website Screens?

Using Google fonts: Pros and Cons Preview 03:36

You will learn Pros and Cons of using Google fonts, what to look for when selecting Google fonts. How to get quick pairs from Google Fonts website. I encourage Designers must watch this lecture

Using Premium Fonts: Pros and Cons with guide to purchasing them Preview 05:38

I will tell you how you can get Premium fonts for FREE. How you can buy Premium fonts ? Where and what to look for in a Premium font and what are the benefits and problems with premium fonts

Introduction to CSS font-size units Preview 02:37

We will look at absolute and Relative font sizing units e.g vw, %, em and rem. Just an overview of all these font-sizes

What is "em" font-size unit? Preview 08:11

I will code you through a simple example to understand how and when to use em values in css font sizing. And what problems can it generate when you try to use too many em values throughout your code

What is "Percentage %" font-size? Preview 04:15

You will learn how to use % values in font-size CSS. And how it works relative to its parent container (with coding example)

What is "VW" font-size? Preview 04:09

Learn about VW (viewport width) font-size and when and where to use it in CSS (with coding example)

What is "rem" font size? Preview 04:34

How to use "rem" css unit and how it works with coding example

How Vertical Rhythm works in CSS? Preview 08:28

Learn how to use Vertical Rhythm in your CSS typography to beautify your website in this lecture. How to use margins, padding and line-height to create Vertical Harmony

CODE Exercise: Using Vertical Rhythm with Gridlover tool Preview 08:05

In this lecture, we will use online tool Gridlover and use its Vertical Rhythm and CSS code to create an example HTML page

Vertical Rhythm & Typography Scales with Boostrap Preview 12:33

Learn how to use Bootstrap Less/SASS variables to alter Typographic Scale or how to use Vertical Rhythm in Bootstrap with this example code

Dont use TypeScale Online tool (use gridlover instead) Preview 02:22

TypeScale online tool is great but its CSS code is pathetic so we will look at the effect it produces and why it fails

Responsive Typograhy Introduction Preview 06:55

You will learn the basics of two methods for responsive typography (which i use normally)

Percentage font-size for Responsive Typography Preview 11:39

You will learn how to use % font-size in HTML element to control Responsive typography on different screen sizes using media queries

Different Typographic Scales for Responsive Typography Preview 09:44

You will learn the ultimate and best technique for Responsive Typography in HTML by using Different Scale ratios for different screens sizes. We will solve the problem that how much Typography scale needs to be altered for each screen

100% Responsive Typographic Scale by Richardo Zea Preview 00:03

A resource of 100% responsive Typography for your Website Design

What are Color Fonts? Preview 05:13

You will learn how to Install and use Color fonts in Adobe Photoshop?

What are Variable Fonts? Preview 07:52

Learn about new font type which is Variable fonts

What to do NEXT? Preview 00:37

What to do after Typography Course?

BONUS LECTURE Preview 01:43

Discount coupons for all my UI UX and Freelancing Courses