Creating Custom Fonts in Inkscape

Making your own custom fonts would be fun, but to get started in inkscape you must first have a fontforge template to use. This will save you time when you will be generating your custom fonts in fontforge program as it will automatically fit each character in place.

You may download the svg template in Download Section or if you wish to start from scratch you may watch tutorial from Create For Free channel.

So, make sure to install inkscape and fontforge if you haven't downloaded them yet since these two will be our tools to create a custom font of our choice.

SVG Template for Typography

Here's how the fontforge typography template looks like.

It will be subdivided into:

descender
baseline
height
caps
ascender

Placement of Letters or characters

a. Small caps

For small caps make sure to align within the box between baseline and height as shown.

b. Large caps

Same position from baseline but this time along the "caps" level as shown.

notice that our sample large cap is out from our "pink" shaded rectangle which is fine since most large caps width are wider.

c. Descender

All small caps that will extend below the baseline guide as shown.

d. Ascender

All small caps that will extend above the height and "caps" level as shown.

depending on your own design, not all small caps would reach the ascender level but most would be the same height as large caps along "caps" level.

SVG Font Editor

a. Global Settings

Before starting with your custom fonts, you might as well change some settings in the SVG font editor window as shown, no need to click on "Set up canvas" button after changing the values.

Family Name = "give a name to your custom font"

Horizontal Advance X = 630

Ascender = 0

Caps height = 0

x-height = 0

Descender = 0

b. Glyphs

Once you set up the values in "Global settings" you may now start creating your own fonts under "Glyphs" as shown.

Click on Glyphs

Click Add (+)

Type in "a" under Characters (this will be the keystroke on keyboard to type your letters)

Name = this will serve your guide to distinguish from other letters (we just simply name it as "a")

Click on Edit = this will create a new layer for the font and you may start drawing

Use any pen in inkscape to draw your character

Select all and use path > union

Click "Get curves" (always make sure that the layer is selected)

Now type in the letter to test as shown in preview text window

Repeat the process for other letters

Save as SVG file when done.

c. Kerning

Assume you are not happy with the spacing of two letters or characters, you can simply adjust and add them as pair to adjust spacing to your liking.

d. Advance

Some letters such as i or small caps letter L (l) have more compact width which will make it have more noticeable gaps when placed side by side with other letters.

This is how the "advance" tab comes into play, simply get the width of your character or letters and add 130, say it has a width of 90 then add 130 = 220

Use the computed value of 220 and place under advance and see the effect on spacing.

Here's a sample demo how advance values works, applied in "spacebar", notice the gap between ab to ab when adjusted to 300 value almost gap is equal to a single character width.

Let's say you have completed from A-Z including numbers from 0 to 9 then save as svg file and you are now ready to import in fontforge to generate a "TrueType" font.

TIP:

For the character of "space or spacebar" under characters delete any letter and click on your spacebar in keyboard, and under name just give it a name as "space", no need to click on edit as you don't need to draw anything and disregard the "get curves" for this.