In this video we’re going to take a look at typography and global styling for typography, so, first of all, let’s take a look at the quickest and easiest way to change typography in possibly design. Let’s choose this button: we’ll select it for the context menu that pops out. We can click on the t symbol to open up the typography settings. Now this panel is broken down into two separate sections. The left hand side shows you all the fonts.

You currently have access to in the website that you’re working on you can, if you want to add additional fonts and we’ll take a look at that a little later. On the right hand, side. This is where you can choose various different types of typography. So, for example, if we open this up, you can see: we’ve got paragraph subtitle, heading 1, heading 2 and so on. We can also go ahead and change things like the size, the weight, the line height and the letter spacing for typography that we’re working on we’ve.

Also got this little cog icon if we click to open that up, you’ll see that opens up the styling panel from the left hand, side of which we can go ahead and make changes inside there for now, though, let’s keep this really really simple: let’s just change The typography on this button and on the on this button, let’s start by just changing the size of the text. If we increase this, you can see that increases the text size on the button itself. It also updates the typography option you can see. It now says custom where, before it set button, this is because we made some changes to it. So we’ve now taken this away from the global styling and made it a custom styled option by doing that, we’ve basically detached the typography styling from our global style and made it unique to this particular button.

We can go ahead and set this back to its previous standard, simply by choosing the typography drop-down and then just choosing the option for button. You can see that now picks up the styling it originally had. This also holds true if you change the font, so, for example, if we come over and change it to nanito, you can see the font updates and also the typography option changes back to custom again. If we go ahead and change the size of this and maybe adjust things like line height, if we want to reset that back to the global value, we need to come over. The typography drop down come down and choose button and all those parameters are reset back to their global option.

You’ll find these typography options pretty much anywhere. You have typography inside your website design. So, for example, if we come to this heading and click on that again, the typography option is inside there. We can click to open this up and all the same options are available. So if we go and change this to something like monsterat, you can see that changes we’ll change the size, we’ll change the weight.

All those are now changed to reset those values back to their global options. We simply need to go back and choose the typography style that we want in this case heading 4, and everything is now back to its original state. So we’ve seen how we can customise any of the typography. We’ve also seen how global styling has an impact upon the design and the styling choices that we make. But how do we go about actually seeing these global style options well to do that?

We come over to the left hand, side, click on the paint brush and that will open up the styling panel now inside the styling panel, we’ve already taken a look at this. In previous videos, where we’ve looked at the colors and using current styles in this example, though the paragraph subtitle above title heading and so on, these are your global typography options and you’ll see you’ve got this collection evident in every single design. We can’t delete these. We can edit them and make changes to them, but they will always be here whenever we open up any design in the BrIzy Cloud editor. So, for example, we can click on heading one.

We can select it and you can see that familiar panel now opens up, but making changes here will affect any way that references that global style, let’s go ahead and see how this works. If we use this subheading of philosophy and just check, we can see, this is using heading 4, one of our global styles. So let’s come over open up our styling panel and find heading 4 We can select that and start making changes. So, for example, let’s change the font and you can see now philosophy updates to show that new font, if we change it to a different font, you can see it updates again. If we make changes to things like the wait, it updates one more time, so we can make changes inside this panel and they will be reflected anywhere that uses that global style reference in this example heading 4.

Now, on top of this, we can also go ahead and create our own custom, styling definitions. So let’s come down scroll right to the bottom, I’m going to click add new. Once we do that, you can see that adds in a new style. In this example, new style number 11..

So what we can do is we can click on this and we can set up any style definitions that we want. So, let’s find a font, that’s very different to what we currently have DM serif text looks pretty good, we’ll increase the size of this we’ll set the weight and we’ll adjust the line height. So now we’ve set up all those definitions, but nothing is actually being changed on the page, because nothing is currently using that new style. So what we need to do is select something. In this example.

We’ll choose this heading: we’ll choose the typography option, we’ll change this from heading 4 or we’ll scroll down until we get to our new style number 11. We’ll click that and there you go so now – we’ve made changes, we’ve referenced that new global style we’ve just created, and we’ve used that on our page. So now we’ve seen how to create our own custom style. How about we take a look at how we can add our own custom fonts? So let’s go ahead, open up the styling panel, let’s come down until we find our new custom style and let’s select that we’re going to choose the option to add a new font, and that now gives us two options.

We can search and install a google font or if we have a specific font we want to use. We can upload it for this example, we’re going to stick to the google fonts. Let’s click on google fonts we’ll go ahead and search for the font, name that i want, which in this example is poppins, you can see there, it is we’ll select it and click continue. There. We go.

We’ve now added a new custom font. We click on done. So now we’re going to go back to our style panel, we’re going to find that custom style that we just created and select it, and now you can see there at the top of our list is our new custom font we’ve installed from google fonts. We can select it and that will now update our style to show exactly what we want. Finally, let’s go ahead and rename our style to give it something just a little bit more meaningful and unique.

All we need to do is simply come over to where it says new style number. 11. We can select this and we can simply type our own name in we’ll just call this custom heading there we go and that’s how we go about setting up global styling, editing, global styles, creating our own global styles and also overriding our own global styles. You