INTRO TO TYPOGRAPHY: Free Web Design Course | Episode 4

[@SayJee]

This channel is gold.

[@FluxAcademy]

❤️

[@AshikJonathan]

diamonds

[@sinan.e]

This channel is GOD (Design :) )

[@mkm1015]

Hey lovely weirdos :) I'm interested in design and I currently don't know exactly what I would love to do. I would like to experiment with logo design and web/UI design to see which is better for me. My goal would be to work remotely (ideally) or as freelancer. But I am still far away from that goal. Currently I am learning about typography since I've come to conclusion that a good understanding of typography is crucial in graphic design no matter where I end up - logo design, web/UI design or mayb evene packaging and print design. Since i don't have a lot of money I'm trying to maximize the power of the internet and learn from KZbin (content like this) or from affordable courses. Can anybody recommend any KZbin content, course or book about typography?? What to look for in typography when you want a logo for example to be perceived as friendly or trusty or playful etc.? How to pick up the right font for the right context? I will share this cours adn an article the very basics of typography which were really useful for a newbie like me -->Typography Basics: Typeface Classification | FREE COURSE kzbin.info/www/bejne/j5bOdoR_f5J9a7c --> A Visual Guide to the Anatomy of Typography visme.co/blog/type-anatomy/ Please recommend anything realted to graphic design (ideally about typograhy since that is what I'm learning now). Thank you

[@faridiinoo6596]

For everybody looking for subtitles, this video does not have them, I have to upload this to an audio-to-text tool to get em: I can't paste all of them in one comment, so this is Part 1 out of 3: Sort comments by date to see the 3 comments, good luck for everybody learning Web Design :) On today's episode, what is typography and how to use type to create good websites? Stay tuned. Hey everybody. What is up? My name is Ron Sega. Welcome back to our free web design course. If you're still not subscribed, so do that now and hit the bell button so you'll know when we're coming up with new videos for this free course. Now on today's episode I want to talk about typography. This is so important. Why? Because most of what we design includes mostly text together with images and texts are so important. Because first of all. Words are powerful. That's how people understand what we're trying to tell them. However, they're not only important in what they say as in words. The way that we use the type, the typeface that we choose, the font that we choose, how we lay them out, how we format them, creates a lot of the feel and communicates a lot of what we're trying to say with our design. Now, when you're working with type, there's basically two things that you need to consider that are actually the purpose of the type. So first of all, because we're trying to communicate something with the words, the type needs to be legible. And by legible, I mean it needs to be easy to read, right? If you're setting UA text in a bad font, or it's too small, or it's too big, or it's set up in a way that's making it hard to read, this is going to end up being a bad design. Because if people, and sometimes it's very subtle, people don't understand why they get sick or bored of a design so quickly, or they just. Want to leave the website so quickly? But a lot of times it's because the typography is not legible. It's very hard to read. The second goal of the type is, as I've said before, it helps to convey a message if you choose a specific font or set it in a specific color or size. It helps to communicate whether this is a premium brand, whether this is a friendly brand, whether this is a serious brand. So it helps to communicate the message of what is. It that I'm about to read and learn. So that's kind of the basics of why we're using typography now. There's two major categories that you need to understand when you're working with type and they are the serif and san serif. So as you can see it here, the serifs are the one that has these little kind of decoration, you might say. And that is kind of a leftover from a period in history where we actually had to chop the type in into the. Stone or whatever. And the tools that we use to create the typefaces left these kind of marks, so that's called a serif. This little chop of The thing is called a serif. Now when we got to modern times and when we started create type with, you know, pens and other modern tools, we've created a more cleaner and modern type of type which is called san, serif and sans in France. It means without. So basically it means without the serif. And those are the kind of more modern. Looking cleaner type. Those are the basic categories which you'll hear a lot of people talk about. This is a serif font. This is a san serif font. Which one should it be? There are other categories such as script, which is you know how you write stuff in other categories, but those are kind of the main ones to remember. And if you're thinking about this from a higher level, what you would say is if you're trying to communicate something, as I said, that is more modern and clean, you'd probably go with something like San serif font. If you're trying to create something that is a little bit more established and old school, a lot of times you would use a serif font. That's why a lot of times you would see banks or something like that using serif fonts because it communicates something old, something maybe from a book, and a lot of times we associate it with maybe more premium, more important, more established. So that's how we kind of that's our initiative instinct when we see these type of font categories. So that's kind of the basic categories that you need to understand. Now I want to jump into Photoshop here to explain some font properties. Now I'm showing you this in Photoshop, but what I'm about to show you is accessible and that's the way that it works with any design software. So the properties that I'll show you right now basically have you can adjust them, you know, in any design software. So I have here kind of a title and a paragraph, which are the key components of any type that we're going to write on the web or in design in general. And here on the right side we have actually two panels, so we have character which is basically the, you know the, the letters. And then we have a paragraph which is basically how it is aligned and the space before or after or if it is indented. So in terms of characters, let's choose this and we can see that what we have here is first of all this is the, it's called the typeface or the actual font. So if we change this, basically it changes the fonts. Then we have what's called the width. Many fonts have kind of a width within the font itself. So it can be very light and as you can see now the lines are light and then we have kind of regular and we have bold. So this is basically how fat the font is. Now why this matters is when the font is bolder and thicker it grabs more attention. It looks blacker. Can think about this as a color.

