Font Designer

Block Font Design in Javascript

One of my pet projects for a while has been a "font designer" in Javascript. I was working on a presentation that needed to show a countdown that could be rotated, sized and colored arbitrarily. Although there are probably better tools for the job, it's the sort of thing that interests me, so I've been poking at it on and off for quite a while. Once the code points of the individual glyphs (the ones that represent the digits themselves) are defined, the display is a straightforward linear algebra problem as I discussed A few months ago. However, defining the code points themselves is something of a hassle.

I put together the code-point editor below to output the X/Y coordinates of each point; I've been adding features as I get time/think of one. I wrote the affine transformation code (translate) by hand, although the HTML5 canvas already has good affine transformation support, so that I could share data between the two canvases.

Click anywhere within the grid to add a point to the glyph being defined. Drag and drop points to move them around, and ctrl+click a line to insert a new point (effectively "breaking" the line). The "S" key starts a new shape disconnected from the current one, "C" closes the current shape, and the Escape key undoes the previous point add. As you draw, the character is previewed and the scaled down data points are updated to its left. It's not perfect — the biggest problem with it right now is the lack of support for curved (bezier) lines — but it's good enough to design some interesting digital-apperance fonts.


Add a comment:

Completely off-topic or spam comments will be removed at the discretion of the moderator.

You may preserve formatting (e.g. a code sample) by indenting with four spaces preceding the formatted line(s)

Name: Name is required
Email (will not be displayed publicly):
Comment is required
My Book

I'm the author of the book "Implementing SSL/TLS Using Cryptography and PKI". Like the title says, this is a from-the-ground-up examination of the SSL protocol that provides security, integrity and privacy to most application-level internet protocols, most notably HTTP. I include the source code to a complete working SSL implementation, including the most popular cryptographic algorithms (DES, 3DES, RC4, AES, RSA, DSA, Diffie-Hellman, HMAC, MD5, SHA-1, SHA-256, and ECC), and show how they all fit together to provide transport-layer security.

My Picture

Joshua Davies

Past Posts