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.
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.
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.
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?”
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.