[@michaeljohnson1576]

I'm just finished episode 4 and I remember in episode 1, you said your goal was to make the BEST course available. So far, I feel with every episode, I takeaway so much from it. This is definitely my favorite course on Web Development, thank you Ran!

[@Abishekupdates]

recently we launch digital e visiting card with featuree

[@mrjohncrumpton]

6:53 If you're setting a heading in all caps, increase the tracking (letter spacing) to improve legibility. And thank you for sharing.

[@dwightlesliebaylon7056]

I really love the idea of practicing typography by designing some sort of poster based on a quote and posting it on social media.

[@phuongthuyinh3231]

I appreciate that you're working so hard for sharing this to us. What such a great channel! Thanks sir

[@Hiandres16]

This was my favortite one so far, loved that you gave actual advise to follow through

[@FluxAcademy]

Thanks Andres! Trying to improve with each one, appreciate the feedback!

[@navya-s3v]

It's a valuable resource for anyone interested in improving their web design skills.

[@JAN-r1n]

Sir my respects! I have been watching, now the fourth episode, not even in class I would find this lessons so productive and on point. Thanks!

[@FluxAcademy]

Glad you're finding it helfpul!

[@bekikovacs]

This is truly quality content, you are contributing for building a better world with this playlist only. I am watching it before diving into your full webdesign course and I am truly glad that I didn't skip. I adore the holistic approach and appreciate the constant notes on historical momentums related to the given topics - I have aways found these important. Thank you for this great series. Looking forward to the rest of it.

[@GamerSolitO]

THIS VIDEO IS GOLD BROTHER!!! CANT BELIEVE I HAVENT SEEN THIS VIDEO BEFORE. OVERESTIMATED THE IMPORTANCE OF FONTS!

[@selenasmith8220]

So very grateful you are doing these classes! Thank you!

[@TheBrandSamurai]

There hasn't been a single video of yours where I haven't learned something new! Outstanding!

[@ДаниярТуляганов]

thank you so much for what you have done! Today i found your channel and free courses. I binge watch them now. I feel so inspired and motivated! Im 23 and im sick of my office jon already. i always liked web-design and couldnt find from what should i start. And finally i did. Thank you, im so grateful! seems like a can quit from my boring job soon

[@mitchiej503]

I'm an aspiring web designer. I'm on episode 4. I'm grateful I found your channel. I'm really looking forward to learn more about web designing through your free course videos and be well equipped and confident eventually to offer my service soon🙏 Thanks much. Hope to connect with others who are into web designing too.🥰

[@dharininanda9104]

I came up to this channel to learn a particular thing. But UNUSUALLY he's here telling so much more and pratical, and so simply. Thankyou soo much for sharing your 'over the years' knowledge with us.

[@ambershear]

I thought I was going to require a college semester to learn all this. Thank you endlessly for sharing all the information you've learned over the years ❤

[@happylika]

I'm at the beginning, your courses help me a lot. Thanks for everything!

[@vishalanthony1529]

Your communication is so clear precise and fluid that I am amazed how quickly I grasped all the concepts and it stayed in my headpsaace.

[@christianahfolakemi8507]

These videos are everything ❤

[@johabermuor]

Finally I found a video about font size for web. Thanks.

[@DigitalBrain22]

For the first time in my life I understand where the names of fonts came from!

[@skaramicke]

