By clicking on the elements added on the Workspace, 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. The edits you make on this style will apply to all elements where the style is added. In addition to the predefined styles, you can also create your own styles and use them on elements.
Font Family
You can use any of the default fonts on the platform.
Style
Depending on the font family you have selected, you can choose font styles such as thin, light, regular, medium, bold, etc.
Size and Color
You can change the text size (x height) in the Size section. You can set the color of the text with the Color Picker. Although the most commonly used font size (x height) unit on the web is pixels, there are other options:
Point
General unit of measurement for printed texts.
EMS
EMS scales font sizes proportionally, looking at the parent element. An em is based on the width of the capital letter 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.
Color
You can specify the color of the text by selecting it through the Color picker, by entering the RGB value or by entering the Hex code.
Options
The mobile system has different options such as text not affected by font size, underlined text, strikethrough text, all uppercase, all lowercase.
All Caps
Displays typed text or text to be entered in capital letters. Capital letters can impose a heavy burden on the reader, especially in long paragraphs. Readers interrupt the flow by announcing all capital letters in separate letters, making them difficult to understand. For longer texts, you may want to consider limiting the use of all capital letters.
All Lowercase
Displays typed text or text to be entered in lower case. All lower case letters make it easier for readers to write long paragraphs. Thin fonts are extremely difficult to read, especially in long paragraphs. Some characters are not very legible, which applies to the uneven weight distribution in a font. Therefore, how many pixels you choose for your body text font is very important.
Underline Text-Bold-Italic
There is an expectation on the web that underlined text indicates a hyperlink. If you are trying to emphasize, consider using italic or bold text (or make style changes by shifting elements in a range). To emphasize your text, use italics (left) or bold text (right) instead of underlining (which can be mistaken for a hyperlink).
Spacing
Spacing ⟶ This is the field 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 set the letter spacing (Kerning) according to the font you are using or the style you want to create.
