Create TTFs Online with FontStruct (it's fun)

a work in progress pixelfont
Crispy glyphs

Some of you might have seen FontStruct over at Slashdot. It was at the front page yesterday or the day before. The usual thing happened of course - it got slashdotted to death. Fortunately it's back online. It's time to give it a shot.

In a nutshell: FontStruct is a web-based font creation tool. Apart from a few minor issues the Flash-based interface is perfect. It's surprisingly awesome in fact. Well, it's not intended to be used for professional font creation; it doesn't handle kerning or hinting for example. There aren't even any vector tools (all you get is a set of building bricks). But all those things aren't really necessary for less-serious/pixel fonts.

The created fonts can be downloaded as TTF. You can also tag them, share them with everyone else, and slap one of the CC licenses on top. The downloads are tracked and there is also a comment and rating function in place.

The font you can see in the upper right is a quick "port" of one of my old pixel fonts. I also added the whole Katakana range and a few of the extended Latin chars (228 glyphs in total). Once I get around adding Hiragana (and maybe some French chars), I'll release it.

The pixel font used to be an inverted char mask image, which made things rather easy to handle. However, changing/adjusting the font or using the font elsewhere was rather fiddly. It was a nightmare, really.

charmask
Figure 1: A Character Mask Image
(with characters in awkward order)

The image itself is black and the characters are cut out. In order to draw colored letters I only had to draw a filled rectangle and then the desired sub-regions of the mask image on top. This worked fine because the background was always black. The whole thing could be scaled (nearest neighbor) of course.

TinyRivers' high score screen
Figure 2: TinyRivers' High Score Screen

The result looks pretty good. A low-tech solution like this is probably still a good choice for some very restrictive environments such as mobile phones. But even then it's a good idea to use TTFs at the beginning of the pipeline, because they are a lot nicer to work with. All that annoying mapping is handled just fine by various tools and the same goes for texture generation.

So, if you think about pixeling some font again, forget it and use FontStruct instead. It's a lot more fun and the result is far more versatile. I for one always wished there would be such a simple TTF creation tool. And now it's there! :)

Comments

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options