Text Boxes are places where customers can type their own custom text. The box sets the boundaries where text can be typed, and is represented on the canvas by a dashed line around the text. You can format texts in many ways to give customers further options.

To add a text box

You can add text boxes on Designs and on Templates, by clicking the Text Box button.

textbox.png

Each text box that you add will have a Name that you can edit, and a Unique Id for you to easily identify it. 

Transform the text box

Directly on the canvas or by expanding the Transform toolbox, you can transform the text box:

transform textbox.png

Format the text box

After selecting the element, expand the Character toolbox to format the text inside the text box. Click on each item to learn more:

character textbox.png

Font Option

You can apply one or multiple fonts to a text element.

  1. Select the text element
  2. Expand the Character toolbox
  3. Click to expand the Select a Font list
  4. Pick a font from the list
  5. A dialog will confirm that the Font was correctly applied

select-font.gif

New accounts will only have 1 font available, as Customily does not provide fonts. But 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 text element. To add more than one font option you can either use a font library or assign multiple font options by changing the Option number to the left of the font and choosing a new font.

font option 2.png
You can see a step-by-step guide on how to do that here.

 

Font Size

Text boxes in Customily 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.

  1. Select the text element
  2. Expand the Character toolbox
  3. Type in the Min and Max font size in points (pts)

font-size.gif

Tip

To preview how the Min or Max font size will look on your design you can click the next to them.

If the sizes you choose are too big for the text box, the size will paint red and you will see a warning letting you know that the font size should be smaller to fit within your text box boundaries.

too small.png

Alignment

You can align a text inside the textbox horizontally and vertically. 

- Horizontally: Left, Center, Right, Justified

- Vertically: Top, Center, Bottom

  1. Select the text element
  2. Expand the Character toolbox
  3. Select from the dropdown the Horizontal Alignment and the Vertical Alignment.

alignment.gif

Tracking and Line Spacing

You can adjust the tracking (character spacing) and/or leading (line spacing) of your text by inputting the values. Both tracking and leading are expressed in %.

  1. Select the text element
  2. Expand the Character toolbox
  3. Type in a value you want for Tracking or Line Spacing.

tracking-and-leading.gif

Automatic Multiline

When a text box has enough height to fit multiple lines, it is multi-line by default. However, in order to jump to the next line, customers will have to hit Enter (return). If you want the text to jump to the next line automatically, then you should activate Automatic Multiline. This way, when the text hits the boundaries, a breakpoint will be added automatically.
So for long texts, they will automatically continue to the next line without the customer having to press the Enter key.

  1. Select the text element
  2. Expand the Character toolbox
  3. Click the Automatic Multiline checkbox

automatic-multiline.gif

Keep in mind

If you have a Min and Max font size setup, when reaching the boundaries the text will first resize until it reaches the Min font size. Then it will jump to the next line automatically.

All Caps

By checking All Caps, you'll force whatever text a customer types into capital letters.

  1. Select the text element
  2. Expand the Character toolbox
  3. Click the All caps checkbox

All-caps.gif

Color the text box

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:

text color.png

Fill Color

You can apply one or multiple fill colors to a text element. 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!

  1. Select the text element
  2. Expand the Color toolbox
  3. Click the color swatch or the color picker 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). If you want to add transparency, just slide the Alpha control on the bottom of the chart.
  4. A dialog will confirm that the Color was correctly applied

fill-color.gif

Tip

You can add multiple color options to a text element. To add more than one color option you can either use a color library or assign multiple color options by changing the Option number to the left of the color swatch and choosing a new color.

multiple color.png
You can see a step-by-step guide on how to do that here.

Stroke

You can apply a colored stroke to the text element, 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.

  1. Select the text element
  2. Expand the Color toolbox
  3. Set the Stroke width
  4. Click the color swatch or the color picker to select a color for the stroke. 

stroke.gif

Texture

On some occasions, you can add texture to your text. This is exclusively available when working on templates (for now!).

  1. Open the template and go to step 2
  2. Select the text element
  3. Expand the Color toolbox
  4. Select the texture you want to use. Most textures have an opacity, so you can still see the color options behind them.

texture.gif

Important

Textures are only available in the Preview Step (step 2) of templates. This is because they are intended to give a more realistic effect on previews without affecting the print file (like glitter, wood texture, embroidery, etc.). If you want textures available on designs as well, you can vote for that feature here.

Advanced Settings

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

prefix.png

  1. Select the text element
  2. Expand the Advanced toolbox
  3. Set the Stroke width
  4. Click the color swatch or the color picker to select a color for the stroke. 

prefix.gif

Test how the text 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.

test text.png

Tip

If you type text and you don't see anything, go check your font size! It is because your font is too big for the size of your textbox, so the text doesn't fit. You can also resize the text box and make your textbox taller until you start seeing the text.

Share

Was this article helpful?

1 out of 2 found this helpful
Have more questions? Submit a request