. . . and none of it below . . .

Except for some novelty typestyles, all type is drawn this way; the round letters are slightly bigger. Here it is in Helvetica Neue Bold . . .

The reason is to overcome an optical illusion. Since round letters touch the line only at one point, if they aligned exactly they would look too small . . .

. . . which may be easier to see if I remove the blue lines . . .

It applies to lowercase letters, too. The round ones extend slightly above the x-height line . . .

. . . which is easier to see up close . . .

Note that the flat parts stay on the lines.

It’s a small detail but universal. Here it is in Century Schoolbook . . .

. . . and Adobe Garamond, which has no straight lines at all. Note that the pointy serifs also extend beyond the lines. Same optical reason . . .

The effect is even clearer in print, with its higher resolution, than it is onscreen.

* * *

While we’re on the subject of type, MyFonts last week released an entertaining variant of Helvetica called Sketchetica, by Ossi Gustafsson of Hiekka Graphics in Finland . . .

.
Sketchetica is basically Helvetica sketched with a pen or sharp pencil. Back in the day, this is how designers would mock up pages for the typesetter and the layout people. It will be useful for any project that needs that rough-stage look without appearing hand-drawn. Ossi’s giving away the light version for free, which has Sketchetica near the top of MyFonts’ popularity list. Check it out.

.whi.

What we especially like is that Aeronaut comes in two parts — the letters are one part and the squiggles are the other — which means that it can be set (easily) in two colors:

It works like this. Standard Aeronaut has its adornments built in:

So what you do is first set your type in unadorned Aeronaut Base:

Color it, then Copy and Paste the copy directly atop your original:

While it’s in position, select and change its style to Aeronaut Parachute, which is one of its two squiggle fonts, the other being Aeronaut Balloon. I’ve left a ghost of the letters so you can see what’s going on.

What’s interesting is that the squiggles correspond letter for letter to the typeface, so everything shows up in position. If you kern Aeronaut Base for better letterfit, you’ll need to kern Aeronaut Parachute by the same amounts.

To finish, simply color Aeronaut Parachute a deep, Christmas green . . .

. . . and it’s ready for duty at the North Pole. Green and red, of course, are not your only options. Below is a monochromatic rendition; note that its adornments, which look appropriately like twinkling stars, are lighter than the letters:

And once Christmas is over, you have a great, period typeface that’s fun to work with all year:

——————–

Jane isn’t the only reader who took exception to our Extra. Said Peter Anderegg, “In your example you’ve dropped a photo behind the already set text with no regard to where on the photo the text lies. As a result, some of the text is difficult to read, as it is white text on a light background. I would suggest that this layout could have benefited from some ‘real designing,’ perhaps creating a semi-transparent box so that the text is highlighted, or resetting the white text so that it falls in the darker parts of the image.”

Chris Purcell added, “The idea is attractively simple, but you should have reminded your readers to place type on areas in the photo with enough contrast to make the type legible. The photo you showed had a large, dark area that the dropped-out type read clearly against. Too many designers use very busy background photos that make it difficult to read overprinted or dropped-out copy.”

For those of you who didn’t download the Extra, the page at issue is shown below. It is the index of a PDF-format helicopter hobby magazine behind which we added a full-page photo:

The specific contrast problem is in the area spotlighted above.

What we like about our page and your comments are the number of visual cross-currents going on.

Let’s start at the top.

Setting type on a photo has risks. The ideal photo would be smooth and even, and the type would be just the right style and size, just the right boldness and in just the right places for maximum contrast and clarity.

Reality is almost always different. We chose this page because it’s from a real magazine, not one crafted to make a design point. The photo and copy are from the editors, and the typeface and page layout conform to a house style and cannot change, which is typical of most periodicals.

Bolding the typeface or arranging it differently are therefore out of the question. Similarly, choosing a better image is not possible; we can use only what the photographer turns in.

Sound familiar? That’s what makes this a useful example.

Our “no-designing-required” solution has limitations. The photo must be in the ballpark—fairly smooth, fairly even, and at least somewhat interesting. Lacking that, the technique should not be used.

The “narrow, reversed-out” type (Font Bureau’s Benton Sans Condensed Book) that’s hard to read is, in the real magazine, quite clear, a point that’s lost at our reduced size and in low, onscreen resolution (above). We were hoping you’d give us the benefit of the doubt here. Generally speaking, a simple, sans-serif typeface like ours reverses more successfully than serif type, whose micro-details are easy to lose. High-quality PDF will always be clear; high-resolution press printing will be clear except in extreme cases, which consist of unusually small type and/or backgrounds loaded with color. Laser and inkjet printing can be murky. Adjust to suit.