Thanks for your great work! Feedback: Serif fonts are not a mere remnant of how types were cut in the past. They are specifically used for readability. The serifs create lines that lead the eyes forward and make it much easier for the visual cortex to process large sections of text.

[@michaelng1990]

Great lesson, I usually try to copy sessions of a website, do it myself and compare it with that website to practice the typography

[@Savcon12et]

As always Ram, excellent content, very clear and inspiring to continue trying new things in the world of design and composition. Cheers

[@yinkaayodeleopalade]

Good evening to you sir. I just cane across your training materials today and I learnt a great deal from the ones I have watched. Pls I want you to do a video training that teaches how to make DX design functional in WordPress or webflow. Thank you very much and God bless. Yinka Ayodele from Nigeria

[@shaquillemckenzieDMKT]

I’m loving these sessions 🤓✍🏽 all the way from Guyana 🇬🇾 learning to hone this newly discovered passion of mine thanks 🙏🏽

[@FluxAcademy]

Wonderful!

[@jugalkumari4119]

Thank you for this valuable information.... Thanks and love from India

[@amnarajpoot342]

You are just awesome, with your great content & unique teaching skills, God bless you more & more😇. Thank you so much.

[@henrychavez5554]

Amazing videos. I always had a passion for graphic design however I was not able to persuade that career during college. I am bout to graduate and I am thinking to start as a freelancer.

[@vikumravinayake1882]

brainstorming explanation. U solved my one of the burning problem of designing Thank you very much Ran 👌👍

[@Dev-nt9vt]

okay got it. comic sans coming right up

[@RicardoSantos-to8bi]

Hi Flux, I'm Brazilian and for that reason my English is a little basic, so I'm asking you to make the English subtitles available to watch and understand your video, thanks

[@shobhitkumar7780]

Great video man! The exercises you tell at the end of the video are really a great help

[@suyashpurwar8310]

I just love this channel! So awesome!

[@edgreenberg7912]

Very clear. Very helpful. Thanks.

[@OchiJonah-ct9ni]

This is very helpful thank you so much

[@samialvi4226]

One more great episode really appreciate the effort you have putted creating this Incredible course💞

[@sdinovacoes]

This channel is amazing

[@tavideographer9932]

thanks for sharing golden tips

[@sweetstuff55]

i'm excited for the exercise! is there somewhere online that people who are doing this course are showing their work? I'm learning for my freelancing career but I'd love to post my work to get feedback :)

[@hectorong3933]

Very informative course. Keep 'em coming!

[@FluxAcademy]

Thanks Hector! Coming up!

[@positron1890]

Thanks, man it was really good and helpful.

[@tanvirashraf728]

have visited some of the websites you designed....mashAllah they are electric

[@princepatrickc4611]

I want to be like you man! this is great! I chose the path of being a Web Designer coz I love what I'm doing. thumbs up man!

[@FluxAcademy]

thanks 👊

[@The97Pasquale2]

It would be helpful if you upload some examples of your exercises, just to take inspiration. Anyway, great video! Thanks :)

[@utibesbazz8916]

Thanks Ran, the lesson was really insightful. will definitely put what I've learned to practice.

[@faridiinoo6596]

