Type Effects: The Ins and Outs of Inlines and Outlines
Monkeying with the outlines of typeset characters is usually a shortcut to an ugly mess, but there are some simple—even traditional—ways to manipulate outlines to good effect. In this column, I'll look at inlining and outlining as representative examples.
In the days before digital type, these effects were applied photographically. In modern fonts, character shapes are defined by paths—vectors that have direction but no thickness. When the outline of a character is defined in this way, filling it in with black yields our familiar alphanumeric glyphs. Software like Adobe InDesign and Illustrator and QuarkXPress let you add new strokes that can follow a glyph's outline to dramatic effect.
Figure 1 shows the two basic variations on this theme. To add an outline, you define a new stroke that's built outward from the glyph outline. If you make an outline the same color as the type, you create a synthetic (and usually awkward) bold; outlines usually work better in a contrasting color. Inlines are built inward from the glyph's outline, so they overlap the character itself. The character's size remains the same. An inline created in the same color as the type is invisible, unless it's so thick that it either intrudes into the character's counters (the internal open areas in characters such as A and e) or are thicker than the thinnest strokes in the character.
Figure 1. The upper characters in this example show the before (left) and after (right) of adding an outline, which is built outward from the character's outer boundary. The lower character pair shows how an inline works by adding a stroke that is built inward from the character's boundary, leaving the character's dimensions unaffected.
A combination of these two creates a Comstock outline, named for the eponymous display typeface created in 1880 by the American Type Foundry. In a Comstock face, each character has a thin outline separated from the solid character by a narrow white gap, as shown in Figure 2.
Figure 2. This scan from an old type sample book shows the original Comstock face, with its distinctive offset outline. The term "Comstock" is sometimes used generically to describe faces that have this feature.Do It Yourself
Making inlines, outlines, and Comstock effects is easy, but making them successfully relies on restraint. In general, you should keep the added strokes narrow so you don't grossly distort the host characters. Also, these effects work best when used with sans serif types or monoline slab-serif faces, such Stymie, Memphis, or Rockwell.
In all cases, start by converting into outlines the text you want to modify. Only then do you have access to your program's full range of stroke application and modification tools. To do this in XPress, select the characters you want to modify and select Convert Text to Boxes from the Item menu. In InDesign, select the characters and choose Create Outlines from the Type menu.
Both QuarkXPress and InDesign offer multiple stroke styles, which makes it easy to create Comstocks and complex outline effects for selected characters. In InDesign, use the Stroke palette; in XPress, use the Frame dialog box selected from the Item menu (or from the Modify panel). InDesign also gives you the option of applying the stroke to the inside of the character outline, applying it to the outside, or centering the stroke over the outline itself, so that half the stroke extends outside the outline and half lies inside the outline.
Figure 3 shows how applying a simple double rule can create several outline styles when combined with altering the color of the rules and the gaps between them.
Figure 3. In the top sample, I created a Comstock outline in InDesign by stroking the outline of the character with a double rule. Below it, using a triple rule creates a double Comstock outline, although the effect doesn't work within counters. In the bottom sample, created in QuarkXPress, using a contrasting color for the gap between the double rule creates a fancier effect.
In Illustrator, the approach is more complicated because the program has no repertoire of stroke styles—there's only one rule on the menu, variable by weight and either solid or dashed. But after you add one stroke using the Stroke palette (again, aligned either inside, outside, or on top of the character outline), you can add more strokes using the Appearance palette. However, the strokes you add this way are always centered on the character outline, which limits your flexibility. Still, you can create most of the same effects of other programs with various stroke styles.
For example, to create a Comstock effect in Illustrator like the one in Figure 4, I first added a three-point black stroke aligned to the center of the character outline and then used the Appearance palette's Add New Stroke command to superimpose a 1-point stroke over it. I then used the Stroke entry's pop-up color menu to make the new stroke white. This left half of the thicker black stroke overlapping the black character and the other half floating out beyond the white boundary to create the Comstock outline effect. It's a bit horsey, but it works. It also creates the possibility of creating a border composed of a whole rainbow of colors by superimposing increasingly narrow strokes one on top of the other.
Figure 4. Illustrator's Appearance palette lets you layer one character outline stroke on top of another. Here, a narrow white stroke over a wide black one creates a Comstock outline.
Whenever adding strokes to any character outline, keep in mind the effect on the character's size and alignment. Often, adding a stroke outside a character's outline will cause it to sink below the baseline by the width of the stroke. When such a character is a drop cap, for example, you'll have to use a baseline shift to pull it up to align again on the baseline. Likewise, such characters will also become taller, and if top-alignment is crucial, you may have to use a smaller point size for the character to get its net size correct.
Liked This? Read These!
KAPITZA SHOP, a new online shop specialising in picture fonts and illustrations, presents its' new release Creatures, an animal outline font. Creatures consists of 40 cute and creepy animal outline... Read More
This video tutorial is excerpted from "Total Training Inc." Total Training has many more titles like this one. Click here to learn more. Read More
The Character Palette in Mac OS X is a very cool font viewer and character selector -- sort of like KeyCaps on steroids (see Figure 1). Unfortunately, for some reason Apple made it very hard to get... Read More
TypeTalk is a regular blog on typography. Post your questions and comments by clicking on the Comments icon above. Q. Why should I care what the names are for parts of a character? Does it... Read More