FONTS FOR DESIGNERS

"My experience tells me that there's always two very distinct types of users at this point. Now, typically, we've got website designers or people that understand branding and have got quite a reasonable knowledge of fonts. And then, often in business we've got some newbies in terms of design that don't understand it and would like to understand more. So in this session, I'm actually going to take three minutes now for... If you understand fonts, I'm just going to give you a quick three-minute overview, three tasks really, that you can now just go in the Fonts area here, just do these three tasks, and move on. And then, I'll go really slow for the final 20 minutes so that people can understand fonts and by the end of this session, you'll be just as good as those other designers that have moved ahead.

So what are these three tasks? Well, it comes down to using the AI Website Bots to do all the hard work for you. So what I'll do here, we're just in the Fonts area which is from Styles and then Fonts is the third tab along. Now, you can see here, I'll just drawer your attention to Heading 1. Now, in the onboarding, I chose Roboto Condensed because I didn't have my font there. I need Roberto Mono for my... That's in my brand guidelines. So here I will actually just remove this and type in RoAI Website Bots and you can see, I've got Roboto Mono here. Brilliant. I'm going to select that.

Now, I could go through all of these fonts and start replacing them but all I need to do now, I've chose Roboto as my typeface here so I'm just going to apply this typeface to all of them, just click this. Now, the button runs it and it goes and replaces them all for us. So you don't need to wait too long for that. You can see, it loads... The preview actually takes longer to load on the right. Pretty quick. So that's your first task, choose your first typeface.

Now, if you remember from the onboarding earlier, I said, "When you're choosing your heading, choose a conservative one. And then, for your more display ones, choose a more poppy one." Well, you've just seen that in the Editor where we can have Heading 1 and we can make it in this Heading 1 or we can give it another style and make it a bit more poppy. That's pretty cool, right? So what I wanted to do is show you now that all of these are in our conservative Roboto Mono, I just want to go and show you which fonts here to apply that more poppy typeface.

Well, there are three places to do it. I would do it in all the styles and later on in this video, I'm going to explain what all these styles are so you can skip ahead to those if you need to. There are indications here of what they do. So you go and replace all the styles with that more poppy one and then go and replace the widget title and the widget price. So it's the widget price, the widget title. I would do all of the styles. You can come back and change these later. As we move into Day 3, you might want to come back once you've designed and change a couple of these. And then, if you are using block quotes, you might change the block quote as well. So you're really just going to go and change those.

So for me, I know that my poppy one that I'm using for this Theme is Share Tech Mono. So I would simply go through and replace Share Tech Mono. Now, once I've done that, I can now come back up here and get the AI Website Bots to do the hard work for us. Well, in the Theme, let me just go... I'll show you this first of all actually. I've got Roboto Mono selected here but now I could take this typeface and go and make it a font. So for this Heading 1, I can choose the desktop size, the mobile size, the line height which is above and below the line, and the letter spacing between. I can also say which is the bold and regular that I want people to pick and choose from in the Editor.

And if you need to, you can actually lock down upper uppercase. You probably wouldn't ever lock down uppercase but you can do if you want to. Particularly, you might do that for the header font which you can see if I just jump back down here to menu, you can see our header text is there. This one, I might decide to make uppercase. Cool. So I think you get that pretty good.

So in here, I now would know that my Theme has made these pretty good for me to begin with and I can come back and change these if I want to. With the exception of two things. Now, as a designer you know that there are two things with fonts that make a real difference and its line height and letter spacing. So line height being the text above and below in the lines. And then, the letter spacing. Well here in 2023, it can be quite contemporary for, let's say paragraph text, to have quite a loose line height, almost double line height spacing.

So what we've said with the AI Website Bots is we've actually said to the AI Website Bots, "Choose..." Here, we've got three kind of presets with the AI Website Bots that they can go and apply, right? So we've got tight, regular, and loose. So if you do want a loose line height, just select Loose. And then, for your letter spacing, depending on your font, you might want it tighter or more regular or loose and you can play around with these. So just select one line height and one letter spacing and hit Apply and then you'll see that our AI Website Bots update in here. Then you can come over here in the preview and have a look and just play around with it.

Now, this is based on the fact that Moble have built hundreds of websites so we've built our AI Website Bots knowing the more common use cases. So it's most likely that we'll get you... If you're a designer, you want specific things, it's most likely we'll get you very close with the bot. So that's going to save you having to go through each of these font in the palette and make them all out one by one.

So you can just run the typeface. Then, you can go and choose some of these styles and I recommend you probably change the 12 or maybe at least the first 6 and then go and change the widget title, the widget price, and maybe if you like, the block quote as well. So that's it. And then, you'll just come and choose and have a play with the line height and letter spacing, hit Apply. Once you're happy in here, press Save. And that's it, that's the episode done. So that can really take you about 5 minutes but it's worth having a bit of play with it so I'd allow about 10 minutes to get this set up and then have a play and decide what your like best knowing that you can come into any of these fonts after you've used the AI Website Bots and tweaked them as you like."