Tag Archives: layered fonts

Polychromatic Type: Dressing in Layers

The how-to portion of Thursday’s Type Trends comes a little early this week to accommodate its mention in the FontShop newsletter. By the way, if you’ve arrived here by following the links from the newsletter, great. Let’s get busy layering polychromatic type. Just to reiterate, the kind of type I’m referring to is any set of fonts that’s designed to stack one font on top of the next so that it can be set in multiple colors.

FF Primary's layers

Above is an illustration of FF Primary’s layers coming together. Shown in exploded view are FF Primary Stone Top, Right, Left, and Bottom in red (listed in descending value). The blue shadow below the integrated example is FF Primary Stone All. The offset of the shadow is my own placement. Chances are, if you’re a designer you can at very least figure out how it’s done on your own. but I’d like to give just a little more insight into the process. This will be brief, since I’m presupposing a basic understanding of working with layers in a composition program such as InDesign, and some color theory.

First, do it all wrong.

This is how everybody does it starting out. Paste-in-place text frames on top of each other in the same layer, setting the font and color with each step. Voilà. Not bad perhaps, but likely not very good.

Use layers.

Instead of piling up the text frames in a single layer, paste them into different layers. This allows you to select a given layer more easily, and reorder layers as needed.

Color palette

Assign new color swatches to each layer.

When ‘pasting-in-place’ the next text frame to the next layer, set the font, and then hit the New Swatch button in the Swatch Palette. This allows you to control the color of that layer’s type, even when it’s locked / not selected. (Control it by selecting and changing the swatch you create for each layer.)

Search and replace to change the phrase set in polychromatic type.

Since there are five copies of the same text all set in different fonts, should you need to change what it says, one easy way is to use Search and Replace to change all five instances at once. Be careful though that you don’t accidentally change something somewhere else.

Use a text variable to change all layers at once.

Smarter yet, use a text variable.

Since InDesign CS3 I believe, the ‘Type > Text Variables…’ functionality has allowed designers to arbitrarily assign a variable capable of holding a given string of text. So if you know you’ll be changing your mind a bit, define a variable and insert it into each of the layers. If pasting it in, remember to paste without formatting (Shift+Command+V or Shift+Control+V) otherwise your font and color for all the layers will all be the same, and you’ll ask yourself “what happened?”

color detail

Play with color a while.

Don’t limit yourself to only tints and shades. In the example above you’ll see that not only do I shift value, but I also play with warm and cool across the different three-dimensional surfaces of the type. I also base the shadow layer’s color on the background, but warm it slightly, rather than just multiplying a black tint overtop it. Lastly, if taking a job like this to print, do yourself a favor and expect failure at the first press check. Getting color right is tough. Getting color right when the whole concept is based on the subtle interplay of near-matching colors is quite tough. Be realistic with your printer and design to process.

Considerations for web/screen

Tim Brown at Typekit has some good examples of HWT American Chromatic Web in action, using the layered fonts with semantically smart markup and CSS. Until now I’ve left designing for the web out of this discussion, since while the technology differs, the basic principles apply across all media. Keep trying until it’s right.

Type Trends: Polychromatic Type

The popularity of multi-colored, or polychromatic type is on the rise. Not a sharp upturn necessarily, but I’m seeing it more and more. The concept I’m referring to is the bundling of a set of fonts with identical metrics, designed to layer on top of one another, so that a single character or letterform can be set in more than a single color. And since I love these, I’ve prepared an accompanying how-to portion called Polychromatic Type: Dress in layers, with all the “mechanical” details. For now though, I just wanted to point out a few features and general considerations, leaving most of the education to one’s own eyes.

Jump to part 2 – Polychromatic type: Dress in layers

FF Primary

Martin Wenzel’s FF Primary, 1995. Four fonts stack on top of one another here, each covering a top, right, bottom, or left side only. Playing with FF Primary tests one’s ability to understand and manage color relationships, which is 95% of getting these to work. The other 5% is knowing when to stop.

PowerStation

Michael Doret’s PowerStation, 2006.

Dusty CircusNathan Williams’s  Dusty Circus, 2011.

PTL Mia

Anne-Katrin Koch’s PTL Mia, 2010.

Hopeless Diamond

Jonathan Barnbrook, Marcus Leis Allion’s Hopeless Diamond, 2009. Especially in faces that imitate a 3-dimensional quality, it’s important to use a background color with a low enough value that it allows sufficient range for differentiating between highlight and shadow.

FF Primary

FF Primary again. While it may appear that gradient fills are at work above, what you’re seeing (or rather not seeing) is the harnessing of an optical phenomenon called simultaneous contrast. The eye sees that the blue shadow above grows darker as it’s cast farther from the red letters.

Grandes Vacances

Ryoichi Tsunekawa’s Grandes Vacances, 2007. Note how naturally topheavy the design is when both parts are presented in the same color. This is counteracted above by setting the bottom portion in a much lighter value, causing it to appear more or less of equal weight.

Ademo

Andreas Seidel, Carl A. Fahrenwaldt’s Ademo, 2011.

HWT American

Richard Kegler, Terry Wudenbachs’s HWT American Chromatic, 2012, presented out of register.

There are quite a few of these popping up that we don’t carry as well, notably, Juri Zaech’s Frontage, 2012, and Alex Sheldon’s Detroit, 2011. What other good ones have you noticed?

(Update: I found Dave Foster’s tweet a bit alarming—“No mention of Photolettering?” Though I’m sure this came with the truest intentions, and certainly no umbrage was taken by me, I felt the arm of the question mark reach out and give the back of my head a smack. How could I have left out Photolettering? While not marketed and sold as fonts per se, (well, some are, elsewhere) House Industries’s Photo-Lettering Inc. website, up since April 2011, has an impressive selection of polychromatic alphabets, and a great, easy to use interface. And not all of the faces are from the original Photo-Lettering Inc. catalog. See Erik van Blokland’s Federal, Jeremy Mickel’s Sobriquet. After setting the word or phrase, final output is PDF. Also, two good examples so far in the comments. Keep them coming.)

Follow to the continuation how-to below:

Polychromatic type: Dress in layers

Follow

Get every new post delivered to your Inbox.

Join 61,746 other followers