Text
Add Text to Elements.
When you click on the elements you add, you can access the Text edits from the styling panel. You can adjust settings such as font size, color, or letter spacing. Elements with text content (such as Label or Button) come with a predefined style. Edits you make on this style will apply to all elements to which the style is added. In addition to the predefined styles, you can create your own styles and use them on elements.
The icon element is powered by a font. You can make size and color adjustments on the icon element from this section.
Font Family
You can use any of the default fonts on the platform.
Style
According to the font family you have chosen, you can choose the font style such as thin, light, regular, medium, bold.
Size and Color
You can change the font size (x height) unit from the Size section. With the help of Color Picker, you can determine the color of the text. Although pixels are the most used font size (x height) unit on the web, there are other options:
points (pt)
Rems (root ems)
EMS
Point
It is the general unit of measurement for print texts.
EMS
EMS scales the font sizes proportionally, looking at the parent element. An em is based on the width of a font's capital letter M.
For example, if a font is 12 pixels:
1 em is 12 pixels
2 ems is 24 pixels
1.5 ems is 18 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 change it manually in code.
Color
You can decide the color of the text by selecting it from the color picker, by entering the RGB value or by the Hex code.
Options
There are different options such as text that is not affected by the mobile system font size, underlined text, strikethrough text, all uppercase, all lowercase.
All Caps
Shows the written text or the text to be entered in capital letters. All caps can put a heavy burden on the reader, especially in long paragraphs. Readers interrupt the flow by announcing all caps as separate letters, making them difficult to understand. For longer texts, you may want to consider limiting the use of all capital letters.
All Lowercase
Shows the written text or the text to be entered in lower case. All lowercase letters make it easy for readers to write long paragraphs. Thin fonts are extremely difficult to read, especially in long paragraphs. Some characters are not very legible, it applies to uneven weight distribution in a font. That's why it's very important how many pixels you choose for your body text font.
Underline Text-Bold-Italic
There is an expectation on the web that underlined text indicates a hyperlink. If you're trying to emphasize, consider using italic or bold text (or make style changes by wrapping elements in a range). Use italics (left) or bold text (right) to emphasize your text, rather than underlining (which can be confused with a hyperlink).
Spacing
The area where you set the letter/line spacing. 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. You can adjust the letter spacing (Kerning) according to the font you use or the style you want to prepare.
Setting Text Properties on Elements
To set Text properties, you can follow the steps below:
In the UI Design view, select the element you want to set text properties for.
Click on the Styling panel.
In the Styles section, when you click on the three dots icon, you can click on Add New Style to create and save your Text styles to use on different elements or places.
With Custom Style, you have features like Font family, Style, Size, and Color.
To select a font family, you can use the Font Family option.
To set the text style, use the Style option.
There are style options such as thin, light, regular, medium, or bold. To set the text size, use the Size option.There are different units available such as pixels (px), points (pt), or em (em).
To set the text color, use the Color option. Determine the color you want using the color picker tool.
The styles found within the Text can vary depending on the elements. While all properties in the Text can be used in some elements, only limited properties are used in others.
Last updated
