FONTSELF

MAKER
-Typography -
 Create a vector font, step by step
Using Illustrator to make OpenType fonts

Here’s what you’ll learn on this page:

 Prepare your artwork

 Turn your artwork into a font 
 Edit & reopen your fonts
 Delete or replace a glyph
 Non-Latin alphabets
 Accents, punctuation & more
 Set font metrics with Illustrator guides

Prepare your artwork

Draw any letter, character or symbol as a single object. So if you’ve got complex shapes, you
can Group them or use the Pathfinder > Unite tool, after turning on the Remove Redundant
Points option in the Pathfinder's options menu.

The actual size of your shapes in an Illustrator document doesn’t really matter when you start a
new font. What matters is a consistent size for all the shapes (you can’t yet rescale glyphs in the
extension)

Other recommendations

 All letters should be aligned on a single row to import them at once.

 Alphabets should be aligned too, ordered from left to right: A to Z.
 Numbers should be aligned, ordered from left to right: 0 to 9.

Turn your artwork into a font

1. Select one or several shapes you want to convert into glyphs.

 2. Click on the Fontself panel buttons to turn selections into characters:- To create a single
character, type or paste the related character in the Fontself text field and press “Create
Glyph”. - To create a whole alphabet, press the “a-z” button if it’s a set of lowercase
letters or press “A-Z” for uppercase.- To create any other set of characters, press Batch.
Glyphs created with this method get assigned with a unique character key that you can
change (it looks like an empty square). They are actually Private Use Area (PUA)
characters you can copy/paste in other apps.
3. Drag & drop on the Fontself panel also works as an alternate way to create glyphs. Just
drop your selection on top of the relevant area.
4. Adjust the baseline & margins around each glyph in the Fontself panel (just click &
drag), and you can also change the keyboard key by typing a new character below each
glyph.
5. Press Save to save your font as an OpenType .otf file and click on the Open Font link in
the green alert to install the font on your operating system.

On Macs, you can also press Install to automatically generate & install the font right from
Illustrator, so it shows up automatically in your Character palette. But mind that it’s actually
installed in a specific font folder that is not accessible to other apps. Use Save for all other use
cases.

That’s about it. Now rince, repeat and have fun!

Edit & reopen your fonts

While you save your work directly as a font file, you can reopen and edit the fonts you’ve
created in Fontself very easily: just press the “Open” button.

Note that you cannot yet edit any font that wasn’t built with Fontself. You can however open any
font created with this tool.

You can change the margins, baseline and character for each glyph you’ve created, and also
change the global spacing between characters & text lines.

You can easily rename any glyph by clicking on the text below each glyph: just type (or
copy/paste) the character you want. Easy!

Delete or replace a glyph

To remove a glyph just roll over it on the Fontself panel and click on the crossed circle ⊗

If you want to update a glyph with a new design or replace it with something different, no need
to delete it: just select the new shape (eventually along with a horizontal guide to precisely define
its baseline), enter the same character you want to replace and press the Create Glyph button, and
click on Replace.

Non-Latin alphabets
Fontself runs well with Latin-based languages and Cyrillic, but is still not yet optimized for non-
Latin languages like Arabic, Hebrew, Thai, Greek, Chinese, etc.

Our goal is to broaden support to more scripts later on, when we can properly manage key
OpenType features like right-to-left writing flow.

These updates will be released as part of our free updates.

Now, that being said, you can assign any Unicode character to a glyph, so it could also be a
single character in a non-Latin script that is not yet supported by Fontself, like a Chinese 爱 or
an Arabic ‫ﷺ‬.

Accents, punctuation & more

As long as you can type it, you can assign any character to any shape or image you want. And if
you ever dreamed about making custom bullet points or an alien language, you’re good to use
any of the following:

 Accented characters like à, È, ñ, å

 Other characters like ø, ß, ş
 Non-Latin characters like Ω, β, Д, б 
 Symbols like €, √, ☞
 Bullets & Arrows like ☑︎, •, ⇒, ➽
 Punctuation like ¡¿, “, ’, or ❡
 Pictograms like ☼, ♛, ☯

You can easily rename any glyph you created by clicking on the text below each glyph: just type
(or copy/paste) the character you want. Easy!

#Tip: On a Mac, press Ctrl+⌘+Space to display the characters palette in most Mac app… well,
except in Illustrator :(
 Create accents, symbols & punctuation
Extending the character set of your fonts

With Fontself you can associate any shape to any Unicode character:

 Accented characters like à È ñ å

 Additional characters like ø ß ş
 Non-Latin characters like Ω β Д б 
 Symbols like € √ ☞
 Bullets & Arrows like ☑︎• ⇒ ➽
 Punctuation like ¡ ¿ “ ’ or ❡
 Pictograms like ☼ ♛ ☯
 Private Use Area (PUA) characters (i.e. for icon fonts)
 Custom space character (read at the bottom for details)

Whether you want to make custom bullet points or an alien language, you're covered.

NOTE: while Fontself supports any Unicode character, it is optimized for Latin & Cyrillic, but
not yet for non-Latin alphabets or left-to-right scripts (like modern Greek, Arabic, Hebrew,
Thai, etc.) We hope to support these scripts in future updates.

Finding a specific character

When you don't know how to type a character that you'd like to create, use a tool like
unicodelookup.com, Apple's Character Viewer (which does unfortunately not work from
Adobe's apps), Windows' Character Map or any other (like UniCodeChecker) to search for
characters by their name.

Making a single character

a) Use the Create Glyph button

 Select your character's object in Illustrator, type (or copy/paste) the character you want in
the text field Type any character and press Create Glyph. 
 You're done.
b) Drag & drop

You can alternatively simply drag & drop your shape into Fontself and rename it by editing the
text box below your glyph:

Making multiple characters 

There are 3 different ways to quickly create new glyphs:

