Stories You Play

Layout Contest tutorial part 1: Choosing fonts

I’ve designed over a dozen RPG books over the years. My process isn’t set in stone, but I have some good habits that help me tackle big projects. These first steps are often the most fun.

My process isn’t linear. I don’t decide one thing then move on to the next thing. Rather, I have parallel tasks that inform one another. At the start, I have a very visual thought in mind. I can actually imagine what I want the page to look like. That includes page elements, basic ideas about type (fonts), and how artwork might look on the page.

In short, that really boils down to:

• Setting up styles to the text
• Choosing fonts
• Imagining, and maybe actually sketching, a page spread
• Printing out all the art and just looking at it over and over again to “absorb” it & memorize it

For Conspiracy of Shadows: Dirty Hands, I wanted some way to convey the combined ideas of Medieval-ness (with a heavier historical feel than most fantasy RPGs) and the idea of diabolic horror. Like many of my designs, I do that by identifying the perfect fonts. Typography is probably my strongest design skill, so I use that skill to make the look and feel very strong and unified.

Here, the challenge proved much more difficult than it normally is for me.

I started with this — a small sample of the text with different heading sizes to play with:

First, the text doesn’t hasve a lot of sidebars or charts. There’s not really a need for an alternative typeface for those things. The body copy font will probably work fine.

Second, I want a body copy that is usable and high quality, but that isn’t too pristine. I wanted it to have a slight edge. Adobe Garamond, for example, is an awful fit for this. It’s a sinuous, voluptuous font. Very smooth. I kept coming back to Centaur, a font I used on Ben Lehman’s Polaris. But, it’s extremely thin and elegant. So, I kept looking. I had to look for over a week (usually this takes me a couple hours), and turn to my type bible, The Elements of Typographic Style by Robert Bringhurst. There, I discovered a pretty common serif font that I’ve never worked with called Jenson. It’s a close cousin of Centaur, but more sturdy. Perfect! I’m using Adobe Jenson.

Third, I wanted an evocative display font. I searched around on some font sites I’ve used before and finally stumbled on Bogatyr. I was looking for Eastern European influenced designs, and this one came up. It’s styled on Russian folktale art. Neat! I figured I was set.

But, meanwhile I was also looking for a good Blackletter, which Keith Senkowski hinted he wanted to see. Blackletters are great, but damned hard to read, I think. I’m rarely happy with them in any form. I tried my go-to standards (Goudy Old Style, San Marco, and Notre Dame were good ones I looked at), then it hit me. I wanted that typeface from the titling on the movie There Will Be Blood. I found two similar versions for free (non-commercial use, which is what I’m up to) with a little searching. Both are TrueType fonts, which I often avoid like the plague, but they were too fun to pass up. One’s called German Underground. The other — I kid you not — is called Kraut-type-a-fuck. This amuses me almost as much as it amuses Keith.

So, I finally settled on my typefaces. Adobe Jenson for the body copy and examples. I’m using German Underground for titling (it’s distressed and all grunge like — perfect for the horror vibe), and the Kraut-type-a-fuck for smaller headings. That leaves maybe some Bogatyr here and there for color, or maybe not at all.

Here’s the screenshot above reworked:

 

Happy Little Accidents. Tap tap tap.

See that type at the bottom of the screenshot? That was one of those moments I love in design. It was pure accident. I had that type as Bogatyr, just playing around with its Cyrillic characters. Later, I changed the style sheets to German Underground and forgot about that text on the bottom. When I saw the Conspiracy of Shadows title in that font, I knew I had a perfect logo title without really meaning to! That happens in design all the time. Just play around, or even make a mistake, and you see things a new way. It just takes time.

Here’s the titling so far:

Now that looks pretty sharp. Perfect for the game, and just what I was going after. That’s the key to design — putting your visual ideal into reality. You won’t hit it exactly every time. I don’t even come close. But, it’s taking an idea to real form, sometimes by accident, that gets you vision. Vision is crucial for design.

I’m going to have fun playing with that logo and some grunge styling on Keith’s artwork for the cover. But, I’ll get to that later.

Next, I need to tackle creating a page template for all the inside pages. I’ve got some vision for that already, and I’ll post screenshots when I get them created.

Layout contest starts June 1

The layout contest is almost here! I just received a last bit of additions to the Conspiracy of Shadows: Dirty Hands text from Keith. And, I received all his CoS artwork to boot.

That leaves one last bit of proof-reading on the text additions and finalizing the contest rules.

Look for it to kick off this weekend or early next week!