Tag Archives: stacked

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.

Fontlympic Decathlon: The Dash

Our Decathlon continues with its sixth event, but first we’ll wrap up last week’s portion of the competition. A look at the scores from Friday’s Short Copy Text Competition:

Which leads us to our midweek standings (click image below for larger view). Eric Olson’s Klavika holds an impressive lead, but  Jackson Cavanaugh’s Alright Sans is battling it out with  Jörg Hemker’s FF Sero in the second and third slots. It’s still any typeface’s game as we head into the final five events.

Now on to hurdling these typefaces through em dashes, en dashes and hyphens. Deemed as the “spork of English grammar” by Mental Floss, the em dash (the width of capital ‘M’) can serve a variety of purposes in long strings of text — serving in place of other grammatical marks or breaking up the tone of your sentence. A bit harder to spot (and named after the width of the capital ‘N’), the en dash shows numerical ranges and can be used as a storied hyphen (when the second part of the hyphenated phrase has more than one word). Hyphens, of course, are a handy tool to join compound words and assist in multi-line text justification.

Polls close at midnight (Pacific). The next event in our Typographic Decathlon continues here tomorrow at 1pm.

Fontlympic Decathlon: Stacking

Our Fontlympic Decathlon continues with its fourth event, but first a look at the scores from yesterday’s Weight Competition:

Stacking well is a tough challenge for a face. Its ascenders and descenders have to fit together just so, or retract in order to cause as small a disruption as possible from one line to the next. Choose from the competitors the face that stacks best.

Polls close at midnight (Pacific). The next event in our Typographic Decathlon continues here tomorrow at 1pm.

Follow

Get every new post delivered to your Inbox.

Join 61,743 other followers