You can edit text alignment and design from the [Text] tab in the right panel.
Here's what you can edit from the Text tab.
This article covers color, font, size, weight, layout settings, and text decoration.
Editing the text itself
Applying text styles
Color settings
Font settings
Size and weight (thickness) settings
Text layout settings
Line height
Letter spacing
Alignment
Direction (horizontal/vertical writing)
Text decoration settings
Shadow
Underline and italics
Tip: With the Text Style feature, you can manage fonts as well as size, letter spacing, and other styles all in one place.
Opening the text editing options
Select a text box.
Select the [Text] tab in the right panel.
If the panel is closed, open the right panel first.
Color settings
Use the color palette to set colors.
For details on how to set colors, see Setting colors with the color palette.
Note: Things to keep in mind when applying a text gradient
Settings that can't be used with text gradients
The following settings aren't available for text boxes with a gradient applied:
Text box background color
Underline
Shadow settings
Shadows can be applied, but they appear in front of the gradient color. If needed, consider using an image instead.About animation settings
Browser compatibility
Adding a transition (duration, delay, easing) to a gradient creates a smooth color change. This uses the CSS @property rule, which isn't supported in some browsers. For details, see the following: "@property" | Can I use... Support tables
When using conditional styles to change from "solid color → gradient," the text may disappear momentarily.
Elements that don't support text gradients
Text gradients can't be applied to form elements like <input>, <textarea>, or <select>.
Font settings
For how to set fonts, see the following help articles:
Size and weight (thickness) settings
Text size
You can set text size using the following four units. Choosing the right unit helps you build responsive designs and flexible layouts.
Tip: Font size and responsive design
We recommend using relative units like rem, vh, or vw for font sizes. Relative units automatically adjust text size when the screen size changes, keeping things readable on different devices.
For more on responsive design, see Setting up responsive design.
px
rem
vh
vw
px (pixels)
A fixed unit that doesn't depend on screen size or the parent box. The text is always shown at the size you specify, no matter the screen.
rem (relative unit)
A relative unit based on the font size of the HTML root element. The viewer's browser font size (usually 16px) is used as the base for rem.
Sizes are set as multiples of 1rem. For example, with the default 16px, "1rem" equals 16px, and "2.5rem" equals 40px. If the viewer changes their font size in the browser, elements set in rem will adjust automatically, improving accessibility.
Currently, there's no option to set the base size for 1rem.
vh (based on browser height)
A unit based on the browser's height (viewport). Text size changes depending on the screen height.
For example, "5vh" displays text at 5% of the browser height (viewport).
vw (based on browser width)
A unit based on the browser's width (viewport). Text size changes depending on the screen width. This is great for responsive designs where you want text size to adjust to the screen width.
For example, "5vw" displays text at 5% of the browser (viewport) width.
Weight (thickness) settings
Depending on the font, you can change the weight (thickness).
Text layout settings
Line height and letter spacing
"Line height" sets the vertical height for each line of text.
"Letter spacing" sets the space between characters — the larger the number, the wider the spacing.
Both are measured in %.
Alignment
You can choose from left, center, right, or justified alignment for text.
When set to justified, each line of text is adjusted with even spacing so that both the left and right edges line up.
Note that the last line will still be left-aligned.
Direction
Switch the text orientation between horizontal and vertical writing.
For details, see Changing text orientation (horizontal/vertical writing).
Text decoration settings
Shadow
You can add a shadow to text. Choose from preset shadows, or fine-tune the details yourself.
Setting | Effect |
X | Shift left or right |
Y | Shift up or down |
Blur | Blur amount |
Underline and italics
You can apply italics or an underline to text.
Frequently asked questions
Q. Can I save the design and layout settings I've applied to text and reuse them across my project?
Q. Can I save the design and layout settings I've applied to text and reuse them across my project?
A. Yes — with the Text Style feature, you can save and reuse designs and layouts.
align vertical writing horizontal writing letter spacing