For everybody looking for subtitles, this video does not have them, I have to upload this to an audio-to-text tool to get em: I can't paste all of them in one comment, so this is Part 2 out of 3 Sort comments by date to see the 3 comments, good luck for everybody learning Web Design :) Can think about this as a color. So now this is very, you can say black, if you kind of squint your eyes at this design, the title is very Black and this whole area of text is grayer. However, if we would you know, make this light, then now this is also gray. Now understanding this is very important because one of the most important things that we want to create with our design is kind of hierarchies. What are we looking at first? What is more important? So a lot of times you would want to, if you would want to make people look and notice at the title before you would make it bolder and that's just one way to create the hierarchy. But that's a lot of what we use this for. Now, this is let's let's keep looking at the properties that we have here. So this is obviously the size of the font. So we can make it very, very small right now, it's very, very big. Then we have the what's called tracking and curing. So tracking basically means how much and I I'm gonna use OK, I'll use this. So basically how much space I'm gonna use shortcuts um option and the right key. Um Basically how much space we have between the letter. Now by default, the default usually is OK with fonts, but a lot of times we might want to create a little bit more space and this helps to create maybe a different feel to the page. So maybe this might look a little bit more premium or a little bit more tight. Um Let's make this even tighter because you can actually go into um the minus. So this is now a little bit not readable and remember what we said before, we need to find if we want our text to be readable, which is mostly what we'd want unless we are David Carson. Um Have you watched the previous video about design history in any case? Um That's how we would play with the tracking and the other one is actually, so this was actually the tracking right here in the. This is actually the kerning. So kerning is actually the space between two very specific letters. So to choose that I would also say option and left and right. And now note that I can only add or subtract text uh space between two letters. This is important when you're working with big titles, sometimes you'd want to adjust this to make sure that the space is equal between all letters. Because sometimes when the type big, you suddenly you start to see that some letters have more space when others, this is usually you don't do this. But when you're working on logos and when you're working on big titles, sometimes you want to make these adjustments. Now, one thing that is very important is the actual line height, which is called letting. And this is basically when we have a paragraph, how much space do we have between the lines? Now again, there's also a always a default and sometimes that default is good. But a lot of times you might want to adjust this. For example, when text is very small, you need more space between the lines to make sure that you can read it. However when type is very big or if you're having subtitles, for example, let's say I want this to be my title, right? And in this case, I actually want to tighten the letters also a little bit more. And let's say I want this to be in two lines. So right now, for example, the default, um the default space between them, you might say it's OK, but I actually might choose to make them closer to make this title a little tighter. So that's basically a, a design choice that I can make. One more thing that I want you to notice is that there's a difference right now in how these texts are um built. So this one, the first one is called point text and you can see that there is basically a point here and then I can Write and write and write more letters. This is good for titles. However, for paragraphs, um my text is set to paragraph text. And this basically means that as you can see when I'm selecting this, there is basically a bounding box and this bounding box controls when lines are breaking, when text is wrapping, it's called text wrapping. And basically, I'm setting this up how uh to make sure that the lines are either not too short or not too long um In Photoshop if you wanna switch between them. So right now I'm in the paragraph, I can right click this to convert point to point text and, and uh, you know, this one to convert to paragraph text, it wouldn't make sense for me to manually break the lines every time I need to break a line that would be very tedious. Um So for paragraphs, obviously, you'd want to use paragraph text and for titles, you'd probably want to use line text. Now, one thing to mention about paragraphs, one of the most common mistakes is for people to create very, very long lines. So let's say that the text was smaller. Um This is actually still decent. But for a lot of times this, for example, would be uh a line that is very, very long. And when the line is very, very long, people start to actually need to tilt their head to read. And that makes the legibility, the readability of this text, um less comfortable and people would less likely want to read this. So kind of a guideline that you'd want to remember is, you know, uh try to make sure that each line is about 10, on average 10 words. So in this case, 123456789, 10 or maybe 10, 11 11, I would probably want the lines to break around here. So let me adjust the bounding box to about here. Yeah, to make sure that this is a little bit more readable and now you can see that actually there is a little bit too much space here. Now, how do I know that? There's too much space. I can actually, when I'm looking at this text, I can see big white lines in between them and while I want this whole area to look kind of like a gray zone that I can focus on. Um Now I'm trying to jump between them and I see that this is actually I need to find kind of a middle ground. So I'm gonna adjust this a little bit more lightly. So this is probably where you'd want to be um lines not too tight so that it's hard to read, but then you don't want to notice the gaps between the lines because if you notice it, you means you're focusing on the gaps instead of focusing on the text. So these are some basic properties to change and manipulate while you're designing your text.

[@WoogyYT]

These videos are absolutely brilliant and extremely helpful!

[@Vio00B]

Very helpful much love

[@jasmineliu2440]

Wow!! This video is so helpful! Thank you :)

[@ronaginat4719]

Nice ideas for exercises, tnx

[@Lcherie26]

Thank you so much for uploading these informative videos! Appreciated!

[@wesfrance1]

Ran, thank you for sharing your expertise with us. Very concise and short. Outstanding! Would you suggest learning Webflow first or a little of both, this free course and Webflow?

[@isaiasxd4453]

Typography 💜

[@NandoDevlop]

Thanks for the content, it's time for practice lesgoo

[@SamuelJDavis]

great content. Thank You!

[@symebro]

Hi Ran, be careful of your webcam video placement. I’ve noticed in many tutorial videos your face cam will be blocking something you’re clicking on 😂

[@maviecallalistah]

This is gold!

