This jam is now over. It ran from 2021-05-20 11:00:00 to 2021-07-15 11:00:00. View 9 entries

I feel like fonts are a kinda black-box to most people—something to look up online or find already installed on your computer, but not really something to make. I wanna help change that, because it's easier than ever to get into font design, and as easy as ever to search for just the right font for and come up empty-handed. Unlike most other parts of your typical analog game, fonts are one of the few things that people not only don't often custom-make, but can't make. Or, feel like they can't.

So here's FontJam, a jam for making fonts! Doesn't matter whether it's your first or your hundredth, whether you tend to make digital games or analog (or something else entirely, like comics, poetry, photography, classic wooden puppets, whatever), but your entry (or entries) should be stuff you make during the jam. License and price them as you see fit (there's some suggestions for licenses below).

A quick note on 'ethnic' fonts: Don't submit these to the jam. I mean both generic 'tribal' and 'chop suey/wonton' fonts as well as more specific ones (e.g. an imitation Japanese calligraphy font made solely of English characters and named 'Rising Sun-Regular.ttf'). Unless, of course, you're actually of the relevant ethnicity, in which case do what you want.

If you've got questions then check out the discord!

Sources: Alegreya (jam title), Old Cupboard, Just for Fun, Old Stamper, Robort, LCD Mono, Tostada, Freelance Kamchatka, Stardate 81316, Drum N Bass, oozing, MicroStyle, Painting with Chocolate, PieceOfCake, Zoltank, VCR OSD Mono, Razor, Beholden, Slice. Always check a font's license before using it, to make sure it's eligible for your use!


Font design apps

Here's a bunch of free (or free trial versions of) font design apps (click to open/close):

Free web apps