Bolding a typeface to compensate for a background or other element is rarely a good idea, because it changes the voice of the type. We don’t recommend it. If your normal typeface won’t work, you’ll need a different photo.

We’re not fans of “fading a photo back,” either. Ghosting an image washes it out, which pretty much defeats the beauty or visual interest it would bring to the design. There are exceptions, but ghosting is not something we’d do just to make the photo usable. Use photos full strength. If they’re unsuitable for backgrounds, try working them into a more conventional layout. Failing that, edit them out.

Cousin of the ghost is the “semi-transparent box,” typically low-opacity white or black that lightens or darkens the background behind a portion of the type. There are many good uses for it but not here; like a typeface change, a box changes the voice of a page so should not be added only to compensate for a weak background.

As Chris pointed out, there are indeed designers who use too-busy background photos. We assume, however, that you are not one of them. You can tell if a photo’s suitable. For those almost-right shots, we suggest not sweating the small stuff. Few photos are perfect; most will have some too-light or too-dark spots. If they’re otherwise good, use them anyway; sometimes you can lighten or darken a small area without anyone noticing.

To close, reader Suzanne James writes to say that she “took one look at our article and was inspired to design a piece that got raves” at her meeting last night.

Thank you all. We love having your eagle eyes keeping us in line.

I really enjoyed the current article, “How to use that typeface.” In fact, I find every article informative and useful. I was wondering, though, what typeface you might recommend for the business in the article — Alamo Flags — and why you would choose that typeface. Thanks. — Laura Jones

Hi Laura,

To recommend a typeface, I’d have to know more about the business.

A couple phone calls told me that Alamo Flags sells flags of the world, buttons, pins, patches and so on. So it’s a gift-quality flag store. Its employees who spoke to me did not know the origin of the name or if it was connected to the real Alamo. For a real project, you’d want to know those things.

So let’s imagine that Alamo Flags wants its sign to convey a fairly authentic image.

First step would be what we call “World of” research. Ask, what is the Alamo? Where is it? What does it look like? What is its story? What associations does it have? Are there lines, shapes, colors, textures that we might use? And so on.

For a real project, the client would give you most of these answers. For our example, we’ll use Google.

We find that the Alamo is an old Spanish Mission in San Antonio, Texas. Early in 1836, it was site of the most famous fight in Texas’s war for independence from Mexico. The Alamo was overpowered by the forces of Mexican President Santa Anna, and all its defenders were killed. Among the dead were now-legendary Americans Jim Bowie and Davy Crockett. After the defeat, the Texas colonists regrouped, and the term “Remember the Alamo!” became a rallying cry for the remainder of the war.

The Alamo has its own flag (although its authenticity is uncertain) with its own colors.

As you can see, even brief research turns up a story, shapes, colors, textures and various visual associations. Actually do the research; don’t just guess.

For a typeface to be authentic, it would have to have been in use in 1836. Usually, you can make do without being so literal. But having an authentic typeface gives you the confidence of knowing—you’re not guessing, or worse—making something up. You may decide to change it, but you’re starting on solid footing.

The original designer was just making something up.

What typefaces were in use in 1836? One of the best was the excellent serif Caslon. Sixty years before—on July 4, 1776—Benjamin Franklin chose Caslon for the first printing of the United States Declaration of Independence. Today, Caslon is available in many styles including several that are aged or distressed and look quite old. Caslon is an excellent text face.

In vogue were “fat” typefaces, some of which had extreme stroke-to-serif differences, like Adobe’s Madrone and Engraver’s LH and Linotype’s Inflex MT. Other fat faces were more slab-sided, like Adobe’s Blackoak.

Also popular were Clarendon-style typefaces, which have slab serifs but most of which are more moderately proportioned. And the calligraphic styles of writing master and engraver George Bickham set the standard for script typefaces.

Although without more research we don’t know what typefaces were present at the Alamo, any of these are entirely plausible and would be suitable on the sign.

So that’s the process. Pick a goal (“authentic” is only one possibility out of countless many), write the creative brief, do your research, then design to it.

Below, two possibilities. (Click for larger versions)

Engraver’s LH

ATOrlando and Bickham Script