Typography for Designers & Developers

$49.99

With this Typography for Designers & Developers online course, you can shift your boring designs to Dribbble level by learning Font Pairing, Web Typography, App Typography, and Vertical Rhythm. Project Files included!

Length: 8 hrs 29 min

This title is available in the Total Training All-Access library.

Subscribe Now

Description

Have you ever wondered why the designs on Dribbble and Behance look so elegant? One of the secrets behind those great Web and Mobile App Designs is perfect use of Font Combinations, as well as powerful usage of white space and grids.

To learn this Super Power of Typography and use of Time and Space, Take this Typography for Designers & Developers Course!

Take Away For Designers:

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

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 2015 or latest version

What am I going to get from this course?

  • 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

What is the target audience?

  • 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

 

Sample clip

 

 

 

CHAPTER 01: INTRODUCTION
Intro to Typography
How This Course is Laid Out
What are Font Families?
Typography Anatomy and Terms
Humanist Old and Traditional
Sans-Serif Script and Other Sans
Line Length in Typography
Text Alignment
Line Height Matters
Letter Spacing – Kerning
Exercise: Apply All We Learned
 
CHAPTER 02: MORE ABOUT TYPOGRAPHY
Hyphens and Dashes
Quotation Marks
 
CHAPTER 03: TYPOGRAPHY SCALES AND GRIDS
Roles of Typefaces
Typography Scale
Expanding Scales
Type Hierarchy Online Tools
How Many Levels of Hierarchy
Vertical Rhythm
Vertical Rhythm in Adobe® Photoshop®
Exercise: Vertical Rhythm
Modular Grid
 
CHAPTER 04: MODULAR AND BASELINE GRID BLOG EXERCISE
Prepare Modular Grid
Modular Design, Layout 1
Modular Design, Layout 2
Refining the Design
Modular Design, Layout 3
 
CHAPTER 05: SELECTING FONTS
How Many Fonts?
Moods and Voices of Typefaces
Color’s Effect on Typography
 
CHAPTER 06: PAIRING FONTS
Font Pairing Intro
X-height Matching
Contrast Matching
Looking for Similar Features
Avoid Too Much Similarity
Pairing Fonts from the Same Family or Designer
Online Font Pairing Tools
 
CHAPTER 07: USING TYPE VARIATION TO ACHIEVE GREAT DESIGN
Variation with Bold and Italic
Variation with Colors
Variation with Reverse Colors
Variation with Line Height
 
CHAPTER 08: DRIBBBLE LEVEL EXERCISE
Dribbble Hero Design Preparation
Dribbble Hero Design – V1 Part 1
Dribbble Hero Design – V1 Part 2
Dribbble Hero Design Variation Intro
Dribbble Hero Design – Variation 2 Part 1
Dribbble Hero Design – Variation 2 Part 2
 
CHAPTER 09: SOCIAL MEDIA AND DESIGN EXERCISE
Summer Discount Ad Design Preparations
Preparing The Base of the Design
Adding Text and Styles
Final Adjustments
 
CHAPTER 10: JUICY DESIGN EXERCISE
Juicy Design Exercise Preparations
Making the Juicy Design
Final Juicy Design Adjustments
 
CHAPTER 11: MOBILE APP DESIGN TYPOGRAPHY
Intro to iOS Point Sizing
iOS Font specs
Designing for Multiple iOS Screens
Student Question about Resolutions
Connect Your iPhone® with Photoshop
Android Typography
Android Design Exercise for All Sizes
 
CHAPTER 12: TYPOGRAPHY FOR WEB DEVELOPERS
Using Google® Fonts
Using Premium Fonts
Intro to CSS Font Sizing
What is em Font Size?
What is rem Font Size?
How Percentage Font Size Works
How vw Font Unit Works
 
CHAPTER 13: VERTICAL RHYTHM FOR DEVELOPERS
How Vertical Rhythm Works In CSS
Gridlover Exercise
Custom Typographic Scale in Bootstrap
Don’t Use Code from Type Scale
 
CHAPTER 14: RESPONSIVE TYPOGRAPHY
Responsive Typography Intro
Percentage Value Technique for Responsive Type
Different Ratios and Scales In Responsive Typography

Muhammad Ahsan Pervaiz

Muhammad Ahsan Pervaiz is an award-winning, multi-talented designer. His hunger for perfecting the User Interface from all aspects has led him to work with clients all over the world, including the USA, Australia, UK, and United Arab Emirates. With a career spanning over 10 years, his work includes projects for FORTUNE 500 companies such as INTEL, PANASONIC and Coca Cola.

Muhammad’s experience includes improving the User Experience of the UK GP Tools Mobile App, games and e-commerce websites, and creating new design patterns for showing passwords safely in password fields. He’s worked from App Icon Design to App UI Design, and from wireframes and prototypes to mockup design.

His ultimate goal is to make more awesome UI Designers, and ease the pain of learning for newcomers in this field of UI Design.

You may also like…