Monthly Archives: March 2012

Humanizing Handwriting

Cthulhu Reborn has been getting quite a bit of additional traffic over the past few days thanks to it being mentioned, initially over on the forums, but then over on the dark-king-of-all-Lovecraftian-blogs, the excellent Propnomicon (how cool!). The source of this unexpected interest is … well, something quite simple really: the blank Essex County autopsy form I posted here back in December.

As mentioned previously, this form was something I created for a series of scenario handouts for a huge and prop-heavy Call of Cthulhu adventure I’m still only part-way through typesetting and designing on behalf of a (fairly well-known) CoC author. So … while it will probably be a while more before the final book/PDF is complete, I thought it might be kinda neat to share one example of what *I* have done with the Essex County Autopsy form:

Some Thoughts on Handwriting Fonts

Revisiting this design reminded me of all the work that goes into trying to emulate real-world handwriting. Why is that? Surely there must be some good handwriting fonts out there that will do the job out-of-the-box? Well … I guess it comes down to exactly how realistic a look you are going for. Now … I like handwriting fonts as much as the next person (although they give me lots of headaches). Some of them are even pretty good approximations of letter-shapes that mimic the way people really write. But, with the vast majority of text set with these fonts if you look closely at the regularity of the letter-shapes upon repetition, the crisp straight baselines from computer typesetting, and the regularity of character spacing … all these things make passages look not-quite-human.

To demonstrate what I mean, and some of the tricks I have learned to try to “humanize” text formatted using handwriting fonts (used in the above prop), here’s a simple example. The message below is formatted using the excellent HPL Historical Society font based on the cursive handwriting of H.P. Lovecraft.

Now, that’s a great font … and even straight out-of-the-box it looks pretty reasonable as a simulation of human handwriting. But … if you look closer, you’ll notice a few things. The capital I character repeated in both lines looks exactly the same in both renditions. The lower-case T is also conspicuously identical in angle and weight in each of the half-dozen places it appears. And the baseline is dead-straight, much moreso than a real person would create. Now, none of these are failings of the font itself (most fonts only include one version of the upper-case I glyph for example), and for short passages of faux-handwritten text they are probably fine. But when you’re putting together long passages using a font like this, the repetition and regularity of the font definitely dimishes the overall illusion of the text having been written by hand.

So, what can you do about it? Well, I’ve experimented with a range of things over the past year or so, searching for ways to “humanize” the typeset text by introducing effects which emulate the natural irregularities and variations human beings apply when writing.

A simple technique that gets you a long way is simply selecting small groups of letters (and/or spacing) at random and tweaking their character height, then independently making a second pass of picking out short sequences of letters and tweaking their character width. Some letters will get tweaked both ways, some along one axis, but not the other, and some parts not at all.

Below is the result of this method applied (in Adobe Illustrat0r) to the text above. Some groups of characters have had their height tweaked by various different factors from -25% to +50%; widths have been tweaked in the +/- 25% range for some passages.

So what has this achieved? Well, look at the two upper-case I’s — they now have a similar, but not identical shape, angle and weight. Similarly, compare the various renditions of the lower-case T: each has a slightly different angle and size. Compare, for example, the ‘t’ in “writing” with the one which follows in “this” … they look similar, but quite obviously not the same.

Another trick that I’ve used is to apply a similar approach to randomly tweaking character spacing (tracking, to be technical). The passage shown below is the result of taking the preceding text, selecting sections and modifying the tracking by various values in the -50 to +50 range.

If you look closely, you’ll see how this has made some words look more cramped-looking (e.g., “appreciable”), while others are more spaced-out (“be no more”). This is fairly subtle, but it definitely enhances the varied look of the text and (I think) more accurately simulates the inconsistent spacing that people apply when writing.

Using Envelope Distortion

For a long time, the two methods described above were the bulk of what I did to try to make handwritten text look “realistic”. More recently, though, I have added another tool to my arsenal: using Adobe Illustrator’s “Envelope Distort” function. Without going into any detail at all, basically what this lets you do is to distort an object according to the shape of a different object. How does this help? Well … if you draw a non-filled rectangular path around each line of text (but on top of it):

it’s then fairly easy to “roughen up” this rectangle by hand. The easiest way in Illustrator is just to select the rectangle, pick the Pencil tool and start drawing close to the edge of the rectangle. Drawing like this edits the path, so if you trace around the four sides of the rectangle using the mouse (or a tablet), you end up with something that is rectangle-like, but not perfectly straight:

From there, all you need to do is select the first line of text and the corresponding pseudo-rectangle, click on the Object menu, select “Envelope Distort” and then “Make with Top Object”. Repeat for line two, and you have:

Note how the various renditions of the same letter now have quite different shapes, weights and spacing. In particular, compare the two capital I’s. Also, the baseline is also not perfectly straight and looks a lot more like what a person would do if trying to write in a straight line. Obviously, experimenting with different amounts of envelope tweaking is a good idea, since extreme deviations from the original rectangle generate things that just look weird.

Now … doing all this for a largish passage of text is pretty time consuming, particularly because it’s best to use slightly different settings / envelopes for each line of text (which means mixing it up differently each time … or at least being selective when it comes to reusing things). That’s why props like the filled-in Autopsy Report above take quite a bit of time to create. Is it worth it? Well, ultimately it comes down to how realistic you want something to look and how well your eyes can pick fake computerized “handwriting”. Problem is … once you start looking closely, you start finding fault with more and more examples of apparently realistically rendered writing …


%d bloggers like this: