Text

Adding Text

You can add Text to your document with just a tap by using the Text Tool (1) in the Toolbar, or by pressing ~key~ T ~key~ on your external keyboard. This will activate the Text Mode and a specific panel will appear at the top of the Style Tab (2).

Then, tap or drag anywhere on the canvas. A bounding box containing the word "Text" will appear on your canvas. Now, you can start writing by using the digital keyboard or any external keyboard (3).

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

‍The Text Panel

When you are in Text Mode, the Text Panel will appear at the top of the Inspector, where you can 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 – Text Alignment options

5 – Adjusting the Kerning,

6 – Changing the Tracking,

7 – Adjusting the Line Height

8 – Fitting bounds to your text

9 – Converting Text into vectors

Editing Text

Double-tap using the Selection Tool on any text box to activate the Text Mode and start editing the text inside of it.

You can change the the font of your text by tapping on the Font button (1). This will give you access to the Font Picker. 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 to edit all the content contained within the text box. If you want to instead edit a specific word or paragraph in your text box, double tap and then drag to select the specific word(s).

Editing Text using the Quick Actions Menus

After the text object was created, select the text frame with the Selection Tool (1) to show the contextual widget that has some handy text controls that you can use to modify your text. The text controls will appear only when you select a box which will allow you to:

A – Change Font Size

B – Choose the Alignment of your Text

C – Fit the Text into the bounding box

The Font Picker

On iOS14, the new Font Picker displays your most recently used fonts at the top of the list (A). You can search for a Font by scrolling up or down, or simply by tapping on one of the letters (B) on the right to jump directly to the fonts that start with that letter.

Pro 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 which allows you to manage how your text will appear and as well to set the Kerning and Tracking properties of your letters. Additionally you can set here the Line Height properties of your text.

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 the spacing to improve legibility and avoid disruptive gaps between your letters.

To change the spacing manually, you can adjust the slider with your finger or a pencil. The slider allows you to even set the spacing to a negative value, which will probably cause the letters of your font to overlap. You are now able to adjust the kerning of a single character to improve the overall legibility of the text body.

Read more – What is Kerning?

Tracking

Tracking is additionally 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, the Tracking function adjusts the space between all of your characters simultaneously.

To adjust the tracking properties of your text, select all of the text you wish to alter and use the Tracking (2) slider to adjust.

Pro 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 simultaneously.

Line Height

Line Height refers to the spacing between the baselines of the typeface, it signifies basically the amount of space between the baseline of the top line and the baseline of the bottom line of text. 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 Line Height slider to adjust the value. Observe how the distance between your lines of text decreases or increases depending on how adjust the slider.

Pro Tip – The Line Height feature will allow 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 want to support the future implementation of this feature, you can up vote the request here.

How to Adjust the Text Bounding Box

Since our 4.13.1 update, we’ve added three new text bounding box behaviors for the Text Tool:

1. Auto width (the text box will expand horizontally when text is added)
2. Auto height (the text box will expand vertically when text is added)
3. Fixed width (the text box width remains unchanged when text is added)

‍

Create Outlines from Text

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

But, keep in mind that, converting text to outlines is a one-way process. After you convert 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.

Pro Tip – When you convert text into vector shapes, each letter will be divided into a separate shape, so it is advisable to use guides or group the letters after the transformation to keep the alignment of the word intact.

Rotate the Text

Tap and hold the orange Rotate handle 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 Rotate Mode in the Toolbar near the Selection Tool.

Pro Tip – Holding a second finger on the canvas while rotating a text box or an object will snap the rotation angle to 45º or 90º increments. You can read more about the topic in the Gestures & Shortcuts section ->

Changing the Text Color

In the same way that you can change the colors of your shape, you can also change the color of your text by using 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 contained within the text box.

How to create multi-colored text

With the new Multi Color Text feature, you can add different colors to different words or singular letters within the same text box, giving you more creative control and flexibility over your designs. The flexibility to apply multiple colors within a text is indispensable for marketing designers. Our feature is outstanding, as you can set an individual alpha value and stroke width for each letter or word.

This feature allows applying different colors to the stroke and fill of each selected word or singular letter. Activate the Text Tool ~ic-text~~ic-text~ and write text with your keyboard. Select a word or singular letter by tapping on the text box.

You can set the currently selected text's color and alpha value in the Fill ~ic-fill~~ic-fill~ and Stroke Section ~ic-stroke-width~~ic-stroke-width~of the Style Tab ~ic-style-tab~~ic-style-tab~or with the Color Widget located below the Toolbar.

Additionally, you can set a different stroke width and alpha value for each word or singular letter within the text bounding box.

Note: The Multi Color Text feature does not support multiple gradients within one text box. Only a single gradient can be applied to a text box.

When you apply multiple stroke colors within a text box and then toggle the stroke color off ~ic-toggle-off~~ic-toggle-off~, the multi-color stroke attributes will be lost. When the stroke is toggled on again ~ic-toggle-on~~ic-toggle-on~, the currently set stroke color will be applied to all text box elements.

Note: The Multi Colored Text feature does currently not apply to Text on Path ~ic-text-on-path~~ic-text-on-path~. Any multi-colored information is lost when text is placed on a path.

Placing Text on a Path

While you have a text box selected, you can additionally activate another button inside the Path Tab with which you can attach a text to a vector path. To do so, you’ll need a text box and a path.

Select both the vector path and the text by using the Multi-Select Mode (1) and then tap on the Place Text on Path button (2) at the bottom of the Path Tab. Alternatively, you can tap on the new icon (2B) inside the Quick Actions menu at the bottom of your selected shape without the need to open any Inspector.

When a text is moved along a path, the specific text properties such as kerning, tracking, and text style will be maintained and are still adjustable.

Note – By selecting a text box, you will implement all your edits to the complete text body contained within the selected text box.

Once you hit the Place Text on Path button, the path will disappear. You can still move your Text along the path by dragging it using the orange handle at the beginning of your text.

If you want to change the direction of your text, you can use the Reverse button (while remaining in the Path Tab).

Use custom fonts

You can access the freshly installed fonts by going to the Settings (1) tab of the Homescreen and then tap on Font Library (2).

On your first access, you will be immediately redirected to the App Store where you can download the Fontinator App for free. After that, if you tap on the Font Library button, the Fontinator App will open automatically.

If you have installed an earlier version of iOS14, 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 fonts in just a few steps.

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

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 the keyword in the Search Bar, press ~key~Enter~key~ to display the results. Then, you can scroll down your search results and tap on a symbol to immediately import it onto your art board, or you can drag and drop a symbol onto a specific place on your canvas (3).

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 defined as text characters, meaning you can easily vectorize them with the Outline Text feature.

Usage of Sf Symbols

You can use Apple's SF Symbols library for free in your personal projects (over 2.4K icons are available) but you cannot use these icons outside the Apple ecosystem and for commercial use of icons, logos.

You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.
– Apple Human Interface Guidelines, SF Symbols.

Apart from that, there’s also a list of symbols that can only be used to reference particular Apple technologies, like for AirPods, Airplay, Apple Watch, and so on.

Learn More: What are SF Symbols and how to use them in your design? ➞

Emojis

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

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