The Difference Between OTF and TTF Files, Illustrated with a Kitten Analogy

I belong to a lot of Facebook groups about fonts, because [a] I make typefaces, and [b] I’m obsessed with them, and own thousands.

The question has come up a few times lately: what’s the difference between an OTF (OpenType Font) file and a TTF (TrueType Font) file? This was the answer I came up with. Then I figured that it deserved a more permanent home so I could refer to it later. And illustrations.

So! I’m going down a weird road here: a typeface is like a basket full of kittens.

Both TTF and OTF baskets contain a big bunch of adorable kittens (and by that, I mean letters, numbers, and punctuation).

With both types of kitten-basket, you can pull out a set of kittens, line them up, and make kitten-words out of them. And both baskets can have the exact same kittens in them.

When you have a TTF basket of kittens, you put them in a row on the floor to create a kitten-word and they just . . . lie there. And probably fall asleep. They really don’t do anything on their own. They’re old-school kittens, and their basket is pretty plain.

The OTF basket kittens, however, know some amazing special tricks — but only if you put them together on a very specific type of carpeted floor (and by that I mean Photoshop, Illustrator, or any other piece of software with OTF capabilities).

For example: if you put Fluffy in a line next to Mittens, they may not look all that great together. Strange, awkward, funky. Maybe Fluffy has his little paw poking Mittens in the face, because let’s face it, Fluffy can be a jerk like that sometimes.

But because they’re OTF kittens, it’s written in their genetic code that if Fluffy is next to Mittens on the special carpeted floor, they evolve (like so much kitten Pokemon) into a single two-headed, two-bodied kitten named Fluffttens. Two kittens that travel as one, balanced so that they look just right together — ready for the cat show. (This combo-kitten is a ligature.)

Or if Biscuit and Scooter are next to each other, but because of their shapes, they have a huge gap between them. They’re like a capital T — it’s hard for other letters to get close, because the left and right sides of the T (just like these cats’ tails) mark the letter’s borders.

But because of the OTF basket and the special carpet, Biscuit and Scooter always know that if they’re placed next to each other, they should snuggle up tighter (this automatic adjustment of spacing is kerning).

Also: let’s say you pull Tiger out of the basket, but you’re not 100% happy with the way he looks— maybe his pattern of orange stripes isn’t quite right. Because he’s an OTF kitten, you can go to the stylistic alternates part of the basket, and the carpeted floor instantly replaces Tiger with Tiger2. He looks like Tiger in almost every way, but with stripes in just the right places!

OTF typefaces can have a lot of different other alternates, as well. You can replace lowercase letters with small caps, or fancier versions of letters that have a dramatic swash at the beginning or end.

The nice thing is, both TTF and OTF baskets CAN contain all of those special kittens (though not all of them do). But if you’re using the TTF basket, you have to dig around the basket a bit (using something like Character Map, or a Glyphs panel, or a font management program like NexusFont) and manually grab Fluffttens or Tiger2 or whichever fancy alternate kitten you want to use.

Here’s a look at Photoshop’s character panel, where you can immediately see if an OpenType font has any of these options. If it does, these various boxes will be shaded a darker grey. Just highlight a letter, give the shaded box a click, and your alternates will be applied.

So if you don’t mind digging your hand through a basket of kittens to get the cool-looking exotic ones buried at the bottom of the adorable pile, you can do just fine with a TTF basket. But if you have the right special carpeted floor to put them on, that magical OTF kitten basket will do a lot of the kitten-aligning work for you, so it’s a lot faster to get the exact awww-inspiring kitten effect you’re going for.

Thanks for reading! You can find my fonts (many of them free!) at Behance.net/geekmissy.

Show your support

Clapping shows how much you appreciated Missy Meyer’s story.