Learn how to properly select fonts combination for your project. Explore fonts freely available through Google fonts, and then use a great tool to find great combinations to add some depth to your styles.
- [Instructor] Finally, we'll explore fonts so you can properly select fonts combinations for you project. In most of your project, you'll need a font you'll use for your header or titles and then another one for your text. So, this is how I go about it. I first go to fonts.google.com and then if you've never been to this website, most people in the design world and in development, have been at least once to this website. If you haven't, I'll walk you through how to find fonts and what are the options with google fonts.
So, the first thing you can do if you have a specific name of a font that you would like to look for, you can actually type it here and you're going to find it very quickly. If not, you can go by specific styles or categories of fonts. So you can go Serif, Sans Serif, Display, Handwriting. So for example, if we go for Handwriting types of fonts, this is how you would go about it, and then you can actually sort it by trending, most popular, and so on and so forth. There's many options to find your fonts and then you can find by specific styles what you can look for, so the number of styles, the thickness of the styles.
So, if you want something that's really thick, you can go and find the fonts that are really really thick and so on and so forth. So there's many options. Feel free to go through all of them if you want. So, the best way to find fonts is sometimes by key words and this is how I usually go about it. So, let's say you found a font that you like. There's multiple ways to use it. So if you click on the plus, what it will do is add that font to kind of a folder that it creates for you but you can actually select the types.
For example, do you want to have Regular 400 Italic and so on and so forth? Do you want to have all the styles in here? You can do that as well. So as soon as you add the fonts, so for example, if we want to have the Bold as well, we can add the Bold to our little folder that we created. So once you have that, the way to use it is either import it through a link, like so. So you can simply copy and paste this into your html or where you're going to use it.
So if you watch my course, Framer for UX Design, I explain how to use this in Framer, specifically, and what to do in order to do so. So there's multiple ways. There's also the import method where you can actually use it in css styles where you import the URL and then use whatever selections that you've made. Okay. So now you have a font that you like, or two, but you're not sure that they're working well together.
So you go to a website and please wear your sunglasses right now because it's fairly bright when you go to that website. So you need to go to fontpair.co and once you get to that website, it's fairly simple how to find fonts that go together. So, once you've found your fonts, so in our case, it's Lato that we're going to use in our project, you can simply go in here and type the font that you're going to use. Type enter and then it's going to give you font pairs that works well with Lato.
Okay, so once you've typed Lato, it's going to give you the right combination and you can actually see it so the title here is in Lato and then the body is in Merriweather. Then you can find other great combinations for your font. This is what I do. So, when I have a specific font in my head that I want to do something with it and I want to find a different font that I can work with, then this is where I go. Okay, so now that you're armed with resources to find ideas, colors, and fonts, we're ready to take a look at our project assets.
- Researching UI colors, styles, and fonts
- Using assets available in Framer
- Creating views
- Adding navigation
- Using classes and loops
- Importing a module to extend Framer
- Creating inputs
- Adding a detail view
- Adding final interactions
- Animating a popup
- Animating a function