I’m a bit of a pretty big font and type nerd, and I’ll be the first to admit it. Since I have so much fun with this topic, I decided to do a follow-up to my last post about hand lettering that will teach you how to create your own fonts.
Now technically as I explained before, if you turn a style of hand lettering into a font it ceases to be hand lettering anymore, but it can still be done. If you are wanting to use hand written fonts for titles on a website for instance, creating a font instead of slicing out the titles as images makes it much easier to edit later on, and offers a shorter page load time since you aren’t having to load extra images. It’s also beneficial for SEO.
There are different ways to create your own fonts, but I am just going to explain two ways.
Option 1
The first option is to use a website called Fontstruct. This way is quite a bit more in-depth and takes some getting used to, but also makes for cleaner fonts that will scale better. The website gives you a grid with all sorts of different bricks to choose from – square, rounded, partially rounded etc, and you use combinations of these to create each letter digitally, pixel by pixel.
I had a lot of fun playing around with this site. Here is part of one font I created. I only did the uppercase letters, a period and an exclamation mark but I can always go back and add in the lowercase letters and other punctuation. Once you’re done, you just click the yellow download button at the top and it will export out a TTF file for you and you can begin using it!
Option 2
Now, if you’re wanting something a little more imperfect, like handwriting for instance, you can use PaintFont.com or MyScriptFont.com.
I decided it would be fun to have a font that matched the title image on my last post.
So one lazy afternoon, I set out to practice different lettering styles and drew up the alphabet in the above style and this is what I came up with.
Once again, I only did the lowercase letters. This was more intricate than just writing it all out in my handwriting. So I also didn’t want to do the whole alphabet, upper and lowercase and punctuation and not have it work.
The first site I tried was MyScriptFont. This site is quick and easy. You just print out (or save out if you want to fill it in digitally) their template, fill it in, scan it, and upload to the site and it will export out a font file for you. However, as I said before, these letters were quite intricate. So my first attempt was not a successful one. The lines were way too thin so you couldn’t even make out most of the letters. So after spending quite some time thickening it up, I eventually had to fill it in completely and was left with this
So I did some more searching for a new site to use and found PaintFont. This worked much better for me. I still had to thicken up the lines a bit but I was able to keep the line fill on the letters instead of making it a solid fill. For this site, it loads in numbers, letters and punctuation and you can either use all of them or just select certain ones. In my case, I only added in the lowercase letters. Once you select which characters to use, you can download that specific template to fill in, scan and upload, just like on the other site.
Since I had already drawn my letters out without using the template first, I filled in the template digitally instead. To fill in digitally, first scan in (or take a picture if you don’t have a scanner) the drawn out letters. If you scan it in, be sure to set it to scan in black and white. If you use the photo method, then open it in Adobe Photoshop first, bump up your contrast and set it to black and white to make sure you have the most crisp and clean lines possible. You can also use the Magic Wand or Select > Color Range tool to get rid of any remaining background.
Next, open this file in Adobe Illustrator. Click on the image, then in the top bar click Image Trace. Once it is done tracing, click Expand (next to the Image Trace button). This will turn all of the tracing into points that you can edit if you need to. Just right click and select Ungroup so that each letter is broken up by itself. You might have to delete the background, sometimes it adds one in or fills in closed off letters with a background too (like a, b, d, e, g etc).
Once I expanded and broke my letters up, I realized the lines on my f were a little too light:
So I went over them with new lines to match the lines on the other letters. If you do that, make sure you select the whole letter you modify, then go to Object > Expand > Fill and Stroke. Then use your Pathfinder tool to merge all parts of that letter together.
Next, open your template in Illustrator. Copy each letter from your other document over to the template and scale it down as needed. When you’re done, it should look something like this:
This next part took some trial and error. The first round of letters were still a little too light, so to fix this I added a 0.1 stroke around the letters and increased the stroke by .1 until I found a weight that was light enough for my liking but dark enough to be able to show all of the lines. So here is the finished product:
Isn’t that great?! It takes a little time and effort but have fun with it, and then you can use your pretty new font as much as you like! If you are only using your font for design purposes, your work here is done. But if you want to implement it on a website, check out the Webfont Generator on Font Squirrel. Just upload the font, download the file, add the files and css into your site and voila! You’re ready to show your font to the web!
