In this video we’re going to be covering how to start using typography inside your designs in Brizy, now, there’s multiple ways in which you can access the typography settings. The quickest and easiest way is to set any of the elements that you want. For example, this button you see where we have the t icon that allows us to start working with the typography settings, so we click and open this up. You can see. We have two separate sections.

The left hand side shows us all of the predefined fonts and we can pick from any of the options inside you. We can add additional fonts in and we’ll take a look at that during this video. On the right hand, side you can see, we have any of our predefined styles things like button, paragraph subtitle heading one through six and so on. We can edit those by using the cog, icon and that’ll open up the styling panel on the left hand, side again, we’ll come back to that in a few moments. We can also go ahead and customise any of the size weight line, height and letter spacing options.

Let’s change the size of the font, that’s being used on our button, we’ll change this from 12 to 14, and you can see now instead of saying button underneath our predefined styles. It changes that to custom this just lets us know, we’ve made a change and it is no longer using the global styling option. In this example, the button style we can easily set that back by clicking and choosing our typography options and then selecting our predefined style of button. Setting that back to one of our predefined styles will then reset all the values to that default. Global style set of values, as you can see, the font size has now gone back to 12.

The same kind of thing happens if we change the font, so let’s just use something like monster-art alternative, and you can see that changes the font on the button and also changes the global style definition over to custom one more time again, if we come back and Just set this to button it’ll reset all those values to the default. Global styles you’ll find this typography set of options available any way you have typography available any widget at all inside the editor. So, for example, we’ve got these headings. This text, you can see, we’ve got the t icon. If we come down to these icons and select the text underneath we’ve got the t icon, so we can select and edit this typography anywhere on our page using the t icon and that will open up all the settings available.

So that’s the basic options inside the typography panel. But what do we have inside the global styling section? Let’s go and take a look, let’s open up our styling panel and you can see that we have a range of pre-defined styles. Now it’s worth noting with these predefined styles, we can’t delete these entries. You can edit them and change them, but you can’t remove them, so these will always be here whenever you are working inside Brizy, so we can easily edit any of these by simply clicking and we can change the values and this will then apply globally.

So, for example, let’s come over to our headings and let’s make a change to our heading, one we’ll select it and we’ll change the font to something completely different. Let’s go for this rows, one we’ll click on there and you see now anywhere. This is being referenced on, our design will update. So our titles, you can see, there’s our main heading using H1 and if we scroll through anywhere else where that’s being used will also be updated. So, for example, this one hasn’t changed.

So if you select this choose the typography tool you can see, this is currently using H2. Let’s change that to H1 and we’ll see that will pick up that font styling. So it’s very easy to make these global changes. Now, if we come back one more time change our heading one to something different again. So, for example, let’s go through and find something like this monster at alternatives, we’ll select that and that now updates anywhere the heading one is being used.

Everything else is left intact. So it’s very easy to make these global changes. You can also make modifications not only to the desktop variation, but also to the tablet and the mobile, so you can make changes to your heading, one based upon what device you’re currently viewing things on pretty cool. Next, let’s take a look at actually creating our own custom style, very easy to do we’re simply gonna scroll down we’re gonna click on add new, and that now adds in a new blank style. We can name this and we then go ahead and make any changes.

We want to create our custom style. Now we can go ahead and set any of the values for the various different parts, the size weight line, height and so on. Let’s start by adding in a new size we’re going to say this is going to be 56 pixels, we’ll set the weight to be semi-bold and we’ll leave the line height and letter spacing as it is, we’re also going to go ahead and choose a font that I want to use so for this example: let’s try this Notto serif, we’ll select that and we’ve now created our first style now. All that’s left to do is apply that to any of our elements. So let’s apply it to this heading.

Let’s select it click on the typography and this time we’re going to change this from heading 1, we’re going to scroll through until we find our custom style, we’ll select that you can see that now updates. That text does exactly the same there. On the first block, we’ll select it change that from heading 1 and choose my custom style as easy as that to apply that now. While I like the look of this, I want to change the font to something different. So let’s come back over into our style panel and let’s find our new custom style and click to edit.

This we want to add a new font, because the font that I want isn’t actually available inside this list. So, let’s click on add new font, and this will take us over into the option. We can add or choose any fonts that we currently have available now at the moment, we’ve only got the free version of Brizy installed. So if you have the Pro version, you can upload your own fonts, let’s stick to using just Google fonts for this example, we’ll click to add a google font. This then allows us to go ahead and search for the font that we’re looking for I’m going to search for pop-ins and then select the continue button.

That will then go ahead and install that into our copy of Brizy. Now i can go ahead and click on done and we now have that font available. So all I need to do is go back into my global styles, find the style that I want click to edit this and you see, pop-ins is now at the top of the list. If not, you can simply scroll through until you find it in the list of all the fonts that you currently have installed we’ll go ahead and choose pop-ins from our list, and you can see now anywhere that that style is being used. We’Ll update on our page, because this is now a global style.

So the final thing i want to cover is how easy it is to remove a global style. You can see that when we select a style, we’ve got this little X in the corner. That immediately allows us to delete that particular style. Now, there’s one caveat to this: the first 10 styles that we have, which are installed as part of Brizy itself, the paragraph subtitle and so on. They cannot be deleted.

You’ll find that when you click on one of those, then all that happens is it pops up with the information you can change, there’s no X in the corner. However, if you create any style that you want above those 10 initial styles, you can delete any of those at any time. So, let’s just get rid of the style we just created. Let’s click on that X and that’s now gone now. It is worth noting that, even though you delete that global style that you just created, it doesn’t remove all the styling definitions.

You’ve applied to any elements on your page. So, for example, where we’d applied that to this heading section you can see, the typography is exactly the same as when we had our global style. This means that you don’t have to worry about your design getting messed up. If you do delete one