You can edit text alignment and design using the [Text] tab in the right panel.
Here's what you can do in the Text tab:
This article covers color, font, size, weight, layout settings, and text decorations.
Edit text content
Apply text styles
Color settings
Font settings
Size and weight settings
Text layout settings
Line height
Spacing
Alignment
Direction (horizontal / vertical)
Text decoration settings
Shadow
Underline / Italic
Tips: Using the Text Styles feature, you can manage fonts, sizes, letter spacing, and other styles all in one place.
Opening the text editing area
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 text colors.
For more details, see Setting colors with the color palette.
Important: Notes on text gradient settings
Settings that can't be used with text gradients
When a gradient is applied to a text box, the following settings are not available:
Text box background color
Underline
Shadow settings
You can still apply shadows, but the shadow will appear in front of the gradient color. Consider using images if needed to achieve your desired effect.About animation settings
Browser compatibility
You can create smooth color transitions by applying transitions (duration, delay, easing) to gradients. This uses the CSS "@property" rule, which is not supported in some browsers. For details, see: "@property" | Can I use... Support tables
When using conditional styles to transition from a solid color to a gradient, the text may briefly disappear.
Elements that don't support text gradients
Text gradients cannot be applied to form elements such as <input>, <textarea>, and <select>.
Font settings
For details on how to set fonts, see the following help articles:
Size and weight settings
Text size
You can set text size using four types of units. Choosing the right unit helps you create responsive designs and flexible layouts.
Point: 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 your content readable across 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. Text always displays at the exact size you specify, regardless of screen dimensions.
rem (relative unit)
A relative unit based on the root HTML element's font size. The browser's default font size (usually 16px) serves as the base value for rem.
Sizes are specified as multiples of 1rem. For example, with the default 16px setting, "1rem" equals 16px, and "2.5rem" equals 40px. If a visitor changes the font size in their browser, elements set in rem adjust automatically, improving accessibility.
Currently, Studio.Design does not offer a way to customize the base 1rem size.
vh (based on browser height)
A unit based on the browser's viewport height. Text size scales according to the screen height.
Setting "5vh" displays text at 5% of the browser's viewport height.
vw (based on browser width)
A unit based on the browser's viewport width. Text size scales according to the screen width. This is ideal for responsive design when you want text size to adjust with the screen width.
Setting "5vw" displays text at 5% of the browser's viewport width.
Weight settings
Depending on the font you're using, you can adjust the weight (thickness) of your text.
Text layout settings
Line height and spacing
"Line height" sets the vertical space for each line of text.
"Spacing" adjusts the space between characters — higher values increase the spacing.
Both values are set in %.
Alignment
You can align text to the left, center, right, or justify it.
Justified text distributes spacing evenly across each line so that both the left and right edges are aligned.
However, the last line defaults to left alignment.
Direction
Change the text direction between horizontal and vertical writing.
For more details, see Changing text direction (horizontal / vertical).
Text decoration settings
Shadow
You can add shadows to your text. Choose from preset shadows, or customize the details yourself.
Setting | Effect |
X | Shifts the shadow horizontally |
Y | Shifts the shadow vertically |
Blur | Blurs the shadow |
Underline and italic
You can apply italic or underline decorations to your text.
FAQ
Q. Can I save text design and layout settings to reuse them within a project?
Q. Can I save text design and layout settings to reuse them within a project?
A. Yes! Using the Text Styles feature, you can save and reuse your design and layout settings.
align vertical text horizontal text letter spacing