Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Typography & Vertical Rhythm for UI Designers and Web Developers

via Skillshare

Overview

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 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
  • 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 CC2015 or latest version

Take this course now and I will see you inside the course

  • 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

Syllabus

  • What we will cover in this course
  • Introduction to Typography
  • About Font and Font Families
  • Typography Anatomany terms
  • Humanist Old and Transitional
  • Sans Serif and Script
  • About Line Length
  • Text Alignements
  • Line-Height (Leading)
  • Letter Spacing (Kerning)
  • Design Exercise to apply what we have learned so far
  • Hyphen, en & em dash usage
  • Using Quotation marks properly
  • Roles of Typefaces
  • Typographic Scales
  • Online Tools for Typographic Scales
  • How many Levels of Typographic Hierarchy do i need?
  • Vertical Rhythm
  • Vertical Rhythm in Photoshop
  • Design Exercise for Vertical Rhythm
  • Intro to Modular Grid
  • Preparing Grid for Blog Layout Design Exercise
  • Design First Blog Layout
  • Design Second Layout for Blog
  • Refining the 2nd Layout Design
  • Last layout for Blog Design
  • How many fonts to select?
  • Moods/Voices of Typefaces
  • Effect of Color on Typeface Mood (Voice)
  • Introduction to Font Pairing
  • x-height matching
  • Pairing with contrast
  • Pairing typefaces on similar features
  • Avoid too much similarity
  • Pairing fonts from same designer or family
  • Online Tools for Font Pairing
  • Dribbble Design Exercise Preperations
  • Hero Header Design Part 1
  • Hero Header Design Part 2
  • Hero Header Design -2nd Theme
  • Hero Header Design - 2nd Theme Part 1
  • Hero Header Design - 2nd Theme Part 2
  • Social Media Ad Design Exericse → Preperations
  • Social Media Ad Design Part 1
  • Social Media Ad Design Part 2
  • Social Media Ad Design Final Touches
  • Juicy Design Exercise - Preperations
  • Juicy Typography Design Exercise Part 1
  • Juicy Typography Design Exercise Part 2
  • Intro to Point (PT) sizing in IOS Devices
  • IOS Typography Specifications
  • Designing Multiple resolution IOS Screens with Photoshop
  • Student Question about Resolutions
  • Mirroring your Photsshop to Iphone
  • Android Typography and Scales
  • Desinging for Multiple Android Screen Sizes
  • For Developers → Using Google Fonts
  • For Developers → Using Premium Fonts
  • For Developers → CSS Font Sizing
  • For Developers → em Font Sizing
  • For Developers → rem Font Sizing
  • For Developers → % Font Sizing
  • For Developers → vw Font Unit
  • For Developers → How Vertical Rhythm works in CSS
  • For Developers→ Gridlover Coding Exercise
  • For Developers→ Custom Typographic Scale Bootstrap
  • For Developers → Dont use code from Typescale
  • For Developers → Intro to Responsive Typography
  • For Developers→ Different Scales for Multiple Screen Sizes
  • For Developers → Percentage CSS unit for Responsive Typography
  • Student QA → How to Expand Typographic scale for Responsive Web Design usage

Taught by

Muhammad Ahsan

Reviews

Start your review of Typography & Vertical Rhythm for UI Designers and Web Developers

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.