1. Drag many shapes all at once

 Align all the shapes you want to import on a single line.

 Select them all and press the Batch button (or drag & drop them).

2. Smart Create 

You can import & automatically assign the name of many glyphs on one click. Just select them
and enter the same amount of characters, separated by a comma, like: A,a,B,b  or $,€,¥ or
Б,Д,Ж,И  or more sophisticated ffi.liga, f.alt2  to create ligatures and alternates):
3. Smart Batch

In Fontself v2.0 you can rely on the Smart Batch feature to automatically assign a character to
each object you import. Simply rename each object in the Layers panel with the exact character
key you want. Then import them, and boom, you're done!
Making characters from a Unicode value
To create a specific character, you can either enter its actual character - like ✔︎- or its Unicode
value with the prefix U+ - like U+FE0E  

Extra characters
By default, Fontself Maker automatically generates 7 extra Control glyphs for you:

 .notdef 
 NULL U+0000 
 New Line U+000A 
 Carriage Return U+000D 
 Space U+0020
 Non Breaking Space U+00A0 
 Soft Hyphen U+00AD 
The Space character is the only one of these specific characters that is visible in the glyphs list
and it has editable metrics, while all others are hidden and cannot be edited.

Custom space character

You can replace the ❝cruel emptiness❞ of the space glyph with your own custom shape by
typing a space key   or naming the related object U+0020 in your Layers panel.

⚠️This feature works fine in many apps and browsers but could not run properly in various
apps. 

🐛 Also, Illustrator CC currently has a bug that prevents custom space glyphs to be rendered as
expected when they are used within an OpenType-SVG color font. So please join us to ask
Adobe to fix this bug (you can upvote in just 1 click :) 

Default characters & PUA

When you drop arbitrary shapes on the Fontself panel, they are automatically assigned with a
unique character key that you can later change (they look like empty squares over an orange
background). This ensures that you can access to any glyph you made from the Glyphs panel, as
these characters are actually individual Unicodes from the Private Use Areas (PUA). 
Quotation marks and apostrophe
Many apps, including Illustrator & Photoshop, will automatically replace straight quotes "" by
curly quotes “” or apostrophe ' by ’ or even other quotation marks depending on your language
preferences. 

So if your font contains only the straight quotes characters, they will probably be displayed with
a different default font. But don't worry, there are a couple ways to solve this: by disabling the
automatic replacement feature or by adding additional marks to your font.

Disable the automatic substitution

 In Adobe apps, uncheck Type > Smart Punctuation... > Smart Quotes
 In Pages or Keynote, uncheck Edit > Substitutions > Smart Quotations
 In MS Word, uncheck File > Options > Word Options > Proofing > AutoCorrect >
AutoFormat > "Straight quotes" with “smart quotes”
Or on newer versions, uncheck Word > Preferences > AutoCorrect > AutoFormat as You
Type > "Straight quotation marks" with “smart quotation marks”

Create additional quotation marks

First, identify the additional marks you need (check this Wikipedia article to find which ones are
required for different languages):

 There are some basic marks:

' " ‘ ’ “ ” ‛ ‚ „ « » ‹ › 
 And there are more exotic ones too: 

❛❜❝❞❮❯
Once you've made your pick, just select and copy the text of the marks and follow this tutorial to
create your new glyphs. 

PRO TIP (time-saver when creating many glyphs)

Use the Smart Batch feature to process many quotations marks at once!
 Spacing
Editing the space around each glyph

Once you've imported your glyphs, you can directly preview and modify the space around all
characters, either globally or individually:

 Adjust the overall spacing around all glyphs by clicking on the buttons Letter Space +
and -.

 Move the spacing around each glyph by rolling over a glyph and dragging its left and
right side bearings (the vertical dashed lines).
Precise spacing
When you need to adjust a glyph more precisely, you can expand the current glyph view to get
more control options:

 Zoom in by double-clicking anywhere on the glyph cell (or click on the top left arrow
icon). 
 Adjust the Ascender and Descender lines by moving the horizontal lines.
 Enter numeric values for pixel-perfect alignment.
 And you can quickly review other glyphs by clicking on the < > chevrons.

Space spacing
 To adjust the width of your Space character, scroll to the first glyph cell and click and
move one of its side bearings:
Next step: learn to space like a pro
Once you're ready to optimize the space around your characters, click the button Advanced to
step further into the Advanced Spacing.
Advanced Spacing
Your goal is to define a harmonious rhythm of space between letters and words, first globally,
and then by fixing inharmonious spaces.

The amount of horizontal space between two glyphs (the spacing) is defined by the sum of the
spaces around each glyph (their left and right side bearing), plus an eventual correction to fix
problematic cases (the kerning).

Spend a great amount of care to balance the spacing of your font, as it will not only result in a
more legible typeface, but this will also prevent many kerning issues.  

The Advanced Spacing view

This view includes 3 different parts:

 The Spacing Pad - an editable text preview at the top - where you can interactively edit
horizontal metrics values for each glyph.
 The Live Preview - an editable text preview at the bottom - to see the impact of your
changes on a set of predefined texts including common spacing phrases.
 The Table of Values - on the right - to edit all the glyphs' spacing values.
Spacing 101
1. Adjust the scale of your font if needed (with the buttons Scale)
2. Adjust the global spacing for all glyphs (with the buttons Letter Space)
3. Adjust the individual spacing for each glyph

A traditional approach to this task is to start looking at a couple glyphs that serve a control
characters to define a rhythm with the most vertical and rounded shapes: nnnnn and ooooo for
lowercase, HHHHH and OOOOO  for uppercase.

 In Fontself Maker, scroll through the list in the Spacing Pad, and fit the space around all
characters so they visually match the volume of space around nn or HH 
 The side bearings for straight glyphs like H are usually bigger than those for curved letters
like O  

There are 3 different ways to adjust spacing:

 Click on a glyph and drag its left or right side bearings

 Click on a glyph and press the keyboard arrows to slide it horizontally (press Shift + click
on the left or right arrow to increment by 10) 
 Edit values directly within the table
  Once you have scrolled through the first list of glyphs, check the sample text in the live
preview below to see how the edits you make impact words. 
 You can then repeat this process for lowercase, uppercase, mixed cases, numbers &
punctuation and all other glyphs in your font via the related filter buttons:

Redefining spacing 

You can adjust the spacing values of all characters at once:

 Clear will reset all left & right side bearings to zero (no margins)
  Auto will recalculate all left & right side bearing, adding an extra margin
 Mono will force all glyphs to have the same width, so all characters are evenly spaced
(for monospaced fonts)
 Import Spacing will bring all the metrics from another font file into your current
typeface. More details in this article.

You should really spend as much time as you can to adjust all spacing before you start working
on the last part of your font editing: kerning.

One more tip

 To precisely adjust the width of your Space character, scroll in the Table of Values to the
bottom and change the width of the last character, displayed as  ⎵  :

Kerning
Editing the space between pairs of glyphs

Once you've properly spaced your characters, it's time to optimize the spacing around specific
pairs of characters. Click on the buttons Advanced and Kerning.

The Advanced Kerning view

The view includes 3 different parts:

 The Kerning Pad - an editable text preview at the top where you can also interactively
edit kerning values
 The Live Preview - an editable text preview at the bottom - to see the impact of your
changes on a set of predefined common kerning pairs.
 The Table of Kerning Values - on the right - to edit all the glyphs' kerning pairs. This
part can also display a list of Kerning Groups.

Kerning 101
As some pairs of letters remain inharmonious as you space your glyphs, you must manually fix
each pair. One approach to solve this task is to look at a common kerning pairs along with a
couple other glyphs that serve a control characters to define the rhythm you want to match: like
nnav for lowercase, HHAV  for uppercase.

 In the Kerning Pad, scroll through the list of the most common kerning pairs, click on the
last letter of each word and adjust the space, so that the volume of space between the last
two characters visually matches the volume of space between nn  or HH.
  On this screen, just mind to NOT adjust kerning between the control characters.

To create and modify kerning pairs, you can interactively move glyphs (the quick way) or edit
table values (the precise way).

Quick kerning
First, search for visual misplacements in the left side preview text. 

Once you've found a specific pair of letters that requires custom spacing, type some text in the
Kerning Pad to display the kerning pairs you want to adjust visually (you can also copy/paste
specific words from the bottom left preview). 

Then click on the second glyph of the pair that needs adjustment and modifiy their relative
spacing (the kerning value):

 You can either click & drag the vertical bar

 or you can press Left/Right arrow keys on your keyboard (using the Shift + Letf/Right
keys will increment values by 10)

This will automatically create or edit the kerning pair and update it to the bottom right kerning
table.

Precise kerning
To enter specific kerning values or create a new kerning pair without having to manually interact
with a glyph, simply enter the exact characters and values in the kerning table.

All changes will automatically be updated in all previews. 

Just remember to save these changes by reexporting your font (note that it's always worth
keeping backup files of different font file versions). 

Quick tip: need to edit a specific kerning pair? Don't scroll the table to find it: just enter the first
character in the Filter text field at the bottom right.

Kerning alternates
To adjust the values of any specific alternate, you can either click on a glyph in the Kerning Pad
and pick a variant for a visual adjustment, or just enter any character in the Kerning table and
pick from the alternates list. 

For alternates that feature similar shapes (like color variants), it is recommended to leverage
kerning groups so all the alternates' kerning values are automatically set to match their parent's
glyph. 
Kerning import
You can now bring all the kerning pairs & groups from another font file into your current
typeface. More details in this article.

Next step: work at light-speed with Kerning Groups 

Once you're ready to optimize the space around your characters, click the button Groups to step
further into Kerning Groups.
Kerning Groups
Save time by grouping similar shapes

Kerning groups
When you need to kern many similar glyphs at once, like A, À , Â  and Á , you can now save much
time by linking the kerning values of all accented glyphs to a single one, like the original A. 

So once you have kerned the two pairs AV and VA , all the other pairs like ÀV, ÂV, ÁV and  VÀ, VÂ,
VÁ will be automatically created. How cool is that? 😀

Now how about linking only the left sides of your C , G and Q with the kerning values from your
O - but only when it's the second letter of a kerning pair, like VO ?

Well, kerning groups can also be used to constrain a single side of glyphs. For instance, you can
link all kerning values related to the left side of the glyph Æ  to the pairs ending with an A, like TA
or VA , so you don't have to kern TÆ or VÆ .

Create kerning groups

The kerning table now contains 2 tabs, one for Pairs and one for Groups.

We recommend to start creating your kerning groups before making kerning pairs in order to
avoid duplicate work.

 A kerning group is created when you assign a specific character (the group master) to the
left side or the right side of another glyph, based on their shapes' similarity.
 A kerning group starts having an impact when you create a new kerning pair (the master
pair) that involves the master character.
 All the group members will then get the same kerning value, and you can view all the
sibling pairs that have been generated by clicking on the + sign on the left side of a
master pair.
In other words, you can tell Fontself that the left or right side of a glyph should get the same
kerning value as another character, thus leading to precise adjustments.

Kerning group exceptions

If you need to apply a different value for a specific kerning pair that is part of a group, you can
unlink the value from the master pair by clicking on the lock icon:

Ok, so which groups to create?

Well, that will highly depend on the design of your typeface, but here are a few tips.

Pairing with a rounded group master

Left side
O: C G Q
o: c d e g q

Right side
O: D Q
o: b p

Pairing with accented characters

For capitals, the grouping can be pretty straightforward:

Left side
A: Æ Á Â Ä À Å Ã

Right side
A: Á Â Ä À Å Ã
E: Æ

Due to kerning issues with lowercase accented characters - like Ta  and Tä - you might have to
split a group in two, with the non-accented character like a serving as a first group master, and an
accented character like ä  as a second master for the accented lowercase characters.

Left side
a: æ
ä: á â ä à å ã

Right side
ä: á â ä à å ã
e: æ

Font families
Fontself Maker includes font family support, each font style being handled as a separate font file
(it does not yet support multiple font styles into a single font file, like the TrueType Collection
.TTC) format.
Create a font family
When you design several versions of your typeface (like Bold, Italic or Fantastic), it is highly
recommended to layout all the glyphs on a single document (to ensure all glyphs have a
relative size) and to use one or several guides (for precise alignment).

Here is how you should proceed:

1. Create a first font based on your default style and save it as a font file, i.e.
MyCoolFont.otf
By default, any new font's style name is called Regular, so if you want to call it
differently, go to the Font Infos menu and change the style name from Regular to
Other... and type whatever new name you want.
2. Once you are ready to create an additional font style, click on New > New Style and pick
a new style name. This will create a new empty font that has the same font family name
and which includes the same vertical metrics as the first font.
3. Drag the shapes of your new style (ideally with a baseline guide) and save it as a second
font file, i.e. MyCoolFont-Bold.otf
4. To add a third style, press again New > New Style and keep going on.

Matching spacing or kerning from other font styles

To speed up your workflow and ensure font styles share similar features, you can import spacing
& kerning values from another font file.

Matching glyph size across different fonts

You can also precisely change the scale of all glyphs according to a specific value by entering a
capHeight or xHeight value.

Mind that capital glyphs are required in your font when you change the capHeight (and
alternatively, lowercase glyphs are required to scale when editing the xHeight value) -
otherwise, the option to Update & Scale Font will not be displayed.

Import spacing & kerning

Copy and match metrics between different fonts

Did you ever wish you could import all the painstakingly edited metrics you have made to a font
file into another one?
Or did you end up with two font styles that are part of a single font family but have different
sizes?

In any case, please first read our article on Size, Units & Scaling as well Font families.

And then check how you can fix them with the Import Spacing & Import Kerning features below

Import spacing values

There are several metrics you can import from an existing font file:

 Side bearings (the left & right margins around each glyph)
 Advance width (the horizontal space of a glyph and spacing around it)
 Horizontal metrics (ascender, descender, xHeight, capHeight)

You should import spacing values only when the glyphs of both fonts have similar width.

Also note that if your glyphs in both fonts have a vertical size difference above 10%, you will be
prompted with a second alert to eventually upscale/downscale all the glyphs in your font, and to
reset the Ascender & co so both fonts have the exact same metrics.
Import kerning values
 Kerning pairs (actual kerning values between individual glyphs)
 Kerning groups (collections of glyphs that follow the kerning of master glyphs)

You should import spacing values only when the glyphs of both fonts have similar shapes.

If both fonts feature a different glyph height, you will also be prompted whether you want to
adjust the size of your current glyphs to ensure that kerning pair values are relatively equal. 
Ok, ok, we know this is all but simple.

We tried to cover the most common use cases, so if you have any doubt, first try experimenting
by using the feature, installing new versions of the fonts (always good to have backups ;) and
keep us posted if you can refine the wording of this article or in the app.

Have fun!
Alternates
Creating & using alternate glyphs

Alternates let you define multiple glyphs for a letter, a digit, a symbol or any other character of
your alphabet, so your font ends up with a main glyphs, and secondary, alternate glyphs.  

Alternate glyphs can vary in form, spacing or even color (mind that while color fonts are only
supported in InDesign CC 2019+, Illustrator CC 2018+ and Photoshop CC2017+, alternate
glyphs can be used in older versions of Adobe apps, Apple Pages, Keynote).

Mind that Microsoft Word does not support standard alternate glyphs.

The OpenType format defines an alternate as a substitution of a glyph by another one, picked
from a defined set of possible glyphs. Many types of substitution are defined to cover all
languages needs (contextual, stylistic, access all, etc.). To keep things simple, Fontself Maker
currently defines only one type of alternates, called aalt for access all alternates. This type
makes all alternates of a selected character always accessible.

Create an alternate
Alternates can be created in 3 different ways:

