once you learn and understand the formatting text element thing, the next thing you should need to understand is how to change the formatting of your text. To change the text format, you need to change font size, font family, font weight, font alignment, stroke size, stroke color, and so many other things. in this video, you will see a step by step by guide to change the formatting of your text in web stories by each font elements.
Introduction to text formatting part II
Hello, and welcome to lesson 16 of the MakeStories 101 course. In this lesson, we are going to look at how to change the formatting of your text.
That is the font, the font family, then the font-weight, the font size, the alignment of your text, then the font formatting like changing it all to uppercase, lower case, then capitalized, bold, italic, and Underline. Then How do you change the letters Spacing, the line height, the stroke size, and stroke color.
In the last lesson which is Lesson number 15, we made this beautiful sample of a text.
Now in this lesson, we will format it. Lessons 15, and 16 are interrelated to each other as we have discussed all about formatting text elements in both lessons.
Font Family
The first thing that most people would like to do is change the font family of the text. For now, we have this set to Poppins.
No, here, you can see that when you click on this particular, my font or the font family picker. The first thing that you will be presented with is the My fonts.
MakeStories offers you a way to upload your own font into MakeStories.
How to do that is something that we will see in future lessons. For now, we will see how it makes sure this/ prioritizes your own fonts over the Google fonts.
The MakeStories have an option to have two things. Number one, your own font, and then the Google forms. In the initial phase, you will see all your fonts.
Once your own fonts get done, you will be presented with the Google fonts starting from here. Let's say we want to change this to Montserrat. we will click this and you will see that immediately we will have a cursor pointing or blinking in the font text field.
So we will click on Montserrat Here it is Google Montserrat font. We will click this and you can see that the Montserrat font is applied to this text element.
Font weight
Now, below the font, you can set it to the medium by default, you can change it to thin, You can change it to extra light or any font weight of your choice.
The second dropdown thing that you see here is for the font weight. Now when you enable bold over here. This will be changed to bold. If you change it to semi-bold, this bold option will not be highlighted.
A few select bold, the bold option will be highlighted over here using this particular picker called font-weight.
Font Size
You can change the font size. You can use the up-down arrow keys to increase or decrease the font size.
Now, if you don't want the particular font size to be a .25, you can select all, and now you can also press command and you can decrease the font size by Point one pixel.
If you want to reduce it by ten pixels, you will hold the shift and then you will press the up and down arrow. If you don't hold any other key and just press up and down, it will change by one pixel.
If you hold the command, it will change 0.1 pixels and if you press shift and then you'll change up and down it will change by 10 pixels. So let’s bring it back to 23 pixels.
Alignment
Now the next option that we have is alignment.
Here you can see that you have only one alignment tab. Right now, this text is left aligned. If you click this, it will change to make a center align, it will change to right-align, and It will change to align completely.
When you click it again, it will change to the left-align. So in this one-button only you will get all the ways to control your text.
Uppercase
The next option that you will see here is the uppercase.
when you click the first option, all the text elements will be changed to uppercase each and every letter inside your text element.
When you click the second option, everything will be changed to lowercase.
When you click the third option, everything will be capitalized. This means that the first letter of every word will be capitalized.
If you remove this, then whatever the initial formatting you've used, it will be applied.
Bold, Italic, Underline
We all are aware of the concept of bold, italic, and underline. B stands for Bold that applies the bold option to the text. The other option is Italic. It stands for changing, applying the italic option to the text. The next one is for adding the underline option.
Letter Spacing & Line Height
The next option is letter spacing. As the name suggests it will increase the space between each and every letter inside the text element.
Line height is the other option that we saw in the last video. You can drag-drop this, or you can even change it by pressing the up and down arrow key.
Stroke size
The next option that you have is the stroke size. Now, this is a great way to format your text, but we will see it in another text element.
Let’s take a text element and change this to #01. We will change the font weight to heavy and increase the font size to and we change this to heavy and I will increase the font size to seventy pixels.
Then we will go into my appearance tab and bring the alpha color to let's say, 10%. Then we will go into the text element tab and select the black color, which is already selected, and change the stroke size to one.
We will change it to black color from the swatch. To give you a more visual appearance, we will go to appearance and then color and change that 10% alpha level to 0%.
Now you can see that using the stroke property, you can create such a beautiful visual feel for your text element. With this, we complete the formatting part of your text elements.
All the formatting happens only in two tabs. That is the appearance tab and the text tab.
If you have any questions, again, feel free to reach out to us over live chat.
We will be more than happy to help you.
