Craft and refine typography with precision controls for type design, styling, and attributes. Import all your favorite fonts in different ways including simple drag & drop.
Add Text to your document with a tap using the Text Tool you find in the Toolbar or press “T” on your keyboard.
Then, tap or drag anywhere on the canvas. A bounding box containing the word “Text” will appear on your canvas.
Or start writing your own text by using the digital keyboard or any external keyboard.
Note: The text is shown in your currently selected color, and uses the latest font you have used.
In the meantime, 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 and decreasing the Font Size
4 > Alignment options
Double tap the text box to start editing your text.
You can always change you Font by tapping on the Font button (1). This will give you access to a scrolling area.
You can add how many fonts you prefer in Vectornator by uploading them via the general iOS Settings..
By selecting the text box, you will edit everything within it. If you want, instead, edit a specific word or paragraph in your text box, double tap to select the specific text.
The Font Picker
On iOS14, the new Font Picker displays the recently picked fonts at the top of the list.
You can search your Font by scrolling up and down or simply tap on one of the letter placed on the right to jump into that section.
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, there’s the Typography Section (5) in which you can manage the way text appears in your design as:
Definition: Kerning is basically the amount of space between two letters (or other characters) and the process of adjusting that space to avoid awkward-looking gaps between your letters and improve legibility.
To change this space manually in Vectornator you can simply slide with your finger or the pencil on the Slider, where you can even reduce the space using a negative value.
TIP: Kerning can make a big difference in projects that are text-heavy. By adjusting the Kerning level your projects will look more polished giving proportional spacing between each letter. But, letters with slanted sides (A, V, Y,…) or typed in Italic have a lot of negative space, pay attention to reduce or increase that. Kerning is about Visual Space, not actual space.
Definition: Tracking adjusts the amount of space between letters within a word.
In Vectornator, you can select the text you wish to alter and slide 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.
Definition: The Line Height is essentially 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.
With your finger or Pencil, simply slide the Vectornator Slider to adjust the value. See how the distance between lines decreases or increases depending on which way you use the slider.
At the moment, it's not possible to set negative values but we're considering on adding this option. If you want you can upvote the request here to speed up the process of development.
TIP: Line Height, or Leading, will give you more precision while creating text with several lines or paragraphs.
Fit Bounds to Text Size
With a simple tap of the Fit button, the bounding box will resize to that of your text. Being able to set the width of the bounding box will allow you to edit and move text precisely, and keep your document less messy.
You’ll find this button at the very bottom of the Text Panel.
Rotate the Text
Hold & Drag the Pivot Point (that orange point at the top center of your text box and rotate the text in the direction you prefer.
You can also activate the rotation button at the right of the selection tool (Toolbar).
TIP: Holding a second finger while dragging the pencil, will force the rotation to 45º or 90º.
Changing the Text Color
As you usually change colors for a shape, you can also change the text color editing the Fill inside the Style Tab.
Alternatively, you can apply a gradient to the text and easily change the direction. Remember that this will affect the whole text inside the text box.
When using text, you 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 “Create Outlines from Text”. This will allow you to edit the text as any other vector paths.
But, converting text to outlines is a destructive process and 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.
TIP: When you convert text into vector shapes, each letter will be divided, so use guides or group letters after the transformation to keep the alignments or the word.
Placing Text on Path
To add a text to a vector path, you’ll need a text and a path. Select them both using the multi-selection tool (1) and then tap on the button (2).
By selecting the text box, you will edit everything within it.
If you want, instead, edit a specific word or paragraph in your text box, double tap to select the specific text.
Use custom fonts
Starting with iOS 14, to use custom fonts in Vectornator, you'll need to install them via another app. That's why we decided to launch a new app 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 and then Tap the Font Library button.
On your first access, you will immediately redirect to the App Store where you can download the Fontinator App for free.
Install a new font using Fontinator.
To import a new font, tap the ⊕ button at the top center of the app (1).
Then, go to the folder and pick the fonts you would like to import from whenever you have them stored, either on your iPhone/iPad or in the iCloud Drive. (2)
Once you select the font, it will appear inside the Fontinator App, under the Need Installation section, and a new button will appear at the bottom of the screen Install Fonts. (3)
Selected all the fonts you want to install, then tap the Install Fonts button. (4)
Then tap Download this Profile button to download its configuration profile. (5)
Now head to your iPhone (or iPad) Settings > Profile Downloaded. (7)
Install your profile (8). You can always check if your Profile is installed by going to Settings > General > Profile. (9)
Once your fonts are installed in Fontinator, open your document and you'll find them inside the Font Picker and you'll be able to use them in your work.
Design your own Font
As designers, we know that fonts are never enough but.. You can use Vectornator to design your own custom font too!
Learn how to do it with Will Paterson.