INTRO TO TYPOGRAPHY: Free Web Design Course | Episode 4
July 9, 2024 2024-07-09 20:33INTRO TO TYPOGRAPHY: Free Web Design Course | Episode 4
If you really want to know how to design websites, you need to learn how to use typography.
In this episode, we help you take the first steps to master typography. In web design, typography is super important to make sure you use words in the most powerful way.
Timestamps:
· Intro 0:25
· The purpose of a font 1:08
· Major categories 2:15
· Font properties 4:16
· What fonts 12:29
· What size 14:26
· Exercise 15:42
Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI
Learn how to build custom websites with Webflow FAST: https://bit.ly/3xyBsoF
–
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
–
Gear & Book Recommendations: http://bit.ly/2ohFOuj
#FreeWebDesignCourse #webdesign #freelancer
Thanks for watching the video BASIC WEB DESIGN SOFTWARE: Free Web Design Course | Episode 2
source
Comments (24)
@kamilkucharski3267
Thanks a lot!
@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
@OchiJonah-ct9ni
This is very helpful thank you so much
@OchiJonah-ct9ni
This is very helpful thank you so much
@Cyberian-Kumar
gotten till episode 4 , useless content till now
@user-zs7kl8yo3o
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!
@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.
@SuryaABS-nn6pb
video completed
@prepperbr
thank you
@christianahfolakemi8507
These videos are everything ❤
@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 3 out of 3
Sort comments by date to see the 3 comments, good luck for everybody learning Web Design 🙂
Now, um What fonts should you use? Now? There's a lot of fonts, there's tons of free fonts, there's hundreds or thousands, yeah, thousands, tens of thousands of fonts option there. If you are a beginner, which I assume that you are because you're watching this video. My advice to you is do not start to invent the wheel I would go with some classic. Now, one of the most famous Italian designers in the world, Massimo Vili was very, very famous for only using six fonts and these are the fonts that he used. So he used Mon Bodo um century expanded Fua Times, Roman and Helvetica. It's kind of a mix of San fonts with saris and using these combinations. He was able to create tons of different designs for different brands and never, it never got old. So these are kind of classic true fonts that you can still use today to create really great looking designs. Now, these are premium fonts. So if you're a new designers and you don't have the money to buy them right now. First of all, if you do have the Adobe subscription, then you have access to Adobe fonts, the type kit which has, I think some of these very good high quality fonts. However, if you don't. Of them, you can try and use Google fonts. Google has a lot of free fonts that you can use both on the web and you can also download them to your computer. Now, what I would do is I would look for these, I would kind of Google like Futura Google font alternative and would see what font is most similar in terms of the Google fonts to these classic fonts. And I would have build myself kind of a, you know, an arsenal of not probably not more than 10 fonts that I can start using and experimenting with. I wouldn't spend too much time trying to go with untested fonts if you're just a new designer, try to go with something that's tried and true at this point. Now, what size should you use for them? Now, my recommendation at this point is to go to a website like types scale and in types scale, you can choose from a Google font and they would basically um based on kind of a, in this case, it's called major third. Uh A hierarchy of fonts would basically tell you what fonts you should use. And you can see um how that would look like on a website. So usually when you're designing for the web, you're gonna have a few headings, right? The titles for the website, the, the way that we commonly refer to them is H one H two H three A four, meaning heading, one is the heading. That's most important. Heading two is a little bit less important and so forth. Now, you usually don't need more than, let's say 3 to 4 headings. And this website would basically give you kind of the, the, the basic uh scale of them. So I would use this again. I would not try to reinvent the wheel. There's already um tried and true systems for scaling font. And if you're just a beginner, I would use this um this scale to make sure that you're, you have a good kind of clear hierarchy in your um web and in your sizes. Now, I encourage you to exercise time. Topography is something, it's, it's a very crafty skill. You really need to practice it a lot and try to manipulate and learn basically with your hands in order to become good in order to develop an eye that can see what is good and what is not good. So there's two exercises that I would you do. The first one is you can go to the dictionary, pick a word and pick its, you know, its description and try to create some kind of a, a poster out of it. You can post this on your social media or something like this as a challenge. And every day try to use different font combination, maybe different sizes, different layout just to see how you can play around with a title and a paragraph. That's something that should be very, very simple. Another thing and something that I did for a while is to kind of create um a composition of a typographic quote from your favorite, you know, authors, musicians, writers, whatever, um and design a daily quote. I did this um kind of as a side project for a few months and posted kind of a daily quote every day. And that's something that really builds your skill together with. You can use that content as social media content to build your profile and to demonstrate your skills. So those are exercises that you might want to do. Um I hope you've found this video helpful. Again, a lot of more videos coming up to build your skills as web designers. So make sure that you're subscribed, make sure that you're, you've clicked that bell button to get notified when new videos are up. And also you're welcome to follow me on Instagram where I share daily stories and um insights from the web design world. Hope to see you in the next video. Stay tuned. Bye bye.
@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.
@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.
@mariyaparvinshah2152
Sir, can I use mobile phone to learn web design?
@mercymaeda2237
And what should I use in mac os
@chidozirimprosper913
pls which other softwares can we use
@kannadatifromchitradurga8749
Which software ur using sr
@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.
@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 ❤
@rokonkhan01
This is boring…
@Anotherday8477
Super awesome 👍👍💯💯
@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.🥰
@redtheredhairedlady734
Where is the 1st part ???
@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 😂