These websites let you make fonts in your browser for free:

  • Fontstruct, which lets you make fonts by drawing pixel-like bricks on a grid. It adds depth with a feature that lets you combine bricks to make new ones, and has a public gallery.
  • Calligraphr, which lets you make fonts by digitally or physically drawing glyphs on a template to upload to their site (though uh, for security reasons, don't give out or sell fonts made of your actual handwriting).
  • Glyphr Studio Online, which lets you make fonts by drawing vectors.
  • FontArk, which describes its drawing system as a "fluid grid" that lets you easily draw and shape a font. Currently in a free open beta.
  • BitFontMaker2, which lets you make pixel fonts and has a gallery of fonts people have made public.
  • Fontsy, which helps you edit Bitsy fonts.
Free desktop apps

These are also free (or have limited free versions), but work on your computer and tend to be a big step up from the web apps:

One important thing: Birdfont's free version only lets you apply the SIL Open Font License (see below for more info). That said, other font apps may allow you to import the font you export from Birdfont and re-export with a new license.

Paid desktop apps

Lastly there's the free trials of paid (often pretty expensive) desktop apps, which can have advanced functionality or more friendly user interfaces (depends on your preference, though).

  • FontLab (windows and Mac only), which has a 30-day free trial for the full version (FontLab 7).
  • Fontographer (Windows and Mojave-or-earlier Mac only), which has a free demo, time unknown.
  • Glyphs (Mac only), which has 30-day free trials for the full version (Glyphs 3) and the mini version (Glyphs Mini 2).
  • Robofont (Mac only), which has a 30-day free trial.
  • Type 3.2 (Windows and Mac only), which has a free demo that only lets you save a limited number of characters (and adds a watermark if you use a tracing feature).

FontLab has a mini version called TypeTool, but it doesn't have a free trial that I could find, and also doesn't work on the latest version of MacOS. There's also Fontself, a type design plugin for Illustrator and Photoshop.

Recommendations: If you don't have much experience with vector art tools then you might wanna try Fontstruct, Calligraphr, or any pixel font app for this jam. If you do have vector art experience then you could try any app (or do what I suggest above and draw the glyphs in whatever app you normally draw in, then import them into the font app). I've personally used Fontstruct, Birdfont, and Glyphs to make typefaces, so I can give some pointers on those (not that I'm an expert with any of them). While I haven't properly used BitFontMaker2, FontArk, Fontsy, or Calligraphr, they look easy (or at least easier) to get into.

Link to 1001fonts.


How do I actually make a font?

If you're looking for font design apps, then check the next section. If you're looking for help with the basics, then look up the documentation for the app you're using—it'll usually explain how to use the app better than I could, and more specifically. If you're looking for pointers or advice, here's some stuff that might be useful (click to open/close):

Terminology
  • Typeface: a design for how text looks, e.g. Garamond, Jokerman, Alegreya, Helvetica.
  • Font: a variation on a typeface, e.g. Regular, Bold, Roman, Italic.
  • Glyph: a drawn letter, number, or symbol, e.g. uppercase A, lowercase g, number 5, colon.
  • Whitespace character: an empty character that creates horizontal or vertical space, e.g. space, em space, carriage return.
  • Serifs: lines extending from some the ends of some letters, usually perpendicular to the stem, for decoration and/or improved readability in print.
  • Sans-serif/Sans: term for a typeface without serifs.
  • Ligature (conventional): A glyph that connects and combines two or more other glyphs.
  • Ligature (unconventional?): A glyph that represents two or more characters, e.g. displaying a hat icon when the user types 'hat'.

For more specific terms for different parts of glyphs: Anatomy of type.

This might also be useful: a blog post that demos different typeface categories. Don't take it as gospel (in fact the monospaced demo is totally wrong), but do check out the examples of stuff like stress, contrast, and serif styles. Also, see that the last category's a catch-all 'display' category for basically anything that's not used for body text—these categories are absolutely not the be-all end-all of font design.

Checklist of things most fonts have
  • a name. Check if there's already a font by your chosen name—if there is you could change yours a little, rename it entirely, or add a prefix based on your username or something like that (e.g. I might prefix a font "StS-").
  • every letter of your language (though maybe not for things like kanji!).
  • numerals, e.g. 1 to 9 and 0.
  • a space and a bunch of basic/common punctuation and symbols you can find on your keyboard.
  • spacing/side-bearing: an appropriate amount of space on the left and right side of each glyph.
  • (optionally) kerning: specific letter-spacing for specific pairs of glyphs (e.g. you might kern A and V to have less spacing, or even some overlap, so there isn't an awkward gap). Not every app lets you adjust this, and not every font needs it. Try this game for a visual demo of kerning, and for help and suggestions, check out these blog posts: 1 and 2.
  • (optionally) letters and diacritics (like accents) from other languages that use the same script (e.g. the letter 'eth' isn't used in English, but is used in some other Latin script languages like Icelandic).

Some fonts only have letters in one case (usually uppercase)—if you choose this them you should copy the uppercase letters to the lowercase ones. Depending on the app you're using you can either do this by: directly copying or re-creating each letter; inserting them as components; or using OpenType code to substitute one case for another (though this can have minor, usually not very important side-effects in .pdf export). You can even make two versions of the same letter (e.g. 2 styles of each capital letter) and put one set in the uppercase and another in the lowercase).

Testing your font

Unless you're drawing an icon font, you'll also want to check how your glyphs look together, not just alone in the glyph editor. Some apps have a text tool/preview mode to let you test your font in-app, but if not then you'll have to export the file, test in e.g. a word processor, uninstall the font, and go back to the app to make changes.

Overshoot

This is a slightly more advanced thing, but basically, in order to even out how all your characters look, you should make round or pointed tops and bottoms slightly overshoot the boundaries—the baseline, x-height (for lowercase), and cap height (for uppercase) (tutorial). It's a not-too-hard way to make your font look more visually consistent (ironically by making it less mathematically consistent). Not all apps let you do this kinda fine adjustment, though (e.g. pixel font apps).

Some typefaces are also drawn with the ascenders (the upper parts of letters like lowercase b, k, or l) rising a little higher than the cap height.

Some help for vector-drawing font design apps

If you're using a vector-drawing app:

  • then check out this tutorial: Drawing Good Paths. There's one or two things in there I've seen other people disagree with (e.g. putting nodes on inflections), but it's mostly very solid.
  • If you're going for a clean, smooth look, then use fewer nodes to begin with and add nodes to add complexity. See the tutorial above for some examples.
  • If you're digitally drawing a 'hand-drawn' brush-stroke-like font, draw each stroke as a separate curve (e.g. draw one curve for the horizontal stroke of a capital T, and another curve for the vertical).
  • Your app may let you import .svg files (by a file menu or just dragging and dropping into a glyph editor), so if you want, you can draw your glyphs in a vector art app you're familiar with, import them into the font app, then tweak the glyphs and export the font.
Alternatives to drawing a whole new font

You don't necessarily have to draw a whole font yourself. There's at least a few options for doing something smaller, or less work:

  • Make an edit of an existing font: Some licenses (e.g. the OFL and any CC license that doesn't include 'ND') allow you to make altered or remixed versions of the original creation. This means you can import one of those fonts into an app (if it allows imports) and adjust the original design. Bear in mind that the license might apply restrictions if you do this (e.g. fonts released under the OFL may have reserved names, so you'd need to come up with a different name for your version).
  • Make a section of a font: For example, just the numerals, or just the capitals. Not all font websites will let you upload 'incomplete' fonts, but you can still make something that's as complete as it needs to be.
  • Trace a real-world sample: Take an image of text encountered in the world (or a historical sample) and trace over it.
    • Warning 1! The text you find might actually have been printed using an existing font.
    • Warning 2! It might be copyright or subject to a license you're unaware of.
    • Warning 3! Logotype (type used in logos) is often edited from existing typefaces (see warnings 1 and 2) to better fit the design of the logo and the specific words used in the logo and may be less suitable for general use.
    So your best bets are stuff like historical letters, custom signage, representations of text that couldn't possibly be under copyright (like people making letter shapes with their arms and legs), etc.
  • Use a method aside from drawing: Check out my font hOwdy for an example of a font made using photos of physical objects, an image editor, a converter site, and Birdfont, all without actually drawing anything (twitter thread explaining the process).

And you can always ask questions in the discord!

There's a lot more I'm not gonna get into here cause I feel like it's probably beyond the scope of this jam, but if you feel like it you could look up: optical adjustments (overshoot is one of these), font metrics, OpenType features, font file formats, and/or hinting. These are useful for (almost) all fonts, but not all apps let you work on them.

All that said, typeface design is pretty complicated and pretty niche. There's only so much I can explain here (and I'm still pretty much a beginner myself), but don't worry too much about the technical side if you're making your first font—just find an app that works for you. Besides that, I think my biggest piece if you're just starting out is: make something you could easily describe as one or more of these things: flashy, characterful, gimmicky, weird, clearly in a genre, dingbat, icon.

Link to BitFontMaker2 gallery.


Licensing

Here are some common licenses digital fonts are released under (click to open/close):

The SIL Open Font License

The SIL-OFL v1.1, or SIL OFL v1.1, or OFL v1.1, or OFL, or Open Font License... the OFL is a widely-used license that basically releases your work for free and prohibits anyone else from selling your font by itself or only bundled with other OFL fonts. That includes you too! However, you can sell OFL fonts if they're bundled with other, non-OFL stuff, or if they're embedded in another file.

Chances are, if you've published something then you've used an OFL font somewhere. Almost all Google Fonts, for instance, are licensed under the OFL (full list of Google Font attribution).

Creative Commons licenses

These licenses are basically a modular set—by adding a few letters to the license name, you add different features (e.g. CC BY 4.0, CC BY-NC 4.0, CC BY-SA-ND 4.0). The default license is:

  • CC: Creative Commons: people who adhere to the license terms can freely reproduce and remix/adapt/change your work, even for commercial purposes.
  • BY: anyone who wants to use your work must credit you.
  • 4.0: the current version of the Creative Commons license.

You can apply any combination of these extra restrictions:

  • SA: share-alike: anyone who uses your work must release their copy or derivative work under the same license as yours.
  • NC: non-commercial: anyone who uses your work can't do so for commercial purposes.
  • ND: non-derivative: people can reproduce your work, but not remix/adapt/change it.

These are super-short summaries! Check the Creative Commons site for more info.

The Creative Commons Zero public domain dedication

This isn't a license, but instead a way to put immediately put something you made in the public domain. You can find the details in the CC0 section of the Creative Commons site.

Other licenses
  • Site or app-specific licenses, like the Fontstruct licenses listed in the Fontstruct license FAQ.
  • Free software licenses like the Apache License, Version 2.0 (as font files are classed as software).
  • A personal-use license, basically just telling people they can use your font for free if they're not using it for commercial purposes, but must contact you to buy a commercial-use license.
  • A commercial license, basically letting people pay to license your font for commercial purposes.
  • A custom license, which can basically be whatever you want, whether or not it's legalese. Examples:
    • adding political stipulations,
    • barring people from using your font as a webfont or in e-books (embedded like in a .pdf, bundled as in a .epub, or both),
    • asking you to tell the font designer about your work,
    • etc.

In general, if you're not clear about a license, look it up online or ask around! Font licensing sometimes has weird creases outside of simpler or clearer ones like CC or the OFL and it's better to be sure about the terms than worry about or ignore them.

Link to fontstruct gallery.


Thanks

With thanks to members of momatoes' discord for comments and suggestions while writing this page.

Submissions(9)

All submissions
·
Browser playable (1)

No submissions match your filter

4 free pixel fonts styles (each with monospaced & fixed variants), plus 16+ bitmap font freebies.
a randomised chunky marker pen typeface!
A Decorative and Weird Sci-fi Pixel Font - Made for FontJam 2021
A janky scifi-ambience Truetype font.
A marker based font for funs
a tiny pixel typeface with a calligraphic touch!
I own a scanner, and I can use that to make paper look fucked up. I can also use it to make fonts.
My first font. Use at your own risk.