Curved Texts are places where customers can type their own custom text along a curve. The curved text sets the path and boundaries where text can be typed, and is represented on the canvas by a circle or ellipse with the text on it. You can format curved texts in many ways to give customers further options.
How It Works
When you add a Curved text to your design:
-
Shoppers will see a text input to type custom text algo a defined arc.
-
As they type, their custom text appears live in the design preview.
-
You control the curve, font, size, color, alignment, and styling.
- If multiple font or color options are added, shoppers will see options to pick from them.
In this article:
- Add curved text to your design
- Move, resize, and transform the text
- Style and format the text
- Apply color and outlines
- Use advanced settings (prefix, suffix, etc.)
- Test how it works for shoppers
To add a curved text
You can add curved texts on Designs and on Templates, by clicking the Curved Text button
Each curved text that you add will have a Name that you can edit, and a Unique Id for you to easily identify it.
How to move, resize, and transform the text
Directly on the canvas or by expanding the Transform toolbox, you can transform the text box:
How to style and format the text
After selecting the element, expand the Character toolbox to format the curved text. Click on each item to learn more:
Font Option
You can apply one or multiple fonts to a curved text element.
- Select the curved text
- Expand the Character toolbox
- Click to expand the Select a Font list
- Pick a font from the list
New accounts will just have a couple fonts available. You can easily add as many fonts as you want to your font list.
Learn how to import fonts into Customily here.
Tip
You can add multiple font options to a curved text. To add more than one font option you can either use a font library or assign multiple font options by clicking + Add font option and choosing a new font.
Font Size
The font size is independent of the curved text path dimensions (which can be edited in the transform toolbox). Curved texts have a font size range, meaning you can set a minimum and a maximum font size. This is to allow text to resize when customers type something super long (making the text smaller to fit more characters).
We recommend using the Max Size as the size that you want. The Min Size will be the limit of the resizing, to ensure that small texts still look good and are printable, leaving the value that comes by default is a great choice. If you don't want the text to be able to resize at all, you should use the same value on both.
- Select the curved text element
- Expand the Character toolbox
- Type in the Max (and Min if desired) font size in points (pts)
Alignment
You can align a text inside the path string:
- Left, Center, Right, Justified
- Select the curved text element
- Expand the Character toolbox
- Select from the dropdown the Alignment
Tracking
You can adjust the tracking (character spacing) of your text by inputting the values. Tracking is expressed in %.
- Select the text element
- Expand the Character toolbox
- Type in a value you want for Tracking
Text String length
The text string is the portion of the path where the text can be written. It marks the beginning and the end of the text. You can adjust both the start and end of the string to limit the path where the text can be written.
- Select the curved text element
- Expand the Character toolbox
- Type in a value for the String Start and String End. You can also adjust the text string by using the string handles on the workspace.
Text Side
The text side will determine where the text is positioned along the path if it's on its concave or convex side.
- Select the curved text element
- Expand the Character toolbox
- Select from the dropdown the Side
All Caps
By checking All Caps, you'll force whatever text a customer types into capital letters.
- Select the curved text element
- Expand the Character toolbox
- Click the All caps checkbox
How to apply color and outlines
After selecting the element, expand the Color toolbox to add color options to the text inside the text box. Click on each item to learn more:
Fill Color
You can apply one or multiple fill colors to a curved text. You can assign colors by Hex value, RGB-A, CMYK-A, or by using a color picker. The color chart will change from RGB-A to CMYK-A, according to the color mode of your workspace. The A stands for Alpha, which means you can also add transparency to your text colors!
- Select the curved text
- Expand the Color toolbox
- Click the color swatch or the pencil to select a color. Using the swatch you can add colors with Hex, RGB-A, or CMYK-A values (the last 2 depend on the color mode of your design). You can also use the color picker to choose a color from your screen. If you want to add transparency, just slide the Alpha control on the bottom of the chart.
- Click Apply
Tip
You can add multiple color options to a curved text. To add more than one color option you can either use a color library or assign multiple color options by clicking Add color option and choosing a new color.
Stroke
You can apply a colored stroke to the curved text, this can be a different color from the fill color. The stroke will apply to the text always, so if you have multiple font options and multiple color options, the stroke will apply to all of them.
- Select the curved text
- Expand the Color toolbox
- Set the Stroke width
- Click the color swatch to select a color for the stroke.
Tip
You can add multiple color options to the stroke. They will be independent from the text fill color options if you have them. To add more than one color option you can either use a color library or assign multiple color options by clicking Add color option and choosing a new color.
Advanced settings for curved text
The advanced settings let you add a Prefix and/or a Suffix to your text. This will be some fixed text that will be visible when customers start adding their custom text.
- Prefix: a fixed text will be added before the custom text
- Suffix: a fixed text will be added after the custom text
- Select the text element
- Expand the Advanced toolbox
- Set the Stroke width
- Click the color swatch or the color picker to select a color for the stroke.
Test how the shopper experience will look
At any moment while configuring your text box, you can test how it will look on your design, by typing on the spot that reads Type to try the text box.
This is just for you to test, whatever you type there won't be saved, and won't be visible to your customers ever.