Typography for Developers Tutorial - Full Course

Published: 11 May 2021
on channel: freeCodeCamp.org

690,447

20k

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

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

On this page of the site you can watch the video online Typography for Developers Tutorial - Full Course with a duration of hours minute second in good quality, which was uploaded by the user freeCodeCamp.org 11 May 2021, share the link with friends and acquaintances, this video has already been watched 690,447 times on youtube and it was liked by 20 thousand viewers. Enjoy your viewing!

153,953