How to Create a Color Font With Adobe Illustrator and Fontself Maker

Final product image
What You’ll Be Creating

Creating fonts has never been so fast, fun
and easy as with Fontself, a powerful extension for Adobe
Illustrator and Photoshop CC. In this tutorial, you’ll learn how to make a color font.

Fontself allows you to create a fully
functional font with all the bells and whistles that most professional fonts
have (kerning, ligatures, etc.), and the most exciting thing about it is that it helps you to create a color font!
You can make your imagination go wild and add any shapes and colors you want (including gradients and other effects) to your characters. 

Apart from creating color fonts, that can be used in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018, you can use Fontself to create standard “non-color” vector fonts that can be used in any other software like older versions of Adobe CC apps, CS6, Microsoft Word, and many others.

fontself

Can’t wait to try
it out? 

Thousands of creatives from Adobe,
Google, Apple, Microsoft and other well-known companies already use Fontself. What
is also cool about it is that it is 100% indie software that was created by
three passionate developers with a goal of bringing us a user-friendly font
creation tool. And they made it!

Let’s go through the whole process of
creating and using our own color font in Adobe Illustrator CC 2018 and Fontself Maker!

1. How to Draw the Letter A

Step 1

When I’m creating a font from
scratch, I usually start by depicting a general idea. This time I decided to create a font in a colorful line-art style.

I started with a rough sketch of every
letter, trying to make each of them unique yet preserving the overall style.
I’ll be using this sketch as a guide for the outlines that we’ll be making in
Adobe Illustrator.

Please note that Fontself Maker works with Adobe Illustrator CC 2015.3 and newer but to use color fonts you’ll need CC 2018 so don’t forget to update if you haven’t done so yet!

font sketch

Step 2

Begin by creating a New Document of desired size in RGB Color Mode. If you select other Color Mode, all colors will be turned to RGB even if defined in CMYK or if the document in the CMYK color space. You can learn more about color space in Fontself from their help page

Let’s start with the letter A. Take the Polygon Tool (you can find it in the
same drop-down menu as the Rectangle
Tool (M)
) and single-click anywhere on the Artboard. Set the number of Sides to 3 and make a triangle.

Set its Fill color to None and
its Stroke color to dark purple in
the Color panel. Now, in the Stroke panel (Window > Stroke), set the Weight
to 2.5 pt and Cap to Round Cap.

Now we can delete the bottom part of the
shape that we don’t need. Take the Direct
Selection Tool (A)
and click the bottom edge of the triangle. Hit the Delete key (or Backspace if you’re on a Mac) to delete it.

use the polygon tool

Step 3

Select the shape with the Selection Tool (V) and hit Enter to open the Move window. Set the Horizontal value to 25 px and Vertical to 0 px, and click Copy to duplicate the shape and move it to the right.

move the shape

Step 4

Keeping both shapes selected, take the Shape Builder Tool (Shift-M), hold down
Alt, and click the piece on the right
to delete it.

use the shape builder tool

Step 5

Copy the first shape and resize it to make a tiny triangle. Place it at
the bottom, creating the feather of an arrow. Select the shape, hold down Alt, and drag it up to create a copy. Add
two more copies and attach them along the left edge of the triangle.

Group
(Control-G)
the created elements of the feather and
double-click the Reflect Tool (O). Select the Vertical Axis and click Copy to flip the shape to the opposite
side.

use the reflect tool

Step 6

Take the Ellipse Tool (L), hold down Shift, and make a 10 x 10 px circle with
dark-blue Stroke and turquoise Fill color.

Tip: Use the Eyedropper Tool (I)
to pick the fill or stroke color or any appearance settings and apply them to
other objects. You can access the options of the Eyedropper Tool (I) by double-clicking
it in the Tools panel, and then you can tick the
settings that you want to pick and apply.

add circles with the ellipse tool

Step 7

Copy the stroke by selecting it and dragging to the side while holding Alt. Use the Pen Tool (P) to add an anchor point in the middle of the line. Then
use the Delete Anchor Point Tool (-)
to delete the point on top of the stroke.

add another stroke

Step 8

Take the Pen Tool (P) or the Line
Segment Tool ()
and hold Shift
to make a horizontal line across the letter. This is going to be the bar of the
letter A.

Copy (Control-C > Control-F) the stroke and drag it down. Make it shorter by moving the points
with the Direct Selection Tool (A).

add the bar of the letter

Step 9

Now use the Pen Tool (P) to create a zigzag line in the upper part of the
letter, as shown in the image below.

Add some more strokes on both sides of the
letter, making it look more detailed.

create a zigzag

Step 10

Now that the outlines of the letter A are
ready, let’s add some color! We can duplicate
(Control-C > Control-B)
the letter and Hide the copy in the Layers
panel by clicking the tiny eye icon, just in case we need to use these outlines later.

