Typography for Developers Tutorial – Full Course

Wordpress sites

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:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

31 thoughts on “Typography for Developers Tutorial – Full Course”

  1. Mostafizur Rahman

    Can you please make a tutorial video on json, wp ajex and wp rest api?

    That would be much helpful.

  2. the content is really good thank you for the free courses. but cud u put up timestamps ?

  3. Thanks for posting my Timestamps in the Description =)

    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
    56:30 – Typographic Scale
    59:00 – Measure
    1:01:31 – Tracking / Letter Spacing
    1:04:22 – Kerning
    1:05:28 – Ligatures
    1:06:57 – Leading
    1:10:39 – Baseline Grid System
    1:16:42 – Laying Out Type (Hierarchy & more)
    1:25:47 – Text Alignment
    1:28:19 – All about CAPS
    1:32:33 – Utilizing Color with Type

    1:37:54 – Layout Treatments

    1:40:46 – Pairing Typefaces

    1:45:30 – Going Further w/ Typography
    1:45:49 – Responsive Typography
    1:48:40 – More on Grid Systems
    1:51:44 – Variable Fonts

    1:53:48 – The Fine Details of Typography
    1:53:55 – Dangles
    1:55:37 – Proper Punctuation
    1:56:57 – Stylistic Alternates

    1:58:05 – Practice Your New Typography Skills

    And ~SCENE~

  4. Great video. Crisp, concise and clear.
    One question though, where can I find teachers’ notes? I’m not sure about that.

  5. Fernando Da Silva

    Tenho orgulho de estar inscrito neste canal! Hello from Brazil again ❤️

  6. I don’t have any word higher than “thank you” to give you, I so appricate every course you give, We try to become great Developer, we can do that

  7. Excellent and thorough description of all concetps. Congrats! I’ve learned quite a few things.

  8. Hey Guys, thank you very much for all the content you create. It helped me a lot to learn some stuff. It will nice to see some Linux content / coding in Linux. I would appreciate if there will be some tutorials about Mojolicious and Perl or bash programming 🙌🏻

  9. thank you so much for this. I am taking a typography class right now at my college and I am fully an online student. My teacher just assigns reading and when I am left confused. I ask her for help, and she just ask me if I read the reading and syllabus. leaving me left with all my questions still un-answered. I have feeling YouTube is the only thing that will get me through this class.

  10. Thank you so much, it`s extremely useful and well presented for non-native speakers!
    Where could I find the teacher`s notes?

  11. Casper de With

    1:26:05 It’s not an efficient use of space. It doesn’t save space, because it doesn’t reflow the text in any way.

    Rather, justifying text makes it look more tidily organised. From what I’ve heard, books do this too, so if the other side of the page shines through, the rag from the other side (which is even) aligns with the left side of the current page.

  12. plae plantonenteen

    Typography’s never be my favorite subject because i think it’s too complex to understand, but you make it really clear. Thank you. I think i’ll be more hardworking on it.

  13. Wow! thank you so much! it’s presented so sweetly and so much fun to watch!<3 i love this!

  14. Justin Golden

    54:30 Nooo don’t use pixels for text height on the web! Use rem (default 16px per 1 rem) which scales according to user preference and screen. This scales better for different displays, and allows the user to customize it (improved accessibility). This is what most CSS frameworks such as Bootstrap and Tailwind use.

  15. Justin Golden

    Awesome video! Goes over nearly everything you’d need to know to start using typography in your design.

Comments are closed.