{"id":26,"date":"2003-11-03T22:35:45","date_gmt":"2003-11-04T05:35:45","guid":{"rendered":"http:\/\/newsfeed.fatorcaos.com.br\/wp\/?p=26"},"modified":"2003-11-03T22:35:45","modified_gmt":"2003-11-04T05:35:45","slug":"two-way-painless-pixel-font-creation","status":"publish","type":"post","link":"https:\/\/labs.zeh.com.br\/blog\/?p=26","title":{"rendered":"Two-way painless ‘pixel font’ creation"},"content":{"rendered":"

Ok, here it is: a software to painlessly create so-called pixel or bitmap fonts, SimpleFont<\/a>. It’s a commercial software and I haven’t tested it already, but some people might be interested. Via Quasimondo<\/a>.<\/p>\n

While we’re on the subject and I’m feeling like Santa Claus on crack, I remembered I had to make public my special ‘pixel’ font template. Well, download it here<\/a>. You can use it to create TrueType (TTF) based ‘pixel’ fonts, and it’s free for anything as long as it doesn’t include kitten killing. Here’s some needed instructions:<\/p>\n

1. Use either FontLab<\/a> or TypeTool<\/a> to open the .VFB file. Both share a very similar<\/b> interface and will produce the same<\/b> results. Both are commercial software and both have a trial version, too, although FontLab costs $549 and TypeTool costs $99 (and comes with less advanced features). So, yeah, this is only free if you already have one of these tools. Sorry.<\/p>\n

2. Set your grid steps (Tools > Options > Glyph) to 256×256. That will ensure that each grid box on your screen is the same than a pixel.<\/p>\n

3. Create and edit your letters. Each box on a grid will make one pixel, when the font is used at size 8, so just draw squares like there’s no tomorrow! It’s pretty easy, though, both FL and TT has some nice boolean drawing tools which makes ‘bitmap’ font creation amazingly easy.<\/p>\n

4. Flash has a rendering problem which makes small fonts be filled when their interiors are too small. To avoid this, you have to make sure the “hollow” parts of the font aren’t real holes (they will look like they are). On the font sample you download, check the ‘B’ glyph. Zoom it to the maximum, and check the part in with the medium horizontal line touches the outer archs. You’ll notice a small diagonal gap of exactly two points. You need a space at least this big to make sure the font’s won’t get filled and render like ink blots (I learnt this trick from the guy from AtomicMedia.net<\/a> some 4 years ago, although I don’t think he has this on his site anymore).<\/p>\n

5. Remember to change the font name and information before release.<\/p><\/blockquote>\n

Cool, huh? I think so. And I’m not even a communist.<\/p>\n

PS: It’s important to note this template file was created solely by me and not copied and\/or modified from any other source. I actually went through hell to get this font’s metrics to work correctly – even though in the end they’re pretty simple dumb numbers – and I think the result is satisfactory enough to let it be released like this. Comments and critics are appreciated, though.<\/p>\n

Update<\/b>: Brew<\/a> just pointed out on the comments that the AtomicMedia.net article I mentioned is mirrored at UltraShock<\/a> in all its glory. More than being an article on font fixing, it’s an article that teachs how to create pixel fonts on a Fontographer. Pretty cool.<\/p>\n

I’d like to point that I disagree with the way the no-fill solution is done, however; I like to make “open” fonts myself (see step 4, above), and keep the vertical and horizontal lines straight on the grid, leaving only a single diagonal opening on one single. Both solutions have the same result on its minimal (ideal) font size, but since there’s a bigger modification on the color weight, bigger path modifications such as moving one entire vertical line will produce errors earlier on greater sizes. That’s a really good article and a breakthrough when it was published, but use caution when doing the no-fill fix.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ok, here it is: a software to painlessly create so-called pixel or bitmap fonts, SimpleFont. It’s a commercial software and I haven’t tested it already, but some people might be interested. Via Quasimondo. While we’re on the subject and I’m feeling like Santa Claus on crack, I remembered I had to make public my special […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26"}],"collection":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":0,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26\/revisions"}],"wp:attachment":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}