1. Individually, by pressing the Create Glyph button (first select your alternate shape, then
type it's corresponding character in the text field Type any character). Fontself Maker
proposes to create an alternate for this glyph.
2. Or you can simply rename an existing glyph into another character.
3. Many at once, by pressing the Batch button (first rename your shapes with the
appropriate letters, followed by a .alt  suffix to specify whether it should imported as an
alternate character, and you can also specify a unique number, for instance B.alt or
B.alt1 , B.alt2 )

Each time you try to create a glyph for a character that already exists in your font, Fontself
Maker proposes to create an alternate for this glyph:
You can create as many alternates as you wanted for any glyph, except for ligatures. 

Alternates are always sorted and named on basis of their creation order. 

For instance here, A has two alternates named alt1 and alt2. If alt1 is removed, alt2 takes its
place and becomes the new alt1.

How to switch/edit/replace a main character by an

alternate?
Just import the alternate glyph shape, assign it with the same character again and pick Replace to
override the main one.

How many alternates can be created?

Since Fontself Maker 3.2, your font can't exceed a total of 2303 alternates and ligatures. In
ealier versions, this limit was 767. 

Display and use alternates in Fontself Maker

Each time you select a character in Live Previews, Spacing Pad or Kerning Pad, its alternates are
displayed and pickable like this:

Alternate spacing & kerning

In the spacing table, alternates are always following their primary glyph and are numbered with
superscript index:

In kerning table, alternates are accessible via a dropdown list and can be kerned like regular
glyphs:
Use alternates in Adobe apps
Illustrator, Photoshop and InDesign let you display and pick alternates just by selecting the
character like in Fontself Maker. You can also display your entire glyph table with all alternates
via Window > Glyphs.

Enable alternates in other apps

MacOS apps generally propose a font menu accessible via  Format > Font > Show Fonts (or
just press Command-T).
Here you have access to a typography submenu that lets you enable multiple features, in
particular alternates:
Ligatures
Creating & using ligature glyphs

A ligature is the substitution of a group of glyphs by another glyph, for aesthetic or linguistic
reasons. 

The most common ligatures are ff fi fl ffi ffl and less frequently ſt st - but the amount of
ligatures can vary a lot based on the design of a font and the creative intentions of its designer.
 
In Fontself Maker you can create ligature glyphs as intuitively as for any character. 

The OpenType specifications define several kinds of ligatures to cover the needs of all languages
across the world. As for Latin-based languages, which are supported by Fontself Maker for now,
there are still multiple kinds of ligatures (liga for standard ligatures, dlig for discretionary, hlig
for historical clig for contextual, rlig for required).

To cover most of the users' needs while keeping things simple, Fontself Maker currently supports
2 types of ligatures:
  liga: standards ligatures (usually for historic ligatures like ffi or st) which are displayed
by default in apps that support ligatures (Illustrator, Photoshop InDesign, Pages, Word,...)
 dlig: discretionary ligatures (for unusual type of connections, or even specific words).
They are displayed only if user enables them. The way to do that depends on each app
(see below).

Before creation your first ligature, you must keep in mind that since a ligature is a substitution
of multiple glyphs by a single glyph, all the single characters that compose your ligature
must preexist in your font before you create the ligature. For instance to create the fi ligature,
your font must already have glyphs for both f and i.

Create a ligature
Ligatures can be created in 3 different ways:

1. Individually, by pressing the Create Ligature button (first select your ligature shape,
then type all of its letters in the text field Type any character). Fontself Maker will ask
you for the type of ligature you want.
2. Or you can simply rename an existing glyph into a ligature in the Fontself panel.
3. Many at once, by pressing the Batch button (first rename your shapes with the
appropriate letters, followed by a .liga  or .dlig  suffix to specify whether they should
imported as standard or discretionary ligatures, for instance like ffi.liga  or boom.dlig
)

Change the type of a ligature

In your glyph table, each glyph cell shows at the bottom right the current type of ligature (liga
or dlig ). Just click on it to change this type if you need.

How many ligatures can be created?

Since Fontself Maker 3.2, your font can't exceed a total of 2303 ligatures and alternates. In
ealier versions, this limit was 767.
Enable your ligatures in Adobe Apps
Adobe apps let you enable or disable your ligatures via dedicated panels.
Illustrator proposes an OpenType panel via Window > Type > OpenType. Just remember to
select the whole text (or just a text selection) before you click on one of these icons.

On Photoshop, you have to use the Character Panel via Window > Character. Same thing in
InDesign via the Character panel (click on top right menu).

Enable alternates in other apps

MacOS apps generally propose a font menu accessible via  Format > Font > Show Fonts (or
just press Command-T).
Here you have access to a typography submenu that lets you enable multiple features, in
particular ligatures. Standards ligatures are activated by Common ligatures  (enabled by default)
and discretionary ligatures are activated here by Rare ligatures

Microsoft Windows apps generally propose a Font menu by right-clicking on a selected text.
This Font menu lets you setup several font features, in particular ligatures.
Set font metrics with Illustrator guides
Aligning precisely your characters

Alright, so if you’re like us (and like most of the designers we know), you’re probably 1)
obsessed with pixel precision and 2) lazy like a sloth ;)

That’s exactly why we implemented a smart guide detection feature in Fontself for Illustrator to
help you set vertical metrics:

 Need to precisely set the baseline of your glyphs? Create a guide.

 Need to precisely set the ascender line of your font? Create a guide.
 Need to precisely set the descender line of your font? Create a guide.

Ok young Jedi, wanna learn more tricks?

 Need to precisely set the xHeight of your font? Create a guide.

 Need to precisely set the capHeight of your font? Create a guide.

Is there any hitchhiker who’s lost in this galaxy of nerdy terms? No worries, visit this awesome
site to learn more about these: www.supremo.tv/typeterms

So how does it work?

When you create new glyphs, SELECT THE GUIDES ALONG WITH YOUR LETTERING
- otherwise the guides will not be considered. By default, we try to guess what each of the
selected guides is supposed to do based on the number of guides you select:
  If you select 1 guide, it will set the baseline.
 If you select 3 guides, they will set the baseline, ascender & descender based on their
vertical position.
 If you select 2 or more than 3 guides, an error will pop (because we just don’t know
which property they might impact).

Therefore, we recommend to use 1 or 3 guides per line of characters.

Ascender, capHeight, xHeight & descender only need to be set once per font. 

However, you can keep selecting the baseline guide for every new glyph you create to ensure
a precise vertical positioning.

FYI, it’s super easy to create new guides:

 Show the Rulers (⌘+R / Ctrl+R)

 Click on the horizontal ruler & drag on you canvas to make a ruler guide.

Power feature: named guides

Now, you can also rename your guides in the Layers panel to define their exact behaviour when
you select them.

Note that it doesn’t matter whether you rename them “baseline”, “Baseline” or “BASELINE”

Whenever you select one of these named guides along with your shapes, the guides will now
behave as you’ve defined.
Normalizing the size of a font family

Did you create a set of different fonts that you want to use as a family, but had some troubles to
set them at the exact same size?

You can actually fix this by creating 3 guides that will define the ascender, descender and
baseline of your font.

 Open the original Illustrator file that served to create the fonts.
 Position the first guide so that it sits above your highest character, the second sets your
baseline, and the last below your lowest descending letter (like g or p).
 Then open one of the fonts you need to fix, select the 3 guides along with any shape and
create a new glyph.
 Delete that dummy glyph and Save your font again.
 Do the same operation will all the fonts created with this Illustrator document. They will
now all feature the same ascender & descender.

PS: keep a backup of your previous fonts, just in case ;)

Size, units and scaling
Learn how big your glyphs & icons will be

Glyph size
There is no specific size or resolution at which you must design letters. Whatever you drag on
the Fontself panel will automatically be scaled to roughly match the size of most other fonts.

Adjust the scale of your font

To quickly resize all glyphs, simply press on the buttons Scale - or +.

Rolling over these buttons will also display sample glyphs below (set in Adobe's Source Sans),
so you can check how your font size will fare compared to others.

Note: mind to look at both uppercase or lowercase letters as you have to decide which ones
should match the height of the sample font.  
Matching glyphs to a specific font size

Do you need to create a letter or icon that will show up at a specific size, like a 10 points high
glyph when the font size is set to 12 points? Here is how you should proceed:

1. In your AI document, scale your glyph shapes so they match the targeted glyph size (i.e.
10pt) 
2. Create a new dummy rectangle that has 70% the height of the font size (in this case:
0.7 x 12pt = 8.4pt)
3. Now in Fontself Maker, start a new font and drop/batch this rectangle as your first glyph.
It's going to be used by Fontself to get the right scale for your font.
4. Finally, import the rest of your glyphs (and feel free to delete the dummy rectangle)

That's it. Wonder why you have to use this magic number of 70%? Keep reading...

Font Units
All the metrics displayed in Fontself Maker are in units per em (aka UPM), a typographic unit
related to the currently specified font size (i.e. when you use a font at 12 points, one em will be
equal to 12 points).

Fonts generated in Fontself are based on a 1000 UPM.

Theoretically, all glyphs' points should fit within a virtual grid of 1000 units (this would include
your highest capitals as well as the lowest descending shape).

However, to ensure there is no distortion on your shapes when you convert them into fonts, the
actual position of each glyph is stored at a higher resolution.
Glyphs' Scale
Since you can draw letters of any arbitrary size and as Fontself Maker doesn't know how big are
going to be your glyphs, it needs to guess how it will scale the first glyphs to fit them within the
virtual typographic bounding box of 1000 UPM.

Whenever you start a new font and drop the first shapes, a scaling factor will be calculated based
on the type of characters you drop:

 When the first shapes you create are lowercase letters, the extension will try to fit their
height around 480.
 When first dropping capitals or any other character, the extension will try to fit their
height around 700 (i.e 70% of 1000 UPM).

As you add more glyphs, they will all be imported to have a relative size. This is why two fonts
created from the same shapes but in a different order can lead to different sizes when they
are used at the same text size.

The good news is that you can now fix this.

Match the spacing, kerning or scale between different font

files
To speed up your workflow and ensure font styles share similar features, you can match the size
of two fonts: 

 By import spacing & kerning values from another font file.

 By entering a specific capHeight or xHeight value to scale all glyphs accordingly.
Mind that capital glyphs are required in your font when you change the capHeight (and
alternatively, lowercase glyphs are required to scale when editing the xHeight value) -
otherwise, the option to Update & Scale Font will not be displayed.

Install VS Save/Export fonts

Stop wondering where your fonts are installed

There are 2 different ways to install fonts within Fontself, each having its own advantages and
drawbacks:

 Automatically - via the Install button (Mac-only & Illustrator-only)

 Manually - via the Save/Export button

Install button
👍 Preview & test your fonts in Illustrator & in real-time
👎 Fonts show up only in Illustrator, overwrites previous font versions

Sorry Windows and Photoshop users, this feature is not yet available to you...

When you want to quickly and repeatedly edit a font and test it in Illustrator, you can simply
press Install: Fontself will generate your font file right into Adobe's Font folder, and it
becomes instantaneously available from Illustrator's Character palette.

As you keep refining your font, pressing Install again will regenerate the font and overwrite
the previous one, so the latest version of your design is automatically shown in Illustrator. This
is possible because all fonts located in the Adobe Font folder are not cached by your system.

Wonder where your fonts are located? Simply press the Browse button or check: 

 On macOS: Users/USERNAME/Library/Application Support/Adobe/Fonts 

Tip: on Mac, press Cmd + Shift + G from the Finder and paste this line
~/Library/Application Support/Adobe/Fonts

Save/Export button
👍 Decide where to store your fonts
👎 Manual installation process, potential font cache issues or duplicate fonts
Once you're happy with your design, it's time to save your font in a safe place (like your design
project folder) or to install it across your system, so you can use it in other apps. 

Pressing Save/Export will prompt you to pick a filename and destination folder where you want
to generate the font. 

⚠️Changing the font file name DOES NOT change the actual name of your font (the Font
Family name) which is used to list your font across apps. Instead, press the Font Infos button in
Fontself to properly rename your font family name. 

Manual font installation procedure 

Whenever you press Install or Save/Export, there's an alert that links to both the font file and
destination folder at the bottom left of Fontself Maker. Just click on a link to open them directly:

Whether you use Font Book or the Windows Font Manager, double click on your font file and
press Install Font (or use your favorite font manager).

The file will now be copied and installed in your system font folder: 

 On macOS: Users/USERNAME/Library/Fonts 
 On Windows: C:\Windows\Fonts

Just load your favorite app and your font will show up ;)

⚠️Installation issues
Font cache problems

All fonts that have been installed on your system will be cached by the operating system and
some creative apps to ensure they show up quickly. One drawback is that even if you delete or
replace a font file in your system font folder, you might still end up with the previous font
version.
So if you don't notice any changes, just restart your apps or - in extreme cases - your computer.
Worst case scenario, you might ask Google to help you clear your system's font cache.  

Duplicate fonts 

When you manually install fonts, it is recommended to delete any previous font that uses the
exact same Font Family & Font Style names before installing a new one (remember that the
actual font file name does not matter here).

Also look for duplicate font files on both your system font folder as well as the Adobe font
folder (this could happen if you previously pressed Install to test a font and then manually
installed it again via the Save/Export button).
Simplify glyph shapes
Cleaning complex object paths to speed up Fontself

Current font technologies are not meant to support massive amount of vector points - like
thousands per glyphs - as such fonts can slow computers or crash printers.

When you are dealing with vector shapes that contain hundreds of points, it is recommended to
simplify such objects first. 

There are a couple approaches to optimize complex shapes: with Illustrator’s own Simplify tool
or with third-party plugins.

Optimize/simplify shapes in Illustrator

You can get significant shape optimizations by using Illustrator's Object > Path > Simplify
command.

You should also consider cleaning up your shapes with Pathfinder or Object > Flatten
Transparency... to minimize the amount of points of your most complex objects.

For example this A shape was reduced from 665 points to just 186:
Optimize/simplify shapes with plugins
Third-party solutions like the powerful Astui and the easy VectorFirstAid from Astute Graphics
can lead to fewer points while keeping greater fidelity than Illustrator's Simplify tool. See how
they can compare:  
Uppercase-only / lowercase-only fonts
Don't copy/paste glyphs, spacing & kerning for a single case font

Single case fonts, made easy

When you design a font with a single case (uppercase or lowercase) no need to duplicate glyphs,
spacing or kerning pairs to the other case: it's now done automatically for you when you save
the font to ensure that users won't see a fallback font when they type letters of the missing case. 

Just mind the missing case will NOT be displayed in the Fontself preview, so you can see
what's really into your font.
Font template / specimen
View all your glyphs to design or review your fonts

A template file is provided to help you identify key characters. It can also be helpful to test proof
a font you have already created (to make sure it is not missing any specific character).

The character set covers major Western European Latin languages plus a few others (it covers
most of the Adobe Latin 1 set): Afrikaans, Basque, Breton, Catalan (without the l-dot), Danish,
Dutch, English, Faroese, Finnish, French, Gaelic, German, Icelandic, Indonesian, Irish, Italian,
Javanese (Latin), Malay (Latin), Norwegian, Portuguese, Sami (Southern), Spanish, Swahili,
Swedish, and Walloon.
You can load this Font Template from the top-right drawer icon.

Customizing the template

1. Unlock the layer named Characters (template) and select all objects.
2. Change Opacity to 100% to ensure they show up entirely. 
3. Apply your custom font using the Character Panel.
4. And uncheck the Template option from the Layer options if you want to print it.

You can of course also rename all characters and customize the specimen to fit your specific
needs (and shoot us a message so we can hear about the custom templates or specimen you
need).
Understanding typography
Typography expresses hierarchy and brand presence.
Type properties
A typeface is a collection of letters. While each letter is unique, certain shapes are shared across
letters. A typeface represents shared patterns across a collection of letters.

Typefaces that are selected for their style, legibility, and readability are most effective when
following the fundamental principles of typographic design.

Names of letterform parts: aperture, ascender, baseline, cap height, descender, leading, letter-
spacing, sans serif, serif, stem, stroke, x-height

Baseline
The baseline is the invisible line upon which a line of text rests. In Material Design, the baseline
is an important specification in measuring the...

Read More

The baseline is the invisible line upon which a line of text rests. In Material Design, the baseline
is an important specification in measuring the vertical distance between text and an element.
The baseline

4dp grid
Type aligns to the 4dp baseline grid.

Regardless of pt / sp size, a text’s baseline must sit on the 4dp grid. Line-height must be a value
divisible by 4 to maintain the grid.

Measurement from the baseline

Specify distances from UI elements from the baseline. Baseline values are software-agnostic, so
they work in any design program, and work with the grid. On Android and iOS, code can be
translated from baseline-relative specs into padding. For the web, automate the calculation using
Sass or CSS.
Reference baselines for vertical alignment, instead of bounding boxes. This produces more
accurate implementation across design software and platforms.
Measure text in relation to other components.

Cap height
Cap height refers to the height of a typeface’s flat capital letters (such as M or I) measured from
the baseline. Round and pointed capital...

Read More

Cap height refers to the height of a typeface’s flat capital letters (such as M or I) measured from
the baseline. Round and pointed capital letters, such as S and A, are optically adjusted by being
drawn with a slight overshoot above the cap height to achieve the effect of being the same size.
Every typeface has a unique cap height.
Cap height

X-height
X-height refers to the height of the lowercase x for a typeface, and it indicates how tall or short
each glyph in a typeface will...

Read More

X-height refers to the height of the lowercase x for a typeface, and it indicates how tall or short
each glyph in a typeface will be.

Typefaces with tall x-heights have better legibility at small font sizes, as the white space within
each letter is more legible.

The height of a typeface’s lower-case x determines its x-height.

Ascenders and descenders

Ascenders are an upward vertical stroke found in certain lowercase letters that extend beyond
either the cap height or baseline. Descenders are the downward vertical...

Read More

Ascenders are an upward vertical stroke found in certain lowercase letters that extend beyond
either the cap height or baseline. Descenders are the downward vertical stroke in these letters. In
some cases, a collision between these strokes can occur when the line height (the vertical
distance between baselines) is too tight.

Ascenders and descender

Weight
Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights;
and four to six weights is a typical...

Read More

Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights;
and four to six weights is a typical number available for a typeface.
Common weights:

1. Light
2. Regular
3. Medium
4. Bold

Type classification

Serif
A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter.
Typeface with that have...

Read More

A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter.
Typeface with that have serifs are called a serif typeface. Serif fonts are classified as one of the
following:

Old-Style serifs resemble writing in ink, with:

 Low contrast between thick and thin strokes

 Diagonal stress in the strokes
 Slanted serifs on lower-case ascenders

Transitional serifs have:

 High contrast between thick and thin strokes

 Medium-High x-height
 Vertical stress in the strokes
 Bracketed serifs

