Peacelight: Fonts from Your Dorm Room

"It looks like the kind of font they'd have on a top-secret envelope, marked CONFIDENTIAL," Andrew said. I nodded in agreement.
"But does it say, 'I'm going to kill you?'"
"I think so. It's good."

Wacom Bamboo writing tablet

As a web designer, I'm often hunting down fonts on the web to use in my projects. I'm no typography expert, but I've always been attracted to the perfect handwriting of the occasional classmate or the bizarre typeface on a new poster. So when I was starting to edit the look and feel of a website Andrew and I are building for an upcoming game of Assassins, I had to find the fonts to convey the perfect mixture of casual, spooky, and murder-mystery. But where do fonts come from? But if I had a little more artistic skill, could I make my own fonts? And what in the world is sans-serif? That, dear reader, is contained below.

Assassins website (note the fonts)

It used to be the case that web designers were taught to use a standard set of "web-safe" fonts, things like Arial, Comic Sans, Courier New, Georgia, Times New Roman, Trebuchet MS, and so on. These handful of basics were considered "safe" in the sense that most people, regardless of the operating system, make, or model of their computer, should already have these fonts installed. So when your website came up, they would be able to see the words.

More recently, however, programmers have figured out how to show people fonts that they don't even have installed, by hosting those fonts on the web. Google, for example, has begun hosting hundreds of quirky fonts online, with the promise that they will continue to keep those files free and available indefinitely, so that web designers can use them. But their selection is limited, and there's really no guarantee that "Merriweather Sans" won't be gone tomorrow.

That's why I like to host my own fonts for my sites. With a little bit of file conversion and some CSS, you can put almost any font into a site. So that's pretty cool... but what about fonts you can't find online? What about your own handwriting, or a cool new design you've dreamt up? Then it's time to create your own font.

If you're a PC user, you just need Microsoft's freely downloadable My Font Tool and a writing tablet. There are other ways, to do with scanning and things, but really a graphics tablet is the way to go, if you can get your hands on one. Just plug it in, fill out all your different letters and symbols, and viola - instant fontification:

"BrianHand" and "BoldStroke", the two first things I came up with

These are real fonts now - as real as any font is. I can install them, use them in Microsoft Word or Photoshop or whatever, and even maybe get them onto a website. But I'll probably want to put a bit more effort in on a third or fourth attempt before putting these out into the wild.

That "quick brown fox" stuff, by the way, is called a panagram. It's a sentence that uses all letters of the alphabet, so that you can see what each and every one of your letters look like. The common one is "The quick brown fox jumps over the lazy dog," but plenty of others will do. In the above example, I'm favoring some of the following:

The quick brown fox jumps over a glazed jelly donut.
The job requires extra pluck and zeal from every young wage earner.
Five or six big jet planes zoomed quickly by the tower.
All questions asked by five watch experts amazed the judge.

All of those are legitimate panagrams, some of them stolen from this website. Got any of your own?

And don't think I've forgotten - I promised to clear up some terms in the field. Very well: A brief lesson.

Serif fonts have little tails (or whatever you want to call them) attached to the letters. An easy example is Times New Roman. Sans-Serif skips the cutesy bits; think Arial or Trebuchet.

This infographic does more than I ever could on the matter.

Fonts are collections of symbols, but when you look at the way the design looks, you talk about typefaces. The font is the literal package, but the typeface is the creative work. Just as you wouldn't listen to a new hit mp3, you wouldn't be delighted to type in a new font [source]. So I've probably done a terrible job using these properly throughout, but at least you'll know better.

Oh, and kerning has to do with the space between the letters. Relevant XKCD: