For webcomic readers there is nothing so frustrating as illegibility. How to create a font is not as important as ensuring that whatever you create is readable. When I started Things in Squares, I hand-wrote the font, took a photo, changed the levels, and done deal:
It is not pretty. But it’s legible. Since then, I’ve created two digital fonts:
This does not give me the necessary experience to write a truly useful tutorial about how to create a font, so I will concede the honor to others. This post consolidates a number of tools and tutorials that may be what you are looking for.
FontForge
My “Tiscomics” font, which you can also see in this blog’s section headers, was created using open-source font software called FontForge. If you are thinking that it looks like I cut it out of flimsy paper using rusted scissors, don’t worry. It was my first attempt, and I did not take advantage of the software’s interpolate control points on motion feature.
The program is comprehensive, and if you dedicate more time than I did to mastering its use, you’ll make a beautiful font. Here is a 12 minute introductory video from a fellow named Paul:
This is one of many FontForge video tutorials on YouTube.
FontForge has many features. All you need to know can be found in this documentation, a veritable encyclopedia of FontForge use. This online book contains articles, video tutorials, and sections which humbly link out to other useful resources.
FontForge is to FontLab Studio as Gimp is to Photoshop. While FontLab Studio costs over $600, and Photoshop charges a $40 monthly subscription, both FontForge and Gimp are free.
Only professional typeface designers and rich people need the heavy-hitting program. Webcomic artists require only a single font, if we’re lucky.
MyScriptFont (now Calligraphr)
“Thingsinsquaresfont” was created using MyScriptFont.com (soon to be phased out in favor of similar Calligraphr) While FontForge is a font-specific software wherein you adjust points and lines, MyScriptFont allows you to draw your font by hand. If you prefer creative autonomy to draw by hand, then MyScriptFont is a better option than FontForge.
First, you download a template that looks like this:
Either digitally or printed out, you’ll draw your font on this template, using the soft gray lines as guides. Then, you re-upload the template to the website, and it produces your TrueType (.ttf) or OpenType (.otf) font.
Note: Use OpenType, because it’s more adaptable across operating systems without conversion. Especially if you want to use your font in Adobe programs, use OpenType.
Other options for creating fonts
I only recommend what I know. But there are programs I would check out if I had more time. Glyphr Studio is one, FontArk is another. If you use Photoshop, there is a $49 add-on called Fontself for creating fonts to export as OpenType files that looks intriguing.
Webcomic artists should use free programs; otherwise, there are many, many other programs to talk about. If you have the money, and are not inclined to make a font, you can license a font or find an open-source Google font you like.
How to make a font for a comic
Making a font for comics is the same as for anything else. I lack requisite expertise, so I recommend reading this article on making fonts. Not everything in that article is useful for webcomic creators, but it is interesting to see how typeface designers conceptualize their craft.
Here are some additional compact pieces of advice I think are useful:
- Match font feeling with comic theme: Funny comics need funny fonts. For a dramatic mystery-murder story-based webcomic, create a font that doesn’t remind readers of the funnies. You’ll figure it out. Definitely test, and ask friends what they think before you settle on one.
- Letter-spacing: In Photoshop, you can edit the distance between letters of your custom font. I think you can do this in most drawing programs. Just remember that when creating a font, the lateral space you leave effects default letter-spacing.
- Line-height: The same goes for the vertical space you leave–this affects the line height in a paragraph.
- Word-spacing: Drawing programs let you edit word spacing. Once your font is created, I recommend adjusting the word spacing to your satisfaction.
Installing your new font on your computer
You have to add the font to your computer’s system in order for it to appear as an option on Word or drawing programs like Photoshop. Here’s what you should do:
- For Windows, use these sets of instructions
- For Mac, follow these instructions
- Linux users, you probably already know what to do, but just in case
Restart applications once this is done to see your new custom font available as an option.
Using your custom font on your website or blog
Common fonts do not need to be activated on your website’s end. “Times New Roman”, for example, exists on all computers. But your computer does not have “Tiscomics” or “Thingsinsquaresfont”. So I need to install these fonts onto my web server, and tell your browser to use them when displaying certain elements, such as headings (h1, h2, h3, etc.).
To do this, you must first convert your font (whether .tff or .otf) into a web font, known as the Web Open Font Format (.woff). I used this free online converter, but there are others. Note that you could use .ttf and .otf on your website, but the .woff format protects it from being downloaded and pirated.
The conversion creates two WOFF files, .woff and .woff2. Woff2 is the next generation of the format. You’ll need to upload both woffs to your server to account for older browser versions. Then, in your CSS, you must insert an At-Rule (what’s this?), which activates the font for use on your website. Here is what the CSS At-rule should look like, substituting your font title and font URL location:
To use a custom font for a given element, change the CSS:
If all of this is Chinese to you, then learn about CSS here.
Fonts for comics: conclusion
Most webcomic artists use tablets to digitally draw comics, and many opt for writing out dialogue instead of using a computer font. Hand-lettering is time-consuming, but it might be the best avenue for your specific project. However, if you draw comics on paper to later digitize, I wouldn’t recommend writing comic dialogue by hand. Cleaning up scanned lettering adds inordinate time to an already demanding process.
As for comic lettering, there are better resources than this post:
Other useful articles from this blog:
Hi! Awesome post. I have a page of web comic in spanish and legibility is my eneny too. I tried too many times in Myscriptfont create a legible font but the result font is always in a horrible kerning. I’m tired of manually correct the kernings in words and letters, is something I’m missing? Thanks and I love your job.
You use pen and paper? I made my font by editing the template in Photoshop, and made sure everything was real crisp. Hope that helps
There is no magic regarding kerning, this is something that first needs a lot of attention, first when spacing of your glyphs (whatever the tool you use) and then when working on the final adjustments via kerning pairs.
You can learn about the process on https://medium.com/gravitdesigner/the-art-of-kerning-be16be25344f or check how you could more easily edit kerning pairs in your own fonts using Fontself (I’m one of its creators): https://help.fontself.com/making-fonts/kerning
Thanks a lot for reviewing Fontself – btw it also runs within Illustrator, which is even better suited to convert vector artwork into fonts 🙂
Creatives who would like more unique textured or color fonts for their comics can also have a look at color bitmap fonts, which are supported by Fontself: https://blog.fontself.com/bitmap-fonts-the-other-future-of-type-ca8aa5b51aa7
Can you share your fonts here? I would like to use them.