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~
I,m Usman and i,m from PAKISTAN. Just finished the whole course and gotta say that it is just amazing and learnt alot and eager to learn more about typoraphy. Thanks Freecodecamp as well as mam.
Oh, my goodness. This is a fantastic tutorial. I’m not a designer. Just a guy trying to make his websites look better. You’ve helped a bunch. Thank you.
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.
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.
I don't know why, but whenever i use rem instead of pixels it feels like i don't have full control of designing. It feels like i am just letting it go. But everybody has their own opinions
@@shailja098 you might just not be used to it. rem also allows the user to scale in and out better and aligns with their device settings. You can also easily change the scale of 1rem in your project to scale everything. But it's also 16px everywhere anyway so there's no worry about consistency
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 RUclips is the only thing that will get me through this class.
There are so many design videos using Comic Sans as an example of bad typography that sometimes it seems typography is the art of knowing not to use Comic Sans
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.
I heard about Typography first, when Steve Jobs in his Stanford Graduation Speech said that "...Great typography in building the font for the first Macintosh...." Yeah, those words are just etched into the heart.
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 🙌🏻
TNice tutorials was the first video I saw to get into soft soft, tNice tutorials year in May. Today I published a Resetup from XXXTentacion "Moonlight".
Hope: ... and it's definitely all over that favorite site of yours! Which is, let's be honest... Me: **Nervous glance** .... Hope: -Treehouse, of course! :D Me: **whew**
They are not identical, but I agree that their difference is not as critical as the teacher makes it seem. Especially if you require a font that doesn't have a bold style, your only option (at least in the beginning) is to use faux bold (until either you or the original type designer makes a separate bold style). I wish this course touched upon some good tools to edit fonts in such a situation, such as FontForge (free & open source) or Glyphs (paid).
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~
Thanks bro it's very helpful for access topics
Thank you
@@rythmwithringtone1323 @Priyansh Your welcome guys. Hope it makes it easier for navigation =)
TY
Wow...thanks..it helps a lot😊
I,m Usman and i,m from PAKISTAN. Just finished the whole course and gotta say that it is just amazing and learnt alot and eager to learn more about typoraphy. Thanks Freecodecamp as well as mam.
Oh, my goodness. This is a fantastic tutorial. I’m not a designer. Just a guy trying to make his websites look better. You’ve helped a bunch. Thank you.
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
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.
Awesome video! Goes over nearly everything you'd need to know to start using typography in your design.
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.
+1!
Yep agreed
She says that immediately after
I don't know why, but whenever i use rem instead of pixels it feels like i don't have full control of designing. It feels like i am just letting it go.
But everybody has their own opinions
@@shailja098 you might just not be used to it. rem also allows the user to scale in and out better and aligns with their device settings. You can also easily change the scale of 1rem in your project to scale everything. But it's also 16px everywhere anyway so there's no worry about consistency
This channel is a blessing
Kerning adjusts the space between individual letter forms, while tracking adjusts spacing uniformly over a range of characters.
So the video has it backwards?
@@alexandertownsend3291
She correctly explains tracking and kerning later in the video.
@@quietackshon Do you have a time stamp?
@@alexandertownsend3291
1:01:31 - Tracking / Letter Spacing
1:04:22 - Kerning
@@quietackshon Thank you.
Woah, this is the tutorial I never knew I needed! Can't wait to learn!
lol
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 RUclips is the only thing that will get me through this class.
Ahh classic, getting paid by assigning reading material that you can access yourself. Makes me so mad!
OMG ITS WORKED. Guys it really worked. Thank you
I've seen so many tutorials like these but he always explains it best.
Excellent and thorough description of all concetps. Congrats! I've learned quite a few things.
There are so many design videos using Comic Sans as an example of bad typography that sometimes it seems typography is the art of knowing not to use Comic Sans
Making the mother of all designs, Jack.
CAN fret over every aspect!
Tenho orgulho de estar inscrito neste canal! Hello from Brazil again ❤️
Out of every other videos on RUclips only yours was good. Straight to the topic and no bullshit. 👍
I feel like Steve Jobs now 🍎
I feel like Tim cook
@@SocialLizy Tim Apple
Wonderful video! Everything you need to start using typography in your design
world best RUclips channel
Wow!!! Pam Beasly is better at art than I thought 🎨
I am impressed
Best course on typography
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.
looking forward to learning from the rest of your videos. Subscribed!
Excited! Ooooo!
Thank you!!! I was just looking for typography tutorial.!
Loved the surprise visit from Veritiasum
Wish you all happiness. You are doing great work, imparting knowledge for everybody for free.
I heard about Typography first, when Steve Jobs in his Stanford Graduation Speech said that "...Great typography in building the font for the first Macintosh...." Yeah, those words are just etched into the heart.
+1 bro
You're the only Armstrong that I'm hearing about after Neil Armstrong.
Very helpful, and surprisingly therapeutic
Thank you so much, it`s extremely useful and well presented for non-native speakers!
Where could I find the teacher`s notes?
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 🙌🏻
thank ypu so much i finally found the answer, i am feeling so relaxed now, yesss!! siiiiiiii
She is awesome as well as her learning too
AGREE RIGHT
Amazing I did it You made my day Thank you!!
Thanks FCC & Hope!
Boom! I have been looking for this
you understand it very well, you may want to step i
Great video. Crisp, concise and clear.
One question though, where can I find teachers' notes? I'm not sure about that.
Yeah same. She talked about them many times.
I came here to ask the same question 😅😂
Me too!!
you got the tool btw ?
i like, how she thinks of the users (not): "first, typography is a major component of branding..."
Typography is the fancy word for 'Fonts' and all that you can do with it.
This was soooo good! Thanks!
This is greatness!
Set playback speed to 1.25 it will help...
Setting it to 1.75 is more helpful.
Absolutely packed with ultra useful information! Brilliant course! Thank you!
Thank you for uploading
i love your courses
Please make a course on web services 🙏
thank you straight to the point
Thank you, freecodecamp!
TNice tutorials was the first video I saw to get into soft soft, tNice tutorials year in May. Today I published a Resetup from XXXTentacion "Moonlight".
Great job! Amazing presentation! Thank you🤩
thank you so much!!! you guys are the best
Can you please make a tutorial video on json, wp ajex and wp rest api?
That would be much helpful.
Nice to see this wow ❕
Thank you Free Code Camp and Thank You Hope! This is something I WISH I would known sooner!
thank you for this lecture!
Really helpfull tutorials. Helped a lot
first time when watch the 2hours long video without skipping anthing
Thank you for the aim feature
Wow! thank you so much! it's presented so sweetly and so much fun to watch!
Well done, good explaining
THANK YOUUUU LEG8 NO CAP GUYS!!!!
It was really good ❤️
We love yours Chanel Amazing 👏 super Excellent yours Chanel we love ❤ This
My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft
Freecode camp is mind reader ♥️♥️♥️
Excellent
Terima kasih atas informasinya....
Wow, awesome!!! TQVM!!
Please make a full course on Latex
I really like videos from tree house... Before this data structure and algorithm video was awesome as well
Excellent tutorial. Please how can I get the teachers notes.
Banger
Alright, I think this is a great course but where are the teachers' notes you keep referring to?
Exactly my point, and also the project files~
Always appreciate
Great Tutorial !!!.
EXCELLENT! Thank you
the content is really good thank you for the free courses. but cud u put up timestamps ?
Wow Thank you
Thanks!
Nice
How can we get access ti the teachers note mentioned in this video. Thanks once again to giving us a good lesson on type
Hope: ... and it's definitely all over that favorite site of yours! Which is, let's be honest...
Me: **Nervous glance** ....
Hope: -Treehouse, of course! :D
Me: **whew**
OOh my very lovely stuff
waouhhhh thanks
❤️
you guys should invest more ti into the Nice tutorialp hop scene along with tutorials too
great hack, thanks you
4:35 This ‘lettering’ is a premade font. Ironic.
Will there be a follow up course to this?
Someone please link the Teacher's Notes.
Like hammers and screwdrivers, just how many ways can you write the ABCs?
Great 👍
The guy from the beginning looks like Plato if he was a senior devops manager
True Bold and Faux Bold look identical to me.
They are not identical, but I agree that their difference is not as critical as the teacher makes it seem. Especially if you require a font that doesn't have a bold style, your only option (at least in the beginning) is to use faux bold (until either you or the original type designer makes a separate bold style). I wish this course touched upon some good tools to edit fonts in such a situation, such as FontForge (free & open source) or Glyphs (paid).
I hope tNice tutorials makes sense. If you need more info, please feel free to ask. I'm new to tNice tutorials program.