[@newearthangelreiki]

So helpful thank you for this!

[@abdulfareed2585]

11:02 Remembering money heist professor ; p

[@smarthustlersclub6375]

I actually want to start webflow soon because WordPress is so limited

[@tobi_dosumu]

I like your shirt. Thanks for the course.

[@ashvanths3214]

thanks a lot for sharing all this information ..

[@Anotherday8477]

Super awesome 👍👍💯💯

[@raida4632]

Super helpful!

[@viajar-ia]

another amazing video

[@diaryofablackgirlfromkampa5332]

thank you so much i learnt a lot about typograpghy.

[@asimmughal9048]

You are just Awesome💞

[@samzaidan1999]

Thank you for such a great channel and content. I would like to know what photoshop program did you use in explaining the different types please?

[@AKsArtDesignLife]

Thank you for this 🙏🏾🙏🏾

[@jonasjonas640]

please try adding subtitle to your videos so that we your viewers can know some of the words you pronounce

[@IlayGuardia]

I am learning a lot from you, thanks.

[@FluxAcademy]

Happy to hear!

[@elenaschmudlach3469]

Hi Ran, I love your videos! I would like to get started, but got stuck when it comes to designing practically (I wanted to create a mood board, but couldn't find the right buttons in Adobe). How did you learn to use your designer tools like indesign, illustrator, photoshop, ...? I am more than happy you're doing this :) Cheers, Elena

[@edzerdboersma]

Very good channel, but the circle with your head often hides important parts of the screen, in which you are working, so we can not see that part.

[@yaseeryaqoub]

Very nice brother, i really appreciate your efforts.

[@ayshahakeem6611]

Quality content 💯💯

[@neelsharma4853]

thank you sir, its very helpfull🙏🏼🙌🏻

[@mariyaparvinshah2152]

Sir, can I use mobile phone to learn web design?

[@SuryaABS-nn6pb]

video completed

[@flyerderek6073]

Thank you.

[@btsseptemberjungkook2341]

Great content !!

[@PradeepKumar-tx3vw]

Thank you for the video. Also Is it advisable to use multiple fonts or stick with a single font throughout the design?

[@sharvmangalie2434]

Rule of thumb is basically to use no more than 2 - 3 fonts

[@iMahxyh]

Thanks! very nice content! i'm waiting next... come and make my weekend most happy!

[@FluxAcademy]

Coming up!

[@SUNILJOSEPH2030]

THANK YOU>>>

[@abioyefrancis8603]

What is the least visible point for a paragraph text and a Title text ??

[@ayayusuf4366]

I wouldn't know that you were using Photoshop if you didn't say it, that white theme seems weird to me😂.. Informative video btw, keep it up👍

[@andresdeinnocentiis6498]

I have a question, I've just started my journy on web design, and I've just started an HTML and CSS course, so my question is: are these 2 separate ways of web development (Adobe and HTML)? Or does Adobe Photoshop, Illustrator and Xd necessarily require HTML and css at some point? I apologize for my ignorance, and thank you for this course, I really like it a lot!!

[@downfallsky]

im like 4 months late but in case you still need an answer: you design the website using adobe (or any design apps) and then when you implement it on the web, you will need html and css (and javascript sometimes)

[@mickymouse2445]

Can I use Google fonts for free even in comercial projects for clients like html-5-banner for example? I won't get in any legal trouble with licensing? Sounds almost to good to be true..

[@gingerbm56]

Is this Dr. Bashir??? Jk, amazing series!!Thank you :)

[@chibuzoduruigbokwe6859]

I do have passion for wed designer, but truly am a novice , No idea where to start , Everything seems blank that breaks my heart a lot

[@vaibhavnagare7285]

Nice editing 👌

[@kamilkucharski3267]

Thanks a lot!

[@FluxAcademy]

You're welcome!

[@damaanilkumar391]

good work i liked it

[@prepperbr]

thank you

[@rupadas2651]

good but want after UI design course ran sir....

[@girishdhavalikar3869]

thank you,

[@hassanahmedhassanahmed2183]

Hi Flux, I'm Pakistani and for that reason my English is a little basic, so I'm asking you to make the English subtitles available to watch and understand your video, thanks

[@dambaradnaev6533]

Thank you for the content! 🙌🏻

[@FluxAcademy]

You’re welcome!

[@srchoudharyy]

Banda, Kamaal Hai