Тёмный

Typography for Developers Tutorial - Full Course 

freeCodeCamp.org
Подписаться 10 млн
Просмотров 669 тыс.
50% 1

Опубликовано:

 

29 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 247   
@jmg9509
@jmg9509 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~
@rythmwithringtone1323
@rythmwithringtone1323 3 года назад
Thanks bro it's very helpful for access topics
@priyanshsiingh
@priyanshsiingh 3 года назад
Thank you
@jmg9509
@jmg9509 3 года назад
@@rythmwithringtone1323 @Priyansh Your welcome guys. Hope it makes it easier for navigation =)
@abdelghanimahammedi6149
@abdelghanimahammedi6149 3 года назад
TY
@lifestylehacks3804
@lifestylehacks3804 3 года назад
Wow...thanks..it helps a lot😊
@EricHillAuthor
@EricHillAuthor 2 года назад
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.
@tinpham6413
@tinpham6413 3 года назад
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
@justingolden21
@justingolden21 2 года назад
Awesome video! Goes over nearly everything you'd need to know to start using typography in your design.
@gold4963
@gold4963 3 года назад
Woah, this is the tutorial I never knew I needed! Can't wait to learn!
@brijesh0808
@brijesh0808 3 года назад
lol
@nostalgicrewind
@nostalgicrewind Год назад
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.
@passwords7652
@passwords7652 2 года назад
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.
@rohansaraswat3740
@rohansaraswat3740 3 года назад
This channel is a blessing
@justingolden21
@justingolden21 2 года назад
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.
@michaelandreuzza
@michaelandreuzza 2 года назад
+1!
@MotSamllRoom
@MotSamllRoom 2 года назад
Yep agreed
@kublaikhan437
@kublaikhan437 2 года назад
She says that immediately after
@shailja098
@shailja098 2 года назад
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
@justingolden21
@justingolden21 2 года назад
@@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
@quietackshon
@quietackshon 3 года назад
Kerning adjusts the space between individual letter forms, while tracking adjusts spacing uniformly over a range of characters.
@alexandertownsend3291
@alexandertownsend3291 3 года назад
So the video has it backwards?
@quietackshon
@quietackshon 3 года назад
@@alexandertownsend3291 She correctly explains tracking and kerning later in the video.
@alexandertownsend3291
@alexandertownsend3291 3 года назад
@@quietackshon Do you have a time stamp?
@quietackshon
@quietackshon 3 года назад
@@alexandertownsend3291 1:01:31 - Tracking / Letter Spacing 1:04:22 - Kerning
@alexandertownsend3291
@alexandertownsend3291 3 года назад
@@quietackshon Thank you.
@braveitor
@braveitor 3 года назад
Excellent and thorough description of all concetps. Congrats! I've learned quite a few things.
@omarzidi2348
@omarzidi2348 2 года назад
I've seen so many tutorials like these but he always explains it best.
@user-ju2cd3du9i
@user-ju2cd3du9i 3 года назад
I feel like Steve Jobs now 🍎
@user-nx7iw5br1v
@user-nx7iw5br1v 4 месяца назад
I feel like Tim cook
@user-ju2cd3du9i
@user-ju2cd3du9i 4 месяца назад
@@user-nx7iw5br1v Tim Apple
@fernandodasilva9305
@fernandodasilva9305 3 года назад
Tenho orgulho de estar inscrito neste canal! Hello from Brazil again ❤️
@amandajeanne2802
@amandajeanne2802 2 года назад
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 RU-vid is the only thing that will get me through this class.
@17thhokage52
@17thhokage52 2 года назад
Ahh classic, getting paid by assigning reading material that you can access yourself. Makes me so mad!
@jeremiahpaulserapia4284
@jeremiahpaulserapia4284 2 года назад
Out of every other videos on RU-vid only yours was good. Straight to the topic and no bullshit. 👍
@ayushsoni146
@ayushsoni146 3 года назад
Thank you!!! I was just looking for typography tutorial.!
@casperdewith
@casperdewith 2 года назад
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.
@tauraigombera
@tauraigombera 3 года назад
Boom! I have been looking for this
@UdaySingh-249
@UdaySingh-249 3 года назад
world best RU-vid channel
@AlejandroMFilz
@AlejandroMFilz 2 года назад
Making the mother of all designs, Jack. CAN fret over every aspect!
@Amazing_mother_nature
@Amazing_mother_nature 2 года назад
You're the only Armstrong that I'm hearing about after Neil Armstrong.
@benjaminjaramillo5775
@benjaminjaramillo5775 Год назад
Wonderful video! Everything you need to start using typography in your design
@verjcarreon2004
@verjcarreon2004 Год назад
OMG ITS WORKED. Guys it really worked. Thank you
@stefonseca7222
@stefonseca7222 2 года назад
looking forward to learning from the rest of your videos. Subscribed!
@atilaprost
@atilaprost 2 года назад
Very helpful, and surprisingly therapeutic
@voidmind
@voidmind 2 года назад
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
@jaglinuxmint
@jaglinuxmint 3 года назад
Wish you all happiness. You are doing great work, imparting knowledge for everybody for free.
@Kiralalalala
@Kiralalalala 2 года назад
Thank you so much, it`s extremely useful and well presented for non-native speakers! Where could I find the teacher`s notes?
@dexmiller1307
@dexmiller1307 3 года назад
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 🙌🏻
@briandsouza7854
@briandsouza7854 3 года назад
Thanks FCC & Hope!
@cw3dv
@cw3dv 3 года назад
I am impressed Best course on typography
@TK-wp3iw
@TK-wp3iw Год назад
thank ypu so much i finally found the answer, i am feeling so relaxed now, yesss!! siiiiiiii
@neeshaantmdk7184
@neeshaantmdk7184 Год назад
Amazing I did it You made my day Thank you!!
@mostafizurrahman5648
@mostafizurrahman5648 3 года назад
Can you please make a tutorial video on json, wp ajex and wp rest api? That would be much helpful.
@Metamor-phosis
@Metamor-phosis 2 года назад
Wow!!! Pam Beasly is better at art than I thought 🎨
@Bizarro69
@Bizarro69 2 года назад
Excited! Ooooo!
@mahmoodsagharjooghi
@mahmoodsagharjooghi 9 месяцев назад
This was soooo good! Thanks!
@ritamdutta5860
@ritamdutta5860 Год назад
Loved the surprise visit from Veritiasum
@maggie45431
@maggie45431 2 года назад
Absolutely packed with ultra useful information! Brilliant course! Thank you!
@iamsauras
@iamsauras 3 года назад
Great video. Crisp, concise and clear. One question though, where can I find teachers' notes? I'm not sure about that.
@sajandeepkaur2313
@sajandeepkaur2313 3 года назад
Yeah same. She talked about them many times.
@urvashimendhe7056
@urvashimendhe7056 3 года назад
I came here to ask the same question 😅😂
@nimsiluperera
@nimsiluperera 2 года назад
Me too!!
@21BPH023_Vernnit
@21BPH023_Vernnit Год назад
you got the tool btw ?
@benhasel4540
@benhasel4540 3 года назад
thank you so much!!! you guys are the best
@amithimel2541
@amithimel2541 2 года назад
Wow! thank you so much! it's presented so sweetly and so much fun to watch!
@programmingwithdipayan7280
@programmingwithdipayan7280 3 года назад
Nice to see this wow ❕
@gachzedek
@gachzedek 2 года назад
This is greatness!
@redullapascualjason2818
@redullapascualjason2818 Год назад
thank you straight to the point
@jean-lais
@jean-lais Год назад
Thank you for uploading
@shanicepowell6212
@shanicepowell6212 2 года назад
you understand it very well, you may want to step i
@MrGreen-hr5cq
@MrGreen-hr5cq 3 года назад
Thank you, freecodecamp!
@callmejobson
@callmejobson 2 года назад
Thank you Free Code Camp and Thank You Hope! This is something I WISH I would known sooner!
@user-mx7ns6xs8h
@user-mx7ns6xs8h 3 года назад
Great job! Amazing presentation! Thank you🤩
@arhamirfan
@arhamirfan 2 года назад
i love your courses
@diamonds8746
@diamonds8746 3 года назад
Well done, good explaining
@-VineetKumar-ff6km
@-VineetKumar-ff6km 3 года назад
She is awesome as well as her learning too AGREE RIGHT
@julianaterto9424
@julianaterto9424 2 года назад
My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft
@justlowxi9493
@justlowxi9493 2 года назад
first time when watch the 2hours long video without skipping anthing
@anirbanc88
@anirbanc88 2 года назад
thank you for this lecture!
@shreyastaware
@shreyastaware 3 года назад
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.
@enlightenedsapien9332
@enlightenedsapien9332 3 года назад
+1 bro
@daveferran338
@daveferran338 2 года назад
Really helpfull tutorials. Helped a lot
@digigoliath
@digigoliath 3 года назад
Wow, awesome!!! TQVM!!
@dochimekashiariri7610
@dochimekashiariri7610 3 года назад
It was really good ❤️
@jitutech4417
@jitutech4417 2 года назад
Thank you for the aim feature
@BlueCollarBeerSnob
@BlueCollarBeerSnob 2 года назад
EXCELLENT! Thank you
@rgorbunov
@rgorbunov 2 года назад
Thanks!
@adyashapadhy611
@adyashapadhy611 3 года назад
Hi where can I find the teachers note which Hope mentions in the course @freecodecamp ?
@alamiraz
@alamiraz 3 года назад
I am also curious.
@kazynaaitzhanova538
@kazynaaitzhanova538 2 года назад
Н
@Infinitude
@Infinitude 3 года назад
Great Tutorial !!!.
@BrunoJennrich
@BrunoJennrich 2 года назад
i like, how she thinks of the users (not): "first, typography is a major component of branding..."
@ankushsingh4056
@ankushsingh4056 3 года назад
Please make a course on web services 🙏
@synchlyn
@synchlyn 2 года назад
THANK YOUUUU LEG8 NO CAP GUYS!!!!
@infographie
@infographie 2 года назад
Excellent
@anggamancingliar8482
@anggamancingliar8482 2 года назад
Terima kasih atas informasinya....
@827023685
@827023685 3 года назад
Alright, I think this is a great course but where are the teachers' notes you keep referring to?
@tamaghnadas8370
@tamaghnadas8370 3 года назад
Exactly my point, and also the project files~
@danielmarquintana9904
@danielmarquintana9904 3 года назад
Nice
@maiarubello5094
@maiarubello5094 2 года назад
Thanks
@karlos5976
@karlos5976 2 года назад
The GMS setup does not soft anytNice tutorialng like the video does it lasts a lot longer and is a gritty soft and the soft coming from softex lasts
@heyybyee2547
@heyybyee2547 2 года назад
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".
@icegelofficial
@icegelofficial Год назад
Wow Thank you
@manoramapatra8091
@manoramapatra8091 3 года назад
I really like videos from tree house... Before this data structure and algorithm video was awesome as well
@okeyshourovroy2769
@okeyshourovroy2769 3 года назад
Always appreciate
@DarkKnightLives
@DarkKnightLives 2 года назад
Typography is the fancy word for 'Fonts' and all that you can do with it.
@mohamadalghoush2474
@mohamadalghoush2474 2 года назад
I hope tNice tutorials makes sense. If you need more info, please feel free to ask. I'm new to tNice tutorials program.
@baptistatonini
@baptistatonini Год назад
What better Programs to start tweaking and making Typos?
@rahuldotel5983
@rahuldotel5983 3 года назад
Freecode camp is mind reader ♥️♥️♥️
@milosrakic6522
@milosrakic6522 3 года назад
Set playback speed to 1.25 it will help...
@ringyring
@ringyring 2 года назад
Setting it to 1.75 is more helpful.
@lharsh175
@lharsh175 3 года назад
Someone please link the Teacher's Notes.
@Rustaceann
@Rustaceann 2 года назад
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**
@mefrefgiweuhef4808
@mefrefgiweuhef4808 3 года назад
Banger
@wandersonhelmer1810
@wandersonhelmer1810 2 года назад
I couldn't find the project files to work along. Anybody have them?
@casperdewith
@casperdewith 2 года назад
4:35 This ‘lettering’ is a premade font. Ironic.
@prudentialpropertiesl.l.c2778
@prudentialpropertiesl.l.c2778 2 года назад
We love yours Chanel Amazing 👏 super Excellent yours Chanel we love ❤ This
@charlesizuegbunam
@charlesizuegbunam 2 года назад
Excellent tutorial. Please how can I get the teachers notes.
@lesliebenjamin5487
@lesliebenjamin5487 2 года назад
Where are the TEACHER'S NOTES/RESOURCES located please???
@gilbertumeh
@gilbertumeh 2 года назад
How can we get access ti the teachers note mentioned in this video. Thanks once again to giving us a good lesson on type
@jasonluong3862
@jasonluong3862 3 года назад
Like hammers and screwdrivers, just how many ways can you write the ABCs?
@nkugwamarkwilliam8878
@nkugwamarkwilliam8878 3 года назад
OOh my very lovely stuff
@_isaac_muniz_
@_isaac_muniz_ 3 года назад
Where can I download the files for the figma project, please?
@sleyzerzon
@sleyzerzon 6 месяцев назад
Where are the teacher's notes mentioned throughout?
@xxmatikazxx
@xxmatikazxx Год назад
great hack, thanks you
@vivekc8563
@vivekc8563 3 года назад
the content is really good thank you for the free courses. but cud u put up timestamps ?
Далее
I promise this story about fonts is interesting
29:35
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 791 тыс.
The LIES That Make Your Tech ACTUALLY Work
11:29
Просмотров 791 тыс.
10 Timeless Typography Tips
16:40
Просмотров 52 тыс.
The ULTIMATE Guide To Typography For Beginners
13:30
Просмотров 31 тыс.
CSS Text and Fonts Tutorial for Beginners - Typography
24:03
The Secret Science of Perfect Spacing
9:40
Просмотров 409 тыс.
The Ultimate Guide to Typography | FREE COURSE
39:03
Просмотров 459 тыс.