While designing a font that works effectively in a variety of formats with carefully crafted lettering is a skill that can take years, this quick and fun project shows you how to create your own handwritten fonts using Inkscape and fontastic.me, giving you your own unique font. The main purpose of fontastic.me is to create font icons for websites, but you can create a font that can be used to create headlines or small amounts of text.
If you are not familiar with it, Inkscape is a free and open source vector line drawing application available for Windows, OS X and Linux. Fontastic.me is a website that offers a variety of icon fonts, but also allows you to upload your own SVG images and convert them to any font for free.
For this tutorial we will be tracing a photo of some letters written, but you can easily adapt this technique and draw your letters directly in Inkscape. This can work especially well for those who use drawing tablets.
- Import a photo of your written font
- Trace the photo to create vector lines.
- Track split into separate emails
- Set document size
- Create separate SVG files for each letter
Import a photo of your written font
You’ll need a photo of some of the letters drawn if you want to join in, and if you don’t want to make one, you can download and use a-doodle-z.jpg, which contains the uppercase AZ.
If you are going to make your own letters, use dark colored ink and white paper for strong contrast and photograph the finished letters in good light. Also try to avoid closed spaces in the letters, such as “O”, as this makes life difficult when composing tracked emails.
To import a photo, choose File > Import, navigate to the photo, then click the Open button. In the next dialog box, it is recommended to use the “Insert” option.
If the image file is very large, you can zoom out using the options in the View > Zoom submenu and resize it by clicking it once to display arrow handles at each corner. Click and drag the highlight while holding down the Ctrl or Command key and it will keep its original proportions.
Next, we trace the image to create the vector lines of the letters.
Trace the photo to create vector lines.
It’s a good idea to review the bitmap tracking process before getting started.
Click the photo to make sure it’s selected, then go to Path > Trace Bitmap to open the Trace Bitmap dialog box. Here we left all the default settings and it gave a nice, clean result. You may need to adjust the tracing settings, but you may find it easier to reshoot the photo with better lighting to get an image with stronger contrast.
In the screenshot you can see the traced letters that we dragged away from the original photo. When the tracing is complete, the letters are placed directly above the photo, so they may not be very clear. Before continuing, you can close the Bitmap Trace dialog box and also click the photo to select it and press the Delete key on your keyboard to remove it from the document.
Track split into separate emails
At this point, all the letters are combined, so go to Path > Break Apart to break them up into individual letters. Note that if you have letters with more than one element, they will also be split into separate elements. In our example, this is true for every letter, so at this stage it makes sense to group each letter together.
To do this, click and drag a selection around the letter and go to Object > Group or press Ctrl + G or Command + G, depending on your keyboard.
Of course you only have to do this with letters that contain more than one element. Before creating the letter files, we will resize the document to a suitable format.
Set document size
You need to set the document to an appropriate size, so go to File > Document Properties and set the width and height in the dialog box if necessary. We’ll set our values to 500px by 500px, although ideally you should set the width differently for each letter so that the last letters are neater.
Next, we’ll create the SVG letters that will be uploaded to fontastic.me.
Create separate SVG files for each letter
Fontastic.me requires each letter to be a separate SVG file, so you’ll need to create them before clicking them.
Drag all your letters so that they are outside the edges of the page. Fontastic.me ignores any elements that are outside the page area, so you can leave those letters behind without any problem.
Now drag the first letter onto the page and use the drag handles in the corner to resize it to your liking.
Then go to File > Save As and give the file a meaningful name. We called mine a.svg – make sure the file has the .svg suffix.
You can now move or delete the first letter and place the second letter on the page and go back to File > Save As. You must do this for each letter. If you’re patient, you can adjust the page width to better fit each letter.
Finally, you can consider punctuation, although you definitely need the space character. For space, just keep a blank page. If you want uppercase and lowercase letters, you must also save them all.
Now you can visit fontastic.me and create your font. You can learn about this process in the accompanying article, which explains how to use fontastic.me to create a font.