Beta
Learning Hub
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.681 20h14.576c1.892 0 2.879-.98 2.879-2.831v-2.531C23.223 14.245 24 13.21 24 11.994s-.777-2.251-1.864-2.644V6.84c0-1.852-.987-2.84-2.879-2.84H4.681c-1.874 0-2.879.98-2.879 2.84v2.533C.747 9.783 0 10.802 0 11.994s.747 2.212 1.802 2.621v2.554C1.802 19.02 2.807 20 4.681 20zm15.608-3.02v-2.311c-1.135-.367-1.955-1.426-1.955-2.675s.82-2.308 1.955-2.675V7.02c0-.791-.426-1.178-1.177-1.178H4.835c-.76 0-1.177.387-1.177 1.178v2.283c1.162.351 2.007 1.423 2.007 2.691s-.845 2.34-2.007 2.691v2.295c0 .8.416 1.177 1.177 1.177h14.277c.751 0 1.177-.377 1.177-1.177zM1.545 11.994c0-.706.576-1.278 1.288-1.278s1.288.572 1.288 1.278-.576 1.278-1.288 1.278-1.288-.572-1.288-1.278zm19.622-1.278c-.711 0-1.288.572-1.288 1.278s.576 1.278 1.288 1.278 1.288-.572 1.288-1.278-.576-1.278-1.288-1.278zm-8.199-1.059v5.748h-1.733V9.656H9.271V8.246h5.663v1.411h-1.965z" fill="currentColor"/></svg>
Text

Text

In Vectornator, you can craft and refine your typography with precision controls that can change your font's design, styling, and attributes. You can also import all of your favorite fonts into Vectornator with a simple drag and drop.

Adding Text

You can add Text to your document with just a tap by using the Text Tool in the Toolbar or by pressing T on your keyboard. This will activate Text Mode.

Then, tap or drag anywhere on the canvas. A bounding box containing the word Text will appear on your canvas.

Alternatively, you can just start writing by using the digital keyboard or any external keyboard. This will create a text box in the middle of your screen.

Note: The text is shown in your currently selected color, and uses the most recent font you have used.

When you are in Text Mode, a new panel will appear inside the Style Tab.

The Text Panel

In here, you’ll find options for:

(1) - setting the Font Family

(2) - Basic Styling (bold, italic, underline)

(3) - increasing or decreasing the Font Size up to 1000pt

(4) - Alignment options

(5) - Kerning, Tracking, Line Height

(6) - Fit bounds to text

Editing Text

Double tap on any text box to start editing the text inside it.

When you have a text box selected, you can change the text's font by tapping on the Font button (1). This will give you access to the Font list. You can also add your own fonts by uploading them to your device via the general iOS Settings.

Note: By selecting a text box, you will begin editing everything within it. If you want to instead edit a specific word or paragraph in your text box, double tap to select the specific text.

Editing Text using the Quick Actions Menus

After the text object is created, select the text frame to view the contextual widget that has some handy text controls that you use to modify text.

The Font Picker

On iOS14, the new Font Picker displays your most recently used fonts at the top of the list.

You can search for a Font by scrolling up or down, or simply tapping on one of the letters  on the right to jump directly to the fonts that begin with that letter.

TIP: When you manually adjust the typeface, font size or the line height, it will reposition itself so that the first baseline will always stay in place.

Kerning, Tracking, Line Height

At the bottom of the Text Panel, you'll find the Typography Section (5). This section allows you to manage the way that text appears in your design.

Kerning

Kerning refers to the amount of space between two individual characters in a line of text. It can also refer to the process of adjusting that spacing to improve legibility and avoid awkward-­looking gaps between your letters.

To change this spacing manually, you can adjust the slider with your finger or a pencil. This slider allows you to even reduce the spacing to a negative value, which will probably cause your font's letters to overlap.

Read more: What is Kerning?

Tracking

Tracking is also related to the amount of space between letters in your text, but on a global scale. Rather than adjusting the space between two specific characters, Tracking adjusts the space between all of your characters at the same time.

To adjust your text's tracking, select all of the text you wish to alter and use the Tracking slider to adjust.

TIP: Tracking involves adjusting the spacing throughout the entire word. Once you’ve determined the right spacing between each letter, Tracking can be used to change the spacing equally between every letter at once.

Line Height

Line Height refers to the spacing between the baselines of the typeface.

When you create a new text, its line height will automatically adjust to match its font size.

To change this setting, you can use your finger or a pencil on the slider to adjust the value. Observe how the distance between your lines of text decreases or increases depending on which way you adjust the slider.

TIP: Line Height will give you more precision while creating text with several lines or paragraphs.

At the moment, it's not possible to set a negative value to Line Height, but we're considering adding this option. If you are interested in that, you can upvote the request here to speed up the process of development.

Fit Bounds to Text Size

You can tap the Fit Bounds to Text Size button to resize the bounding box around your text. Once you've set your text to the correct size, it's a good idea to do this. It will allow you to edit and move your text precisely, and keep your document cleaner.

You’ll find this button at the bottom of the Text Panel.

Rotate the Text

Tap and hold the orange Pivot Point at the top center of your text box and drag it to rotate the text box to the left or the right..

You can also do this by activating the Rotation Tool in the Toolbar.

TIP: Holding a second finger on the canvas while rotating a text box will snap the rotation to 45º or 90º.

Changing the Text Color

In the same way that you can change colors for a shape, you can also change the color of your text by editing the Fill well inside the Style Tab.

Alternatively, you can apply a gradient to the text and change the direction of the gradient. Remember that this will apply the gradient to the whole text inside the text box.

While you have a text box selected, you'll also activate another panel inside the Path Tab in which you can:

  • Create Outlines from Text
  • Place Text on Path

Create Outlines from Text

To convert text into shapes, select your text box and tap the button at the bottom of the Path Tab labeled Create Outlines from Text. This will allow you to edit the text in the same way you would edit any other vector paths.

But, converting text to outlines is a one-way process. After you change your text into shapes, you won’t be able to edit the text itself again, so it’s better to convert a few words and not an entire paragraph, unless you're certain that you won't need to edit your text again later.

TIP: When you convert text into vector shapes, each letter will be divided, so use guides or group the letters after the transformation to keep the alignment of the word intact.

Placing Text on Path

To add a text to a vector path, you’ll need a text box and a path. Select them both using the multi-selection tool (1) and then tap on the Place Text on Path button (2) at the bottom of the Path Tab.

By selecting a text box, you will apply this edit to all the text within it.

If you want to instead apply this edit to a specific word or paragraph in your text box, double tap to select the specific text before you tap the button.

Use custom fonts

Starting with iOS 14, you'll need to install custom fonts to Vectornator via another app. That's why we decided to launch a new app called Fontinator that perfectly integrates with Vectornator and allows you to install system-wide fonts in just few steps.

You can access it by going to the Font Library. Simply swipe left from the Home Screen to get into the Settings tab, and then tap the Font Library button.

On your first access, you will immediately be redirected to the App Store where you can download the Fontinator App for free.

Head over to this section to know How to use Fontinator and install custom fonts on your iOS devices ➞

Design your own Font

As designers, we know that you can never have enough fonts. Thankfully, you can use Vectornator to design your own custom font!

Learn how to do it with Will Paterson.

Using SF Symbols

To import SF Symbols into your document, open the Import Tab, and then open the SF Symbols Tab (1) by tapping on the icon at the bottom right.

Then, just type a keyword into the Search Bar (2) at the top of the Import Tab.

Once you've typed your keyword in the Search Bar, press Enter to show the results. Then, you can scroll down through your search results and tap on a symbol to immediately import it onto your artboard, or you can drag and drop a symbol onto a specific place on your canvas (3).

You can use Apple's SF Symbols library freely in your projects (over 2.4K icons).

SF Symbols are text objects, which means that they support all font weights: To change, use the font-weight selector in the Inspector.

SF Symbols are text characters, meaning you can easily vectorize them with the Outline Text feature.

Emojis

Emojis can add a fun personality and spark to your designs, allowing for more emotive and fun creations.

This level of freedom and expression is available in Vectornator straight in the text editor. Any emoji can be exported just like any other text box.

Download
Download the PDF version here.
Last Updated on Jun 17, 2021
Was this useful?