Select the visible copy and go to Object > Live Paint > Make.

make a live paint

Step 11

Now grab the Live Paint Bucket (K) and hover over the area that you want to
fill with color. Once you see a red outline, click the area to fill it.

Continue using the Live Paint Bucket (K) and selecting new colors in the Color panel to fill the triangles in the top part of the letter.

use the live paint bucket

Step 12

Now let’s go to Object > Live Paint > Expand in order to turn each colored
section into a separate object.

expand the live paint

Step 13

Use the Direct Selection Tool (A) to drag a couple of elements out, making
the composition more dynamic.

And there we have it! Our first letter is
finished! Let’s move to the next one and see what else we can use to make it
look unique.

drag out the elements

2. How to Design the Letter B

Step 1

I’m not using any snapping or special grids for this font,
because I want to preserve a bit of a handcrafted touch without making it
geometrically perfect or pixel perfect. However, to make the font consistent, we need to keep
all the letters of the same height (while the width will be different).

Turn on the Rulers (Control-R) and drag a couple of horizontal guides onto the
Artboard to mark the height of the letter A. We can access the Guides menu from View > Guides.

use the rulers and guides

Step 2

Let’s start with the stem of the letter B.
Use the Rectangle Tool (M) to make a
narrow rectangle of about 30 x 120 px
(remember to keep the height equal to the height of your first letter).

Select its bottom edge with the Direct Selection Tool (A) and delete
it.

Add a few horizontal lines and attach a
couple of 10 x 10 px turquoise
circles to the bottom of the shape. We can copy
these circles from our letter A.

make a rectangle

Step 3

Now let’s make a straight horizontal line
using the Pen Tool (P) and go to Effect > Distort & Transform >
Zig Zag.
Set the Size to 10 px, Ridges per segment to 5, and Points to Corner.

Click OK
and go to Object > Expand Appearance
to apply the effect.

Place the created zigzag inside the top
part of the letter and resize it to make it fit the rectangle.

make a zigzag effect

Step 4

Let’s create a rectangle of about 45 x 55
px
size and align it to the top and left edges of the letter. To do this,
select the stem and the created rectangle and click the stem once again to make
it a Key Object (you will see a
thicker selection around it).

Open the Align panel (Window >
Align
) and click Horizontal Align
Left
and Vertical Align Top.

align the shapes

Step 5

Let’s select the top and bottom right corners
of the rectangle with the Direct
Selection Tool (A)
and make them rounded by pulling the circle marker of
the Live Corners closer to the
center. We can also adjust the Corners radius manually from the control panel on top.

Tip: If you can’t find the top control panel after updating to Adobe Illustrator CC 2018, don’t worry! It’s still there, and you can turn it on in Window > Workspace > Essentials Classic.

Let’s delete the left edge of the shape.
Select the bottom left corner with the Direct
Selection Tool (A)
and press Delete
(Backspace on Mac).

Repeat the same for the top left point,
leaving only the arched shape.

Make a larger arc for the bottom bowl of
the letter B.

make the corners rounded

Step 6

Add a smaller arc inside the bottom
bowl. Make the letter more intricate by adding horizontal and vertical strokes.
Finish off the outlines by placing two circles inside the bottom bowl.

add details and strokes

Step 7

Let’s duplicate
(Control-C > Control-B)
the letter and keep the copy invisible
in case we need it later.

Select the visible copy and Object > Live Paint > Make. Use
the Live Paint Bucket (K) and the Eyedropper Tool (I) to pick and apply
colors to the elements of the letter B.

Let’s finish off the letter. Go to Object > Live Paint > Expand and
use the Direct Selection Tool (A) to
drag some of the colored parts out of the outline.

Awesome! The second letter is finished!
Let’s check out some more techniques that we can use for other letters and
symbols.

apply colors with live paint bucket

3. How to Draw the Letter C

Step 1

Take the Ellipse Tool (L) and start with the base of the letter by making a 115 x 115 px circle. Copy the created circle and Paste in Front (Control-C > Control-F). Decrease
the size of the copy to 80 x 80 px.

As you may notice, the letter is a bit
lower than the top guideline. We’ve left some space above the circle in order
to add a few details there.

make a circle for the base

Step 2

Take the Pen Tool (P), hold Shift, and make a vertical line across the
circles. Keeping the line selected, double-click the Rotate Tool (R) and set the Angle
to 12 degrees. Click Copy to add a rotated copy of the line.

Now press Control-D to repeat the last action and keep pressing until you get
30 copies to fill the circle.

Let’s group
(Control-G)
the created rays and hide
them for now.

make a vertical line

Step 3

Now let’s create a silhouette of the letter
C. Use the Add Anchor Point Tool (+)
to add two points on the right side of the larger circle and two for the
smaller one, as marked in the screenshot below.

Now we can use the Direct Selection Tool (A) to click the segment of arc between the created points and delete it. Repeat the same for
both circles.

add points and delete segments

Step 4

Now let’s reveal the hidden rays and select
all the elements of the C.

Take the Shape Builder Tool (Shift-M) and click the rectangles formed by
crossing lines. Don’t click all of them; leave some untouched space at the bottom
of the shape.

Now we can select the unneeded pieces of
the rays in the center of the C and delete them.  

use the shape builder tool

Step 5

Let’s break the pieces of the rays on the
left of the letter C.

Use the Pen Tool (P) to add a new anchor point somewhere in the middle of
the line and delete the top point with the Delete Anchor Point Tool (-). This way we detach the piece from the
edge of the letter.

Continue alternating the rays, making some
of them shorter and detaching others to add variation to the silhouette of the
letter.

break the lines

Step 6

Add some more arched strokes to the inner
part of the letter. Attach circles to the tips of the large arcs.

Duplicate the created outlines and use the Live Paint and the Live
Paint Bucket (K)
to add colors.

add more details and colors

Step 7

Object
> Live Paint > Expand
the shape and drag out
some of the colored rectangles. Great work! Our third letter is finished!

Go on and create more letters, numerals, and
punctuation, everything that you might need for your future font. Don’t worry if you don’t
make all the desired symbols at once; you can always reopen your font file and add them later.

expand the live paint

4. How to Make a Color Font in Fontself

Step 1

Now for the fun part! Since we have everything
prepared, we can finally create a font using Fontself Maker! 

First of all, let’s open the Layers panel and place all the letters
in alphabetical order, from left to right. Fontself will automatically assign the proper characters if your place them in the correct order.

We can rename the bottom guideline, setting it as a baseline.

rearrange the letters

Step 2

Now let’s make sure that all our letters
are aligned to the bottom and placed
on the baseline. Select your characters and click Vertical Align Bottom in the Align panel, using one of the characters as a Key Object.

align the letters to the baseline

Step 3

Go to Window
> Extensions
and run Fontself
Maker
. A compact window of the extension will load, and you can adjust its
size by dragging its bottom corners. It has a simple and user-friendly
drag-and-drop interface with pop-up hints and an online chat assistant that can help you with your questions.

open fontself maker

Step 4

Now let’s select our alphabet and drag it to the Fontself window. Here we have several options to choose from. If you
already have all the characters ready, you can use the ‘A-Z’ area and drop your letters there. Fontself will automatically place them in right order, giving each letter a proper name. 

Otherwise, if you don’t have all the characters finished yet, place your mouse
cursor over the ‘Any character (Batch)’
field and release the mouse key to upload your characters.

In our case, we’re making an uppercase
font, so all the letters will be the same for both upper and lower case.

add characters to fontself

Step 5

What is great about Fontself is that it
makes things so much easier: once we have arranged and aligned our letters, the
program will place them in the correct order, using the information from the Layers panel. Just make sure that you
drag and drop everything together, including the baseline.

If you need some more control
over the guidelines and you wish to add an ascender and descender, you can make
it too! Just add two more guidelines, rename them “ascender” and “descender”
in the Layers panel, and then drag and
drop them into Fontself together with your alphabet. Voila!

You can learn more about using guides in
Fontself from the help page.

Now we have every letter placed in its own
slot. From here, we can type something in the Live Preview window to check out how it looks and play with Letter Space, Line Space and Scale, if needed.

Clicking the tiny cog icon on the
right allows you to change the font size, alignment, and background color.

We can also expand the letter preview
window by clicking the tiny diagonal arrows icon in the top left corner of every preview
slot (circled in the screenshot below) or by double-clicking the glyph.

Fontself maker settings

Step 6

Here we have some more options for
each letter. We can drag the lines, changing the position of the ascender and descender and adjusting other settings.

glyph settings

Step 7

Once we’re happy with the letters, let’s
add other symbols and punctuation! To do this, just select the elements on the
Artboard and click the Batch button
in the Home window of Fontself. Your
symbols will be added and placed in the proper order.

add punctuation

Step 8

Now let’s take a look at some advanced
settings that are vital when creating any font. Find and click the Advanced button in the Home window of
Fontself.

From here, we can adjust the Spacing, Kerning, and some other
parameters that are important to make our font look balanced and consistent.

advanced settings of Fontself

Step 9

Let’s start with Spacing.

In typography, spacing or tracking is the amount of space between the characters, which affects the density and gives the font its relative openness or tightness. In fact, a good spacing will save you a bunch of time when creating a font, so make sure you start by adjusting it first!

There are several ways to work with spacing in Fontself. First of all, click on the Spacing Pad window and type some phrases there to see how the characters behave within a text. Now, in the grey area on the right, you can see a list of letters and their values. Here you can edit the spacing by entering precise values in the table.

adjust spacing in fontself

Step 10

Another way to edit spacing is to do it manually by clicking the character itself and dragging the dashed lines on the left and right sides of it. You will see all the adjustments in the Spacing Pad and in the Live Preview area which already has a sample text with all your characters.

edit spacing in fontself

Step 11

Now that we’re happy with the density of the text and its overall look, it’s time to adjust the kerning pairs by clicking
the Kerning button.

Kerning is the process of adjusting the spacing between specific character pairs to
achieve a visually pleasing result. In proportional all-caps fonts, it often
happens that letters in some common combinations (such as VA or AW) look
too far away from each other. In this case, we need to find such pairs and
adjust the spacing between them manually, creating kerning pairs. And Fontself has this function too! What is more, it
already has some common kerning pairs in the Live Preview window, so that you
can see the result instantly.

The same as with spacing, there are several ways to adjust
kerning. First of all, click on the Kerning
Pad
window and type some kerning pairs that you want to edit, for example
AVA. Now, in the grey area on the right, you can see the Kerning pairs window and type the values there manually.

make kerning pairs

Step 12

Another way to adjust kerning is to click
the character and drag the dashed line between the pair. The red line appears for
negative values, making the space between the letters smaller. The blue
line indicates the increasing space with a positive value that moves the
letters farther away from each other. Simple as that.

adjust kerning pairs

Step 13

The next important thing that you might
want to use in your font—and Fontself has this feature—is the use of ligatures!

A ligature is a combination of two or more letters into one symbol. For
example, in common combinations like ‘tt’, ‘fi’, and ‘ff’, we might want to change
some elements of the letters, such as crossbars, to make them look better together. Moreover, while working with color fonts, we can use ligatures in more creative ways, like making some words or names look fancy by adding new elements to them, such as particles, flowers or swashes. In this case, the whole composition can be used as a symbol, i.e. ligature. 

use of ligatures in fontself

Let’s say we want to merge two letters
together in ‘TT’ to make a single bar for them. Once you draw out the new letter, select it on the Artboard. Then open
the Fontself window and type ‘TT’ in the text area on top and click the Create Ligature button right next to
it.

add ligatures in fontself

Step 12

Once you’ve clicked the button, Fontself
will ask you what kind of ligature you want to create. Later on, you can
find both Standard Ligatures and Discretionary Ligatures in the OpenType panel (Window > OpenType) of Adobe Illustrator and see how they work.

types of ligatures in fontself

Step 13

The last but not the least function that
can make your font more unique and playful is using Alternates—the alternative versions of some (or all) characters
that add variety to the whole text. Those can be versions with other colors, outlines, or swashes.

For example, here you can see that in the
word ‘COLORS’, the ‘O’ letters are slightly different. This is how we do it.
Once you have the alternative version of the letter prepared, select it on the
Artboard and add it to Fontself. The program will ask you if you want to Replace the existing letter ‘O’ or create
an alternate glyph. Just click the Alternate
button, and there you have it!

add alternates in fontself

Step 14

Now that we have added all the characters to
Fontself, adjusted the spacing and kerning, and set the ligatures and alternates, it’s time
to name our baby!

Click the Font Infos button in the Home
window of Fontself and fill in all the needed information. The developers’
hints will guide you throughout the process. I can’t but mention their great
sense of humor in this part.

name your font and add info

Step 15

Finally, it’s time to try out our first
color font! Oh, I’m so excited!

To start with, we can test it right in
Adobe Illustrator by clicking the Install
button in the top part of the Home window of Fontself. Now you can select your font in the Character panel of Adobe Illustrator (Window > Character) and try it out by typing something!

install your font and test it

Step 16

Once you’re happy with the result, go ahead
and click the Export button in the
Fontself window to generate an OpenType file with your font and all the cool
features that we added to it using the extension. Exporting the font also allows you to Save your work and whenever you need to edit it again, you’ll just have to Open it in Fontself and there you have it!

export your opentype font

Congratulations! Our Color Font Is Finished!

Great work! Now we can have fun using
our color font in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018!
The process of adjusting and installing the font with the help of Fontself Maker was
so fun and easy that I haven’t even noticed how I finished all the steps
that usually make me bored.

I hope you enjoy creating characters
in Adobe Illustrator and turning them into a color font in Fontself as much as
I do. Feel free to try it out, and don’t forget to share your results in the
comments below or in social networks with #fontself!

Color Font in Fontself

If you like the typeface that we’ve created in this tutorial and you wanna play with it, feel free to grab the Fiesta Color Font at Envato Elements! In the archive you will also get vector files with all the characters to make your own lettering or to try out how it functions in Fontself Maker. Enjoy!