Typography 101 - Web Design For Beginners

good morning my goodness it's crystal here and in today's episode actually we're gonna start a whole series on youtube here so if you are the developer or whatever um leave i'm joking don't leave because this is for you and for every beginner designer so this is a full series that's going to teach you uh typography it's going to teach you color it's going to teach you how to create super nice designs from scratch all right so this is this episode again it applies to every new designer out there it applies to developers that make terrible looking websites including me yeah so in today's episode we're gonna start with typography so typing stuff make that look pretty and nice and then we're gonna move on from there we're gonna explore color and some other fun stuff and yeah without further ado let's get going okay so let's get going what i'm gonna do is open up figma here so you can open it up as well or adobe xd or all the other good stuff what we're gonna do is create a design and like kind of the lazy way like most people do and even i do sometimes and i'm gonna just throw it together it's gonna be really simple and then i'm gonna talk about super important concepts that are gonna make it look much much better okay so i named this bad here on purpose because it's naughty like me sometimes but that's off screen you cannot see it okay moving on so we have a frame here i just created the frame up here and added 1080p okay that's it so i've been thinking about what i'm going to put together here i just thought let's do a simple like traveling website with pretty illustrations something super simple that doesn't really take any effort okay because that's not the point of this episode so i found some on youtube not on youtube on google look at the nice pictures so i stole them so thank you very much let me give credit because it's important so here we go we have nature multiple owners okay there we go so febin and fireart studio nice good stuff okay so let's do i don't know we're going to do a simple title i'm going to go here to the text we're going to name this travelly or something i'm travelling and we're not going to focus on creating a super fancy logo but we're just going to add travel in here okay very good next up what i'm gonna do let me kind of place it here uh let's find a title a super interesting one we're gonna call this unleash your travel does that make it does that make any sense let's make this bigger 50. how about that look at that unleash we're going to place it kind of here okay and then let's also i'm going to get some lorem ipsum as a subtext here so this is kind of like our header maybe we can have like a subheader here with like like i don't know the location uh the mountains of dibidabo all right so this is much smaller let's see 25 or something 25 there we go and then we can have some text as well like that 18. i was traveling in western europe eastern europe in the mountains of tibidabo fantastic okay so something like that maybe this one's bigger dirty okay cool fantastic so this goes kind of here and then we'll have a nice pretty big image here or something like that um let me pull up the big nice image there we go all right so kind of like that okay pretty cool maybe space these out a little bit fantastic let me also expand this out because maybe we have another page or something or yeah let's just expand this out and here maybe uh you know what let's also add like two small images here as kind of previews so what i'm gonna do is just copy over two more images from that website this is gonna make these smaller so something like that i'm gonna bring everything up here okay like that we're gonna place this kind of here and then we'll do another one is this the same this is the same ed don't be silly all right make the smaller kind of resize it to this size fantastic just like that okay maybe take these two make it them even smaller so here maybe i can add like a arrow or something that's gonna say learn more or whatever that's not the way to do this why you do this and we have a special arrow here somewhere here we go arrow fantastic so maybe a little arrow that's going to be thick like 10. okay all right so something like that right click to next or whatever eh maybe smaller let's make this smaller oh wait this just makes it thicker how do i make it smaller they never they never taught me how to make it smaller anyway we're going to leave it like that so next up let's maybe do a detailed page here so let me see what i named this one because i forgot so let's say here we're going to say mountains or something the mountains are just mountains just make this big again like 60 or something right so maybe the second page looks something like this and i wrote some text down here so let me just see what i wrote visit any place then you can imagine wow okay just like that make the smaller grab everything here oops make it 40. okay good 40. there we go all right and then maybe we can have more interesting text like that so maybe one two and then maybe we can duplicate this again maybe we have another section or something like that okay so something like that and then let's just take another image here and whoosh whoosh it up actually let's kind of make it wide like that okay so maybe kind of this is a style that we can pick okay you might adjust like the text a bit and do kind of minimal adjustments but there's already so much wrong with this design in the sense that it doesn't have any rhyme or reason it doesn't have any flow it doesn't make any sense uh kind of visually it doesn't really make any sense it's very hard to read if we take a look at this text here um so that's what we're gonna cover in just a bit so one of the big issues that we had in this design is the sizes of our fonts our sizes are totally random we just pick things that we think look nice so this is 50 50 pixels this one is 30 pixels this was is 18 pixels okay so it doesn't really make any sense they're kind of picked randomly and i i think this one's 50 but this one is 60 okay so it doesn't have any kind of continuity is that the word that's a word we invented a new word people okay so what kind of a general rule of thumb that i like to do when when i pick headers and font text and things like that is well let's just do it let's just grab the small text here okay so i'm going to drag it kind of here so there are multiple ways that you can scale up fonts but a super super easy way is to just pick a font size for your paragraph text that's super easy to read okay so in this case um probably the lows that you can go to read online so on a screen is 16. okay and the way i like to do it is i like my font to be divisible by 8 that's going to keep everything super simple so i either have 16 here as my paragraph or i go up to 24 okay as my paragraph now that can be kind of too big so i'm going to keep it at 16. okay now if i want a subheader so let me just create a title here or something maybe this is the title of a blog post so uh call this my travel experience all i'm going to do is i'm going to take the paragraph and the same font size and just double it so i'm going to say times 2 which is going to give me 32 and just like that and now if i want to have a bigger one i just time the times this by two again okay so this way my fonts have some kind of rhyme and reason they're not just picked randomly they make sense okay so that's gonna be much much more appealing so this let me just align them as well here like that why is this not lining why you do this to me anyway this makes much more sense than this right here okay so that's a good start and again if you want something bigger maybe a super main header or whatever or maybe just something fancy that you want to show off you can go huge like that so maybe the page size or something one okay okay so that's the first rule i like to apply to my designs just scale up my font size and then equal matter okay so we're going to keep this one around maybe we can figure something out with it that's perfectly fine the other thing that we need to consider is the spacing all right and not only the spacing between the paragraph and the headers that we make but also the spacing here alright so the line height of each text okay so we want that to be just as consistent as the font size all right so what i like to do is go here to frame one i'm going to call this good just go on the frame that you have click on it and then here you have layout grid i like to click on that all right it's going to make a grid here i'm gonna change the color to something else like a blue okay and then increase this so it's very easy to see okay perfect where's my text let's go it's gone there it is okay so what i like to do here is just scroll all the way in and what i like to do is align the text here the paragraph text where that line is okay so i want to line it up just like that okay so it touches the the grid right there and as you can see everything matches up here now if we take a look at the second one so if we go down here well this does not line up anymore so that's an issue so what i'm going to do is increase the line height here until it matches my grit so what i'm going to do is go here oh where is it i forgot here at the right here okay line height and i can increase this until it touches it just like that now maybe you want more space that's perfectly fine you can increase it but make sure you are on the grid so i can increase this like that and then just bring this up still doesn't touch it let's do more a little bit more okay so something like that let's see and there we go look at that it aligns perfectly on the grid and that's very cool or actually what you can do is just align it to one and then you can just multiply this if you want to but anyway find the amount of space that you like and keep it like that so here we have two spaces and by the way each each space here each box represents 10 pixels so basically i know that the line height here is 20 pixels between each each text here okay so if i want something like 10 then let me see can i type pixels here i think you can only do percentages unfortunately so anyway just to let you know okay so there we go let's turn off the grid here for a second there we go so as you can see this is much more spaced out it makes sense it aligns on that fictional grid that we just made and it looks much easier and more readable compared to this right here okay another thing to consider is never ever ever once you have a lot of text here if you have more than a few lines of text never ever align it this way okay never ever do text line in the center and the reason why we don't do that is because it's very difficult to read and what i mean by that is that our eyes are very used to starting like if i start reading from here from the lorem right and i go at the end so i go and read all the way here my eye will naturally kind of fall back here again like where i started from right so if you read you go back from where you started from you read you go back from where you started from however the position keeps changing here right so i go at the end oh i need to go back even a bit further with my eyes so it just it's it's a small thing but it's it makes it a bit harder for you to read it okay so if you align everything on the left it's very easy for subconsciously for your eyes to jump back to that same initial position okay so make sure you align things like that and not like this this is fine if you have maybe a small amount of text so you can imagine maybe we have unleash your travel and we have a super simple subtitle here like like this okay so if you have something like this even maybe two lines it's perfectly fine something like this this is not bad okay however if you have a lot of text then it's hard to read moving on okay so now that we have this now we can apply the same line height so maybe you have a subheader here with more text you can apply the same logic here as well so go here open up your grid let's open up the grid and make sure this is also on the line so click here okay like that and let's also make sure this has let's do i don't know like three spaces or something so i'm gonna go here and just expand this until i am happy with the spacing okay that's still up a bit so let me move this okay there we go all right so there we go so i pick a a line height here as well and i can do this to the larger and the larger one as well and we can keep everything consistent now what we also need to determine is how much space i want between let me turn this off for a bit how much space do i want between the paragraph between the heading and maybe the large heading okay maybe i don't want these to be stuck so closely together so maybe i want more space here okay so you can determine for each of these a specific padding i should say okay so maybe here um i want to have let's turn the grid back on i want to have 30 pixels or something like that so let's turn this on so when i have a text here i always want to make sure i have 30 pixels of height on it so i'm just going to bring this right there okay 30 pixels right there perfect and maybe for this one i want double so again we can use the times two so for spacing as well so if i have 30 here the bigger one needs 60 the bigger one needs 120 even though this is quite big already so you probably don't need a bigger one but anyway so let's just do one two three here so 30 pixels 40 50 60 something like that okay so let me just bring it on that line and what i also want to do besides the spacing here oops let's turn this off okay so now we have messed around with the spacing too let me get rid of that now i can modify this whole thing so i need to fix it and this is not correct how do you write experience experience i was never taught in school unfortunately um let's turn back the grid okay so i want 30 here one two three one two three and here i want six so one two three four five six is that not six i cannot count anyway you get the point okay so there we go let's turn this off and make sure you also align things nicely here on the left side okay so you want to make sure that these are correctly uh the space is correct right here so what we can do is just take this and bring this in a bit take this and bring this in so they all touch the same line okay and this one as well it touches so it's perfect okay so those are the way i pick my my fonts and how i usually come up with a structure on adding them on the page so now that we determine the spacing and how we pick font sizes now we're gonna head into different fonts that we can use and there's three main ones one is called sans one is called sans serif and one's called display so these three are the most popular ones you also have handwriting and other stuff like that but those are not that more important so let's focus on these three and understand them and how to use them and where to use them okay so starting off with what's the difference between chance and sans serif well if you search up sans versus sans serif gonna find out that they have certain characteristics so basically sans here the font sans has these kind of tails at the end of each letter okay so the t as you can see they kind of have pointy things here here down here okay if we search here as you can see the a kind of has those squiggly uh pointy lines here here and here well a sans serif kind of has has these smooth corners or just flat straight lines okay so everything is smoother and cleaner okay so which one should we use well it depends uh serif was mainly used in like newspapers or books old books um what else let me think like classic just in classic style okay newspapers books and stuff like that whereas sans serif you're gonna see that more on the web all right so digital stuff now you're gonna find logos that do use serif as well um and you can do that if you are going for a classic look or you're going for an elegant look all right or like a very professional elegant look like a bank or something maybe pick serif other than that if you don't know what to do i would just go sans-serif on everything okay so if you want to keep it simple use sans-serif so here we go here we have an example here with companies that use tariff so time we have vogue tiffany and then co or ceo whatever you want to say jp morgan which is a bank right we have sony we have uh honda and we can also see sans serif logos let's see what do we have all right so airbnb is a good example right we have uber um spotify pinterest you're gonna find a lot of these tech companies uh online digital stuff they have sans serif most of the time okay so just go for sans serif and lastly we have display all right and this is kind of like a very star stylized font which can be either like a handwriting or something like this right or something crazy looking like this or maybe like a pixel font okay like this look at that so extremely stylized fonts that only apply for certain things you can imagine maybe maybe a logo can use a display font if you want to now don't get me wrong you can use a simple sans serif font for your logo and that's going to be perfectly fine a lot of a lot of big companies do that and but i guess i should just leave it at that these are extremes extremely stylized fonts and they work like maybe let me show you something like halloween or something like that right this has a certain feel to it this font right so as you can see here it looks kind of spooky and scary all right so this is a highly stylized display font whereas you don't want to add comic sense on here because that's going to look silly ridiculous or childish so you always have the mentality of what is my website what does what kind of feeling does my website want to invoke all right and based on that you can pick a font if i have like a super elegant website maybe a broker so maybe i'm a broker wolf of wall street representing here and i'm trading stocks tesla stocks and i want to have a professional serious feel to it i'm going to pick like a fancy serif font all right if i want to create maybe the thing that we're creating right now which is kind of a very calming looking website um i'm gonna go with a sans serif and choose a font that's like that looks calm it looks kind of curvy this sounds so weird but kind of curvy and easy to read and relaxing to look at okay i don't want to add this halloween font right here because that's just going to look weird can we do that let's do that let's see can we find something spooky looking there's no spooky looking there should be there we go creepster alright so let's go here and change it to creepster right that's i mean that's not too good okay so what i'm gonna do is go here and just pick out that font so literally go on google fonts go here i'm just gonna click san serif that's all i'm gonna need and just go through these and just see which one you think is gonna fit sometimes you're gonna find one sometimes you're not gonna find one so i'm gonna go over these and just kind of get a feeling of how it looks on my design okay so i think i found one that i like i think i'm gonna go with quicksand so what i'm gonna do is literally just go through all of these and turn them into quicksand quicksand okay and there we go and that's all we need to do now stay with one font all right if you start messing around with multiple fonts your design can fall apart very very quickly so as a general rule of thumb use only one font don't mix and match because it's very hard to find a a couple of fonts actually i wouldn't even use more than two fonts in a whole design okay but even if you find another one you're gonna have to find one that complements each other very well so i think using only one can get you so far and you are more than good so just stick to one that's another tip that i'm going to tell you and rather than maybe taking this and changing it to another font to put emphasis on it use weight weight is your friend okay with weight you can put emphasis on a title or anything that you want so what i'm gonna do here is just drag this down we're gonna reposition this in just a bit i'm gonna do it after uh to the grid but what i'm gonna do is just go here and change this to medium like that okay and if i want this to put even more emphasis on this one i can change this to bold all right to get an extra extra large text okay and there we go so use weight to give emphasis to certain titles and sub headers and what i can do here as well even in the text i can highlight and change the font weight to bold like that or medium to put emphasis on the on the specific character in here okay i'm going to go with bold here and maybe here i can grab this one and also put emphasis on this one just like that another important thing to consider is having equal spacing everywhere okay so right here we don't really take care of these space all right so nothing here is spaced correctly but even down here like this content flows a bit more to the left here it's kind of more in the center and here we kind of just drop the text in a weird position so what i want to do is just have a grid where i have a nice set of empty white space where i know that there is going to be basically no content alright so white space is basically the space between the content all right so this is some space here and we also have a bit of space here and here there needs to be a healthy amount of space again this is kind of i guess subjective i should say but there needs to be a healthy amount of space for all your content to be easily readable that's the same reason why we give space between text because if we have everything jumbled up like this it's going to be extremely hard to read but if it they're spaced out a bit like here right it's very easy to read this okay same thing applies to the whole page so just the page needs to have space in between like this whole section needs to have a bit of space with this okay so the easiest way you can do that is just again go here to the grid i'm going to hit a plus i'm going to add a new one i'm going to change this to 12 i like to do i'm going to change the color to like a bluish and i'm going to change this from grid to columns let me do 12 again here right just like that so again you can determine kind of the amount of space that you like uh in this case i'm just going to do 12 here so the these pixels are basically i believe 20. i'm not even sure how long they are i think they're automatically calculated based on the size of this page but anyway you can do a fixed size if you want in that grid i'm just going to leave it by default just to illustrate that but let's say i want this first whole column only to be white space okay so just empty space for the content so what i can do is literally just take the content of my page and start it from the second column and this is gonna apply to everything so from the pictures here from uh the logo that i have which i'm gonna drag here so everything is gonna start from here i don't want anything to touch this white space sometimes you can break that rule uh there are certain situations where you can do that and you're going to see like fancy websites do that where they have maybe like a number that we have here so let me just drag this maybe you can have like a number here i'm gonna make this super huge like 300 right that kind of just sits there kind of floats in space all right so there can be stylistic reasons why why you can break it uh and it can look good however you don't want to do this for basically everything on your page okay because then it's gonna look something like this and we don't want that so let's just get rid of it okay but you can break that rule that's all i want to say or maybe it can cut it off like that a bit wow so fancy we are anyway okay so i just kind of put everything on the line there that's good and we can do this vertically and horizontally if we prefer okay i'm gonna just kind of do it by eye vertically now i'm going to turn this off okay so there we go that's the difference i'm going to move this up a bit more i'm just going to grab everything here and actually just group it up call this main title like that i'm not sure what i'm going to do with this i'm just going to move it down here next up let's bring this image in right here all right i'm going to kind of position it here in the center like that let's bring everything up a bit now i can just plop oh what i also want to make sure is this kind of has the white space as well so i'm going to go back here turn the sprit on and look at that i am not there so let me just drag this right there okay so now i have the white space okay the problem though is i don't have the white space between the content now so if i turn this off this is kind of tight here all right so the text and everything to this image so for now what i'm going to do is just kind of bring this in a bit like that all right just give a bit more space here for this to breathe and that's good fantastic now we can leave it like this if we want i like to personalize this a bit more so what i'm gonna do actually um is take this image and i'm just going to add a little curve to it so i'm going to choose something like let's do 30 okay something like that maybe i'm going to expand this and make it taller like that i'm gonna bring it down the middle oops let's make this taller maybe i can expand this a bit out for fun like that okay maybe a bit down just like that okay i can kind of mess around with this but that's perfectly fine okay so just kind of added a curvature to it the reason why i did it is i think it looks better just because the design flows um i kind of wanted everything to be curvy from the font to the image so i kind of want to match everything okay um perfect so what i'm gonna do now is do these two images down here so again what i'm gonna do is just copy these over right here and bring them down here okay let's let's do it here and again here we can kind of add a specific amount of spacing to these as well so here we pick 30 here with we picked 60 so i can pick 60 here as well so i'm gonna go back here to the layout grid i'm going to turn this on not this one the second one and let's see here well this wasn't on the grid so let me just put it so it's easy for me oh actually everything is grouped up here so let me bring it up like that so it matches and this one up i think they were moved for some reason yeah they were all moved a bit but that's okay we can fix it super fast so i can leave six spaces here as well so from the baseline so from here from the text one two three four five six and when it comes to design or development this is very easy this is just you adding a bunch of padding basically just add a padding of 60. okay so let me bring these up do i have six there i'm not even sure i think i do it's okay whatever i'm not gonna sit here and calculate the pixels but you get the point okay so equal space everywhere super nice okay so now this kind of looks weird because we have the curving here but we don't have the curving here so i want to make sure i apply the same things to my design so again keep it consistent so i'm going to go here add 30 here 30 and 30 here just like that fantastic okay i can take this whole shebang i'm just gonna move it down until i hit the center here of this image okay perfect now maybe i want to give more space here that's perfectly fine we can do that okay just like that okay i'm going to keep it simple like that shall we add the arrow maybe we can do an arrow but i really don't want this arrow to be so big can i mix i don't help send help i don't know how to make the arrow smaller wait hold up we gonna figure this out arrow drag actually what i'm gonna end up doing i think i'm gonna make these a bit like i'm gonna stretch these out a bit more like that just fill up a bit more space uh i don't want these to be i don't want like the whole section here with the text to be small but this one is extremely large so i'm just going to drag these out a bit and then just move everything up again like that okay and again i don't want that much empty white space going on here okay so there we go you know what i want that arrow i'm gonna make it manually screw this so i'm just gonna go here and add two lines let's go here line and just drag down like that and make this thick like three okay and then take this and kind of rotate it to 45 degrees bring it up like that perfect i'm gonna take this one and just kind of go here and make the cap to round all right that's gonna make it again smooth because that's where we're going with this design i'm gonna go i'm gonna do the same thing with this one cap round i'm gonna bring it closer together up just like that i'm gonna take these two i'm gonna increase this to eight lastly what i want to say here before i close it off and we finish up the next section is that we can also we we can use size we can use font weight uh to determine the importance of a text but never ever forget that you can also use contrast so in our case we are using pure black and i would never really recommend you to do pure black i mean you can for like a very very intense text maybe i want to put a ton of emphasis on this title here so we can keep that but otherwise i'm going to lower the contrast so i'm going to grab maybe this text right here i'm just going to bring it up to like a light grayish color like that okay there we go so this is less important so i'm gonna make this a bit grayish as well but not as grayish just like that and there we go maybe we can have the most importance on this one all right but even this i'm just going to bring it up slightly a bit so it's not pure black okay so there we go we added color i mean not really color but contrast we added weight and size fantastic okay now on the logo since we don't have a a logo already made i guess we could add another font to change this up and make it a bit more interesting so let's pick a display font for fun so let's head here go all the way up go here and just go to display let's choose one i like lobster so we're gonna go with that one let's go here grab everything change this to lobster and there we go that's it pick a for some reason this doesn't let me pick the font weight so i'm just gonna leave it like this uh and let's also change the size of it so i'm gonna what's my normal text size is 18 16 my apologies like that i guess we can make this bigger so like 32 like that okay and for fun just to kind of differentiate this from everything else what i'm gonna do is just add a color to this so let's go here i'm just gonna go here to my design maybe pick that color okay or make this kind of a pinkish or whatever i'm not sure i have no idea okay something like that there we go and you might have additional things here maybe this is a nav bar or something let me just move this up a bit okay just to add a bit of style to it okay and take a look there we go we have everything made i just applied everything that we did here down here i did a bit of change to everything here with the text i thought that the light font was a bit too hard to read so i just changed this to bold medium all right and i changed this text to bold and i just picked the gray color for this and here i just picked the header 2 so the secondary header color to give a bit more emphasis on certain words in the paragraph but i found that this is a bit easier to read what i also did was i added a bit of curvature to this frame just to kind of go with the whole flow all right and here i just added everything basically the same way all right just the title here with the subheader and some text and again here i just made sure i have equal amounts of space because if these are together again it's a bit harder to read so make sure you kind of separate paragraphs and i just added a little button here just for fun again we kind of focused only on fonts here and not really adding color and playing with color that much uh but i thought this was going to be a fun little project for us to do again if you want to see a tutorial about learning about color complementary color and all that good jazz let me know and i'll make a video on it if you want to improve your design skills okay so again from here on maybe i don't know you can be creative maybe you have a section here so this section on the page maybe you don't want to have it like this maybe you want to expand out the image like this right so maybe you want to have kind of a fuller screen view like this right maybe not that big but kind of like where the logo is okay so something like expanded like this and maybe you can have icons in here to kind of switch between these images or something i don't know feel free to experiment and come up with fun stuff i'm gonna go back here but again it's small little changes you might not think this is a big deal but it's small little changes that make this much much nicer so if we do a quick comparison here uh you just get to see how much easier this is to read right here the the spacing is much nicer between each section between the text everything just looks organized and a bit more professionally made so that's gonna be it hope you enjoyed this little episode little episode we just made the whole course here on youtube hope you enjoyed this and subscribe down below for more fansies and that's gonna be it for me buy the courses down below if you want to learn more about programming okay goodbye

Channel: Dev Ed

Views: 69,374

Keywords: design, web design, web design for beginners, typography, typography tutorial, typography 101

Id: HnpsOtIcfbo

Length: 43min 7sec (2587 seconds)

Published: Fri Dec 04 2020