Text box styles allow you to edit various properties like size, color, and alignment. In this article, we'll show you how to configure basic text styles.
How to Change Text Styles
Select a text box
Click the "Text" tab at the top of the screen
Choose the property you want to edit from the style menu
You can also adjust text size, line height, and letter spacing directly in the design view.
Size
Text size can be specified in four different units: px, rem, vh, and vw. Choosing the appropriate unit helps create responsive designs and flexible layouts.
1. px (Pixels)
A fixed unit that's independent of screen size or parent box dimensions. Text will always display at the specified size regardless of screen size.
2. rem (Root EM)
The rem unit is a relative measurement that's based on the font size of your HTML's root element. Your browser's default font size (typically 16px) serves as the baseline for rem calculations.When specifying sizes using rem, you'll work with multiples of this base value. For example, with the default setting of 16px:
1remequals 16px2.5remequals 40px
One of the key benefits of using rem units is improved accessibility. When users adjust their browser's font size settings, elements specified in rem units will automatically scale proportionally.
Note: Currently, we don't offer the ability to customize the base size of 1rem.
3. vh (Viewport Height)
A unit based on the browser's viewport height. This allows text size to scale with screen height.For example, "5vh" will display text at 5% of the viewport height.
4. vw (Viewport Width)
A unit based on the browser's viewport width. Perfect for responsive designs where text size needs to adjust with screen width.For example, "5vw" will display text at 5% of the viewport width.
Letter Spacing and Line Height
"Letter spacing" sets the space between characters, measured in em units. 1em represents standard spacing; larger numbers increase the gap between letters."Line height" determines the vertical space for each line of text.
Alignment and Text Direction
Text can be aligned left, center, right, or justified. When justified, text is spaced evenly between margins, except for the last line which defaults to left alignment.Text direction options include:
Setting | Description |
Horizontal | Standard horizontal text |
Horizontal (condensed) | Condensed horizontal text |
Vertical | Vertical text for Japanese fonts |
Vertical (English) | Vertical text for English fonts |
Color and Gradients
Text color can be set through the color palette, supporting both solid colors and gradients. For detailed configuration instructions, please see Setting Box Colors > How to Set Colors in the "Fill" Menu.
Note: Limitations When Applying Gradients to Texts
Combining with Other Styles
You will not be able to apply the following style settings, if you have a gradient applied to your text.
Change the background color of the text box
Add underlines
Animating
Browser compatibility
Transitions (duration, delay, and easing) rely on the CSS “@property” rule, and its support may vary across different web browsers. For details, please refer to the following page:
"@property" | Can I use... Support tables
In addition, you may encounter instances where the text briefly disappears, when utilizing conditional styles to transition from a "solid color → gradient.”
Using with Forms
You will not able to apply text gradients to Form elements like <input>, <textarea>, and <select>.
Italic and Underline
Add italic styling or underlines to your text.
Frequently Asked Questions
Q: Can I save text styles and reuse them throughout my project?
Q: Can I save text styles and reuse them throughout my project?
A: Yes, you can save and reuse text styles across your project using the Text Styles feature.