In this learning content, we will take a closer look at the Text area and fonts in the Styling panel.
With the Text panel, you can make changes and edits to the text in the selected element. Through the Text panel, you can select the font to be used and edit other typographic options such as style, size, color, and line height. You can select, edit, or create new styles from the predefined styles.
Predefined styles affect both elements already added to the screen and new elements to be added. Additionally, since predefined styles serve as the default reference styles for elements, they cannot be deleted, but their properties can be modified or duplicated for reuse. Multiple styles can be applied to a single element. In one style, you can define properties related to the font, while in another style, you can make additions based solely on color. When another style is added to an existing style, it will change the corresponding properties of the previously added style.
Now let's take a quick look at text units. There are four units: pixels (px), points (pt), rems (root ems), and EMS.
- Pixel (px)
Allows you to set the text size in pixels.
- Point
The standard measurement unit for printed text. It allows you to set the text size in points.
- EMS
EMS scales font sizes proportionally based on the parent element. One em is based on the width of the capital letter M in the font.
For example, if a font is 12 pixels:
- Rems
A rem is calculated by taking your rem value and multiplying it by the HTML font size. It adapts to the browser's font size unless you manually change it in the code.
There are a total of 12 predefined styles. The common feature of these text styles is that they all come with the Poppins font family. Each text style changes in font style, font size, and color depending on where it is used.
This is the font style you can choose when you want to use the button element as a secondary type.
Medium comes with a font size of 16 px, a line spacing of 22 px, and a blue color.
Every Button element you add with drag-and-drop in Kuika comes with a blue background by default. Therefore, it comes with a font size of medium, 16px, a line spacing of 22px, and a white color.
These represent the HTML tags used to define main headings and subheadings. They appear as H1, H2, H3, H4, H5, H6, H6_white in Kuika. The main heading is expressed as H1. You can use other styles such as H2 and H3 to refine the design.
This is the style that appears when you drag and drop the Icon element onto the screen. It makes the Icon 20px in size and gray in color.
This ensures that the icon is 20px in size and blue in color.
Now that we have learned the default styles, we will examine the other fields available in the Text panel. We can specify these fields in order as font family, style, size and color, spacing, and options.
You can use any of the 19 fonts that come predefined on the platform. Examples of predefined fonts include Poppins, Montserrat, and Roboto.
Depending on the font family you select, you will see different font styles such as light, regular, medium, and bold.
In the Size section, you can specify the font size you want to use and change the unit. You can update the text color using the Color Picker.
This is where you can adjust the line height (Leading) and letter spacing (Kerning). The space between lines in the text is called line height. The ideal line height should be at least 1.5 times the font size for paragraphs and text blocks.
You can adjust the letter spacing (Kerning) depending on the font you are using or the style you want to create.
Caps
You can configure the upper and lower case settings of the text in the Caps field.
All Upper Case
Displays the written text or new text entries in upper case.
First Letter Upper Case
This option means that the first letter of all text you write will be capitalized, and the rest will be lowercase.
All lowercase
Displays the written text or new text entries in lowercase letters.
The mobile system offers different options such as underlined text, strikethrough text, and all caps.
Manage the italic display of the entered text.
You're ready to work with fonts in Kuika!
In this learning content, we will take a closer look at the Text area and fonts in the Styling panel.
With the Text panel, you can make changes and edits to the text in the selected element. Through the Text panel, you can select the font to be used and edit other typographic options such as style, size, color, and line height. You can select, edit, or create new styles from the predefined styles.
Predefined styles affect both elements already added to the screen and new elements to be added. Additionally, since predefined styles serve as the default reference styles for elements, they cannot be deleted, but their properties can be modified or duplicated for reuse. Multiple styles can be applied to a single element. In one style, you can define properties related to the font, while in another style, you can make additions based solely on color. When another style is added to an existing style, it will change the corresponding properties of the previously added style.
Now let's take a quick look at text units. There are four units: pixels (px), points (pt), rems (root ems), and EMS.
- Pixel (px)
Allows you to set the text size in pixels.
- Point
The standard measurement unit for printed text. It allows you to set the text size in points.
- EMS
EMS scales font sizes proportionally based on the parent element. One em is based on the width of the capital letter M in the font.
For example, if a font is 12 pixels:
- Rems
A rem is calculated by taking your rem value and multiplying it by the HTML font size. It adapts to the browser's font size unless you manually change it in the code.
There are a total of 12 predefined styles. The common feature of these text styles is that they all come with the Poppins font family. Each text style changes in font style, font size, and color depending on where it is used.
This is the font style you can choose when you want to use the button element as a secondary type.
Medium comes with a font size of 16 px, a line spacing of 22 px, and a blue color.
Every Button element you add with drag-and-drop in Kuika comes with a blue background by default. Therefore, it comes with a font size of medium, 16px, a line spacing of 22px, and a white color.
These represent the HTML tags used to define main headings and subheadings. They appear as H1, H2, H3, H4, H5, H6, H6_white in Kuika. The main heading is expressed as H1. You can use other styles such as H2 and H3 to refine the design.
This is the style that appears when you drag and drop the Icon element onto the screen. It makes the Icon 20px in size and gray in color.
This ensures that the icon is 20px in size and blue in color.
Now that we have learned the default styles, we will examine the other fields available in the Text panel. We can specify these fields in order as font family, style, size and color, spacing, and options.
You can use any of the 19 fonts that come predefined on the platform. Examples of predefined fonts include Poppins, Montserrat, and Roboto.
Depending on the font family you select, you will see different font styles such as light, regular, medium, and bold.
In the Size section, you can specify the font size you want to use and change the unit. You can update the text color using the Color Picker.
This is where you can adjust the line height (Leading) and letter spacing (Kerning). The space between lines in the text is called line height. The ideal line height should be at least 1.5 times the font size for paragraphs and text blocks.
You can adjust the letter spacing (Kerning) depending on the font you are using or the style you want to create.
Caps
You can configure the upper and lower case settings of the text in the Caps field.
All Upper Case
Displays the written text or new text entries in upper case.
First Letter Upper Case
This option means that the first letter of all text you write will be capitalized, and the rest will be lowercase.
All lowercase
Displays the written text or new text entries in lowercase letters.
The mobile system offers different options such as underlined text, strikethrough text, and all caps.
Manage the italic display of the entered text.
You're ready to work with fonts in Kuika!
