In this learning content, we will take a closer look at the Text field and fonts in the Styling panel.
With the Text field, you can make changes and edits to the text in the selected element. Through the Text field, you can select the font to be used and edit other typographic options such as style, size, color, line height. You can select and edit the pre-defined styles or create new styles.
Predefined styles affect both elements already added to the screen and new elements to be added. Also, since predefined styles are the basic reference styles for elements, you cannot delete them, but you can change their properties or duplicate them. More than one style can be added on an element. In one style you can define the properties of the font, in another style you can add only color-based additions. When another style is added over an existing style, it will change the corresponding properties of the previously added style.
Predefined styles affect both elements already added to the screen and new elements to be added. Also, since predefined styles are the basic reference styles for elements, you cannot delete them, but you can change their properties or duplicate them. More than one style can be added on an element. In one style you can define the properties of the font, in another style you can add only color-based additions. When another style is added over an existing style, it will change the corresponding properties of the previously added style.
There are 12 predefined styles in total. The common feature of the predefined font styles is that they all come with the Poppins font family. Each font style varies in font style, font size and color according to the area 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 in blue with a font size of 16px and a line spacing of 22px.
In Kuika, every button element you add with drag and drop comes with a blue background by default. Therefore, medium comes with 16px font size, 22px line spacing and white color.
HTML tags used to define headings and subheadings. You can see H1, H2, H3, H4, H4, H5, H6, H6_white in Kuika. The main title is expressed as H1. You can use other styles like H2, H3 to elaborate your design.
It is the style that comes when you add the Ikon element to the screen with drag-and-drop. It makes the icon 20px in size and gray in color.
Makes the icon 20px in size and blue in color.
Now that we have learned about the predefined styles, we will examine the other fields presented in the text field. These fields are font family, style, size and color, spacing and options.
You can use any of the 19 fonts that come pre-defined on the platform. Examples of predefined fonts are Poppins, Montserrat, Roboto.
Depending on the font family you have selected, you will see different font styles such as light, regular, medium, bold.
In the Size section you can choose which font size you want to use and change the unit. You can update the font color with the Color Picker.
Let's take a brief look at the units of size type.
There are 4 units: pixels (px), points (pt), Rems (root ems) and EMS.
- Piksel(px)
Allows you to set the text size in pixels.
- Punto
It is the general unit of measurement for printing text. It allows you to adjust the text size in points.
- EMS
EMS scales font sizes proportionally by looking at the main element. An em is based on the width of the capital M of a 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.
This is the field for setting the line height (Leading) and letter spacing (Kearning). The space between lines in text is called line height. The ideal line height should be at least 1.5 times the font size for paragraphs and text blocks.
The letter spacing (Kearning) can be adjusted depending on the font you are using or the style you want to create.
There are different options such as mobile system, underlined text, strikethrough text, all caps.
Mobile system
In the mobile applications you develop, you should activate this option if you do not want the relevant device to change according to the user-defined text size.
Underlined text
When you select the underlined option, you emphasize to the end user that it is a link or you use it to indicate that it is an important field. You can differentiate this with the styling of the font.
Strikethrough text
Allows to cross out the text. It is an option often used to indicate erroneous, incorrect or invalid.
First Letter is big
It is an option that means that the first letter of all the text you write in the text text will be capitalized and the rest will be lowercase.
All Uppercase
Displays typed text or new input text in capital letters.
All Lowercase
Displays typed text or new input text in lower case.
You are ready to work with fonts at Kuika!
In this learning content, we will take a closer look at the Text field and fonts in the Styling panel.
With the Text field, you can make changes and edits to the text in the selected element. Through the Text field, you can select the font to be used and edit other typographic options such as style, size, color, line height. You can select and edit the pre-defined styles or create new styles.
Predefined styles affect both elements already added to the screen and new elements to be added. Also, since predefined styles are the basic reference styles for elements, you cannot delete them, but you can change their properties or duplicate them. More than one style can be added on an element. In one style you can define the properties of the font, in another style you can add only color-based additions. When another style is added over an existing style, it will change the corresponding properties of the previously added style.
Predefined styles affect both elements already added to the screen and new elements to be added. Also, since predefined styles are the basic reference styles for elements, you cannot delete them, but you can change their properties or duplicate them. More than one style can be added on an element. In one style you can define the properties of the font, in another style you can add only color-based additions. When another style is added over an existing style, it will change the corresponding properties of the previously added style.
There are 12 predefined styles in total. The common feature of the predefined font styles is that they all come with the Poppins font family. Each font style varies in font style, font size and color according to the area 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 in blue with a font size of 16px and a line spacing of 22px.
In Kuika, every button element you add with drag and drop comes with a blue background by default. Therefore, medium comes with 16px font size, 22px line spacing and white color.
HTML tags used to define headings and subheadings. You can see H1, H2, H3, H4, H4, H5, H6, H6_white in Kuika. The main title is expressed as H1. You can use other styles like H2, H3 to elaborate your design.
It is the style that comes when you add the Ikon element to the screen with drag-and-drop. It makes the icon 20px in size and gray in color.
Makes the icon 20px in size and blue in color.
Now that we have learned about the predefined styles, we will examine the other fields presented in the text field. These fields are font family, style, size and color, spacing and options.
You can use any of the 19 fonts that come pre-defined on the platform. Examples of predefined fonts are Poppins, Montserrat, Roboto.
Depending on the font family you have selected, you will see different font styles such as light, regular, medium, bold.
In the Size section you can choose which font size you want to use and change the unit. You can update the font color with the Color Picker.
Let's take a brief look at the units of size type.
There are 4 units: pixels (px), points (pt), Rems (root ems) and EMS.
- Piksel(px)
Allows you to set the text size in pixels.
- Punto
It is the general unit of measurement for printing text. It allows you to adjust the text size in points.
- EMS
EMS scales font sizes proportionally by looking at the main element. An em is based on the width of the capital M of a 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.
This is the field for setting the line height (Leading) and letter spacing (Kearning). The space between lines in text is called line height. The ideal line height should be at least 1.5 times the font size for paragraphs and text blocks.
The letter spacing (Kearning) can be adjusted depending on the font you are using or the style you want to create.
There are different options such as mobile system, underlined text, strikethrough text, all caps.
Mobile system
In the mobile applications you develop, you should activate this option if you do not want the relevant device to change according to the user-defined text size.
Underlined text
When you select the underlined option, you emphasize to the end user that it is a link or you use it to indicate that it is an important field. You can differentiate this with the styling of the font.
Strikethrough text
Allows to cross out the text. It is an option often used to indicate erroneous, incorrect or invalid.
First Letter is big
It is an option that means that the first letter of all the text you write in the text text will be capitalized and the rest will be lowercase.
All Uppercase
Displays typed text or new input text in capital letters.
All Lowercase
Displays typed text or new input text in lower case.
You are ready to work with fonts at Kuika!