Didone or neoclassical serifs have:

 Very high contrast between thick and thin strokes

 Vertical stress in the strokes
 “Ball” terminal strokes.
Slab serifs have:

 Heavy serifs with imperceptible differences between the stroke weight

 Minimal or no bracketing

1. EB Garamond, old-style serif

2. Libre Baskerville, transitional serif
3. Libre Bodoni, didone / neoclassical serif
4. Bitter, slab serif

Sans Serif
A typeface without serifs is called a sans serif typeface, from the French word “sans” that means
"without." Sans serifs can be classified as one...

Read More

A typeface without serifs is called a sans serif typeface, from the French word “sans” that means
"without." Sans serifs can be classified as one of the following:

 Grotesque: Low contrast between thick and thin strokes, vertical or no observable stress
 Humanist: Medium contrast between thick and thin strokes, slanted stress
 Geometric: Low contrast between thick and thin strokes, with vertical stress, and circular
round forms
 1. Work Sans, grotesque sans serif
2. Alegreya Sans, humanist sans serif
3. Quicksand, geometric sans serif

Monospace
Monospace typefaces display all characters with the same width.

Read More

Monospace typefaces display all characters with the same width.

1. Roboto Mono, monospace

2. Space Mono, monospace
3. VT323, monospace
Handwriting
Handwriting typefaces are unconventional with a natural, handwritten feel. These typically are
used as H1 - H6 in your type scale. They come in the...

Read More

Handwriting typefaces are unconventional with a natural, handwritten feel. These typically are
used as H1 - H6 in your type scale. They come in the following forms:

 Black letter: High contrast, narrow, with straight lines and angular curves
 Script: Replication of calligraphic styles of writing (more formal)
 Handwriting: Replication of handwriting (less formal)

1. UnifrakturMaguntia, black letter

2. Dancing Script, script
3. Indie Flower, handwriting

Display
A miscellaneous category for all classification types that are only suitable for use at large point
sizes. Display fonts typically are used as H1 -...

Read More

A miscellaneous category for all classification types that are only suitable for use at large point
sizes. Display fonts typically are used as H1 - H6 in your type scale.
 1. Shrikhand, display
2. Chewy, display
3. Faster One, display

Readability
While legibility is determined by the characters in a typeface, readability refers to how easy it is
to read words or blocks of text, which is affected by the style of a typeface.

Letter-spacing
Letter-spacing, also called tracking, refers to the uniform adjustment of the space between letters
in a piece of text. Larger type sizes, such as headlines,...

Read More

Letter-spacing, also called tracking, refers to the uniform adjustment of the space between
letters in a piece of text.
Larger type sizes, such as headlines, use tighter letter-spacing to improve readability and reduce
space between letters.

Tighter letter-spacing

For smaller type sizes, looser letter spacing can improve readability as more space between
letters increases contrast between each letter shape. Text in all caps, even at small type sizes, has
improved readability because of its added letter spacing.
Looser letter spacing

Tabular figures
Use tabular figures (also known as monospaced numbers), rather than proportional digits, in
tables or places where values may change often.

Tabular figures keep values optically aligned for better scanning.

Line length
Line lengths for body text are usually between 40 to 60 characters. In areas with wider line
lengths, such as desktop, longer lines that contain...

Read More

Line lengths for body text are usually between 40 to 60 characters. In areas with wider line
lengths, such as desktop, longer lines that contain up to 120 characters will need an increased
line height from 20sp to 24sp.
The ideal line length is 40-60 characters per line for English body text.

The ideal line length for short lines of English text is 20-40 characters per line.
Line height
Line height, also known as leading, controls the amount of space between baselines in a block of
text. A text’s line height is proportional to...

Read More

Line height, also known as leading, controls the amount of space between baselines in a block of
text. A text’s line height is proportional to its type size.

1. Type size 14, Line-height 20dp

2. Type size 20, Line-height 28dp

Paragraph spacing
Keep paragraph spacing in the range between .75x and 1.25x of the type size.

Read More

Keep paragraph spacing in the range between .75x and 1.25x of the type size.
Type size 20sp, line-height 30dp, paragraph spacing 28dp

Type alignment
Type alignment controls how text aligns in the space it appears. There are three type alignments:
Left-aligned text is the most common setting for left-to-right...

Read More

Type alignment controls how text aligns in the space it appears. There are three type alignments:

 Left-aligned: when text is aligned to the left margin

 Right-aligned: when text is aligned to the right margin
 Centered: when text is aligned to the center of the area it is set in

Left-aligned
Left-aligned text is the most common setting for left-to-right languages such as English.
Left-aligned text applied to body copy

Bidirectionality
UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be
mirrored to ensure content is easy to understand.

Related Article arrow_downward

Right-aligned
Right-aligned text is the most common setting for right-to-left languages, such as Arabic and
Hebrew.

Left-to-right languages can use right-aligned text, though it is best for distinguishing short
typographic elements within a layout (such as side notes), and is not recommended for long
copy.
Right-aligned text applied to a side note

Centered
Centered text is best used to distinguishing short typographic elements within a layout (such as
pull quotes), and is not recommended for long copy.

Center-aligned text applied to a pull quote

System fonts
System fonts come pre-installed on your computer or device. They typically have wide language
support and no licensing costs for developers. Using the system default font in your app font
unites the consistency of the platform with your app’s look and feel. However, because they
appear in many places on devices, they may not stand out.

Roboto
fonts

Related Link arrow_downward

Using system fonts

Native system typefaces should be used for large blocks of text and any text below 14sp. Roboto
is the default system font for Android. For...

Read More

Native system typefaces should be used for large blocks of text and any text below 14sp.

Roboto is the default system font for Android. For platforms outside of Android and web
products, use a system typeface that is preferred on that platform. For example, iOS applications
should use Apple’s San Francisco font.