Choosing Your Fonts & Page Widths

Lesson Details:

Video Transcription: This course is brought to you by Appy Pie as part of our Academy series next up are the page-width and this is something that I got from that article from thrive themes and it's a great idea on how to make a website look professional and the way they described it is some websites just have that look and others don't and a lot of times it's hard to put your finger on why that's the case but one of the key differences is professional sites use page winds so let me show you what I mean by that if you go on this website you notice that there's different widths so for example this box is a little bit wider than these post-it notes and then it goes back to wider for these gifts and then not so wide for these freebies and that's because I'm alternating between different page widths and unless you're a website design professional and you have your own widths in mind a great way to start is just default to 1,100 pixels for with number one and 960 pixels for with number two and I'm gonna show you what this means when we actually build a website and finally you want to choose the fonts that you're using on your website and what I like to do is I like to have two different fonts one font for the headers and one font for the paragraph tanks so for example here's the header text are the header font and then this is the paragraph text which is a different tax so now you might be wondering how can I find out a great font to use for my website well what I did is use the three tool that's a plugin for Chrome called what font and what it does is when you click this plug-in you just hover over any font on a website and it tells you what font that website is using so this is great if you go back to your inspiration and open up one of the websites you really liked so for me I like the fonts on this website in particular and I just clicked on what font hovered over and saw that they were using lat oh and if you click on it it gives you more information about the font such as the style the weight and the size and so I wanted to use lat oh for my font so I wrote that down as font number one but then I needed a font for the paragraph and this is maybe a new idea for you but using thrive architects it's incredibly easy to use something called google fonts and these are web-based fonts that Google has collected for you and so we wanted to find a complementary font that was also using google fonts so what you can do is in this case let's say you go to that website you say okay Latta is great I want to use that for my website then you're going to want to look up google fonts laptop and just make sure that laddo is a Google font because if it's not a Google font you can still use it on your website but it gets a lot more complicated on how you install that font so for our case we want to stick to fonts that are on google fonts so here we're like great we know latso is a google font so it's going to be super easy to install on our website with thrive architects and i'm gonna show you how to do that in a bit but now we want to find a font that pairs well with latte and what's great with google fonts is they show you popular pairings so here you can click on these different ones and see what look do you like for your fonts so here's lat so at the top and then here's a font called Oswald and after going through all of these my favorite was open songs so that's the second font that I cited to use from our website and because we use this pairings tool inside google fonts I know both of these fonts are fonts that work with google fonts so they're going to be easy to install so I wrote that down and that's it that's how you fill out your design code for your website.