Typography for Developers Tutorial - Full Course

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=agbh1wbfJt8


Duration: 2:04:11
647,611 views
19,298

Typography is one of the most important aspects of good design. In this course, you'll learn all you need to know about creating good typography as a UX Designer: how to choose a typeface; what to look for when laying out type, how to create typographic hierarchy, laying out type, and creating responsive typography.

✏️ This course was developed by Hope Armstrong.

This course was made possible by a grant from teamtreehouse.com

⭐️ Course Contents ⭐️
👏 Thanks to JM G for creating these time codes.

⌨️ (0:00) Introduction: What is Typography?
⌨️ (4:11) Typography vs Lettering
⌨️ (4:58) Typeface vs Font

⌨️ (5:57) How Typography Affects User Experience (UX)

⌨️ (10:06) Elements of TypeFace
⌨️ (12:40) Serifs
⌨️ (13:20) Sans-serifs (Without serifs)
⌨️ (13:28) Letterform Contrast
⌨️ (13:54) Text Contrast in Comparison to the Background
⌨️ (14:40) Text Color Contrast

⌨️ (16:27) Typeface Genres (Types of Typefaces)
⌨️ (17:46) Serif Sub-genres
⌨️ (20:54) Sans-serifs Sub-genres
⌨️ (23:25) Scripts

⌨️ (24:39) Print Design vs Digital Design
⌨️ (27:00) Help Clients Understand the Benefit of Good Fonts
⌨️ (29:05) Fixed vs Fluid Layouts

⌨️ (30:28) Choosing and Using Typefaces
⌨️ (31:41) Installing Fonts
⌨️ (32:15) A word on Font Formats
⌨️ (34:45) Choosing a Text Typface
⌨️ (37:12) Counters (Enclosed whitespace in Text)
⌨️ (38:20) Typeface 'Mood' Matching the Content
⌨️ (41:37) Choosing a Display Typeface
⌨️ (46:35) Translating Text Typeface to Display Typeface

⌨️ (48:08) Weight, Styles & Sizes
⌨️ (48:33) Faux Bold & Italics vs True Bold & Italics
⌨️ (51:34) Font Weighting & Styles

⌨️ (53:14) Design Project using Figma

(More time codes to come.)


--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news



Other Videos By freeCodeCamp.org


2021-06-07OpenCV Python Course - Learn Computer Vision and AI
2021-06-03How to Build a Hackintosh - Step-by-Step Guide (Install MacOS Big Sur on PC)
2021-06-02Python for Bioinformatics - Drug Discovery Using Machine Learning and Data Analysis
2021-06-01Next.js for Beginners - Full Course
2021-05-27Advanced Computer Vision with Python - Full Course
2021-05-26🎮 Easy JavaScript Game Development with Kaboom.js (Mario, Zelda, and Space Invaders) - Full Course
2021-05-24Learn CSS Media Queries by Building 3 Projects - Full Course
2021-05-20Learn Modern C++ by Building an Audio Plugin (w/ JUCE Framework) - Full Course
2021-05-18Angular 11 Tutorial - Code a Project from Scratch
2021-05-12Kivy Course - Create Python Games and Mobile Apps
2021-05-11Typography for Developers Tutorial - Full Course
2021-05-06Chrome DevTools - Crash Course
2021-05-04OpenCV Tutorial - Develop Computer Vision Apps in the Cloud With Python
2021-05-03Azure Administrator Certification (AZ-104) - Full Course to PASS the Exam
2021-04-29Learn Docker - DevOps with Node.js & Express
2021-04-28MERN Stack Course - ALSO: Convert Backend to Serverless with MongoDB Realm
2021-04-27OpenGL Course - Create 3D and 2D Graphics With C++
2021-04-22Data Structures For Python Developers (w/ Flask) - Course
2021-04-21UML Diagrams Full Course (Unified Modeling Language)
2021-04-19Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial
2021-04-16Django 3 Course - Python Web Framework (+ pandas, matplotlib, & more)