Pick a side: Do you indent the first line of your first paragraph?

It has been a while since I have taken a firm stance on some bit of typographic minutia that most normal people don’t care about, so today, I’m writing about whether you should indent the first line of the first paragraph when laying out narrative text. Get ready for a wild ride, similar to previous posts on drop caps, double spacing after a period, and the serial comma. (For those of you who are really into this sort of thing, I have created a category called “Typographic Minutiae” in our sidebar. Tell your friends!)

Not long ago, I was in a meeting with a freelance client whom I had not worked with before. I was nodding at comments and suggestions while going over the first draft of a newsletter: “Take all of the text from this Russian novel and put it on page 3.” Nod nod nod. “And in all the leftover space make this 50-pixel-wide photo huge.” Nod nod nod. “And use 17 different styles for these headlines.” Nod nod nod. “And indent the first line of the first paragraph in these blocks of text.” Screeching record-scratch sound.

To give you a visual of what I’m talking about, see the examples above. (Thanks to Bleacher Report for the text.) I have always set the first paragraph of a block of text, either at the very beginning of a passage or after a subhead, flush left, including the first line, as with the example on the left.

I remember a graduate school professor explaining it like this: You indent to indicate a new paragraph. There’s no reason to indent the first paragraph because it’s obvious that it’s a new paragraph since it’s the first one. Now go design a ball that is really a mask that will save the world. (Grad school was weird.)

Robert Bringhurst, author of The Elements of Typographic Style, which many designers consider the Bible of typography, says it like this:

The function of a paragraph indent is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.

If Robert Bringhurst is not an authoritative enough source for you, Wikipedia says this: “Professionally printed material typically does not indent the first paragraph, but indents those that follow.”

As with all typographic styles, if you follow a specific style guide, you should defer to it. (And whatever style you follow, be sure to follow it consistently rather than mixing and matching.) There are some style guides that say you should indent the first line of all paragraphs, including the first one. For instance, most newspapers follow the Associated Press style guide, which calls for indenting the first line of all paragraphs. That said, I have always hated AP style because 98 percent of its guidelines are intended more for saving money on ink than actual clarity of language. (Most newspapers also fully justify (on the right and the left) narrow columns of text, which looks ridiculous, so if that’s your model for good design, best of luck to you.)

Ultimately, it’s not incorrect to indent the first line of the first paragraph of narrative text. People aren’t going to point and laugh if you do it. But in my estimation, left justifying the entire first paragraph is one of those subtle nuances that sets professional design apart from amateur design.

Get to Know a Typeface! Connecticut State of Mind

We recently received this question from Friend of IBD Patricia Perry through our Ask a Nerd! link:

I am a font nerd. I collect fonts much the same as other folks collect small china porcupines. I recently discovered “Connecticut.” I am in love with this font. Although it is not appropriate for every venue, I find its form and grace appealing. What are your thoughts on this cute little font?

To my knowledge, Patricia has never been in my house and I’m certain that she does not have a key to the safe in the basement, so I’m a little freaked out that she knows about my china porcupine collection. Nevertheless, Patricia is the one and only person ever to review our book on Amazon and she gave it five stars, so any question Patricia asks, we answer.

I had never heard of Connecticut as a typeface before (though I do know that there’s a suburb of New York City called Connecticut*). There’s not a lot of information about the typeface available online, but my guess is that it was designed by someone with artistic talents, but not much experience in typeface design. The first clue to this effect is that it’s available as a free download from a number of sites, including FontPark and Fonts 101.

I agree with Patricia that Connecticut is graceful. (I can’t believe I wrote “Connecticut” and “graceful” in the same sentence after this month’s college basketball championship.) The individual letterforms are great. They have an elegant, organic form, accentuated by tall ascenders, like those seen in the lower-case h and d in the sample above.

What bothers me is the way the letters interact with one another. You can see what I mean the sample above (which was created by a random text generator). The typeface is meant to emulate script writing, so it bothers me the way the letters don’t connect. This can be seen most clearly in the space between the i and s of is.

Look at the h and e in Shea. Not only does the terminal stroke of the h not connect with the e, but the angle of the stroke where the h would connect to the cross stroke of the e is different, so the illusion that you’re looking at handwriting is broken.

I would take Patricia’s comment that this typeface is not right for every venue one step further. I’d say that with this typeface, you have to not only choose the appropriate venue, but also use it in specific ways. I would definitely not use this typeface for large blocks of text at a small point size. But at a large size, short words, like my favorite Scrabble word Qi, emphasize the elegant, organic form while offering the opportunity to minimize the issues caused by the way the letters interact (if you’re only using this typeface for one or two words at a large size, you can take them into Illustrator and fix those issues).

There’s a lot to like about Connecticut (the typeface, not the cheating basketball team and its corrupt coach). Patricia’s affinity for its grace and elegance is certainly warranted. But as with many free typefaces that do not come from established, well-known typeface designers, it’s important to use it carefully and pay attention to the details.

And whatever you do, avoid the Merritt Parkway at rush hour.

*Note to Shea: This joke is funny because Connecticut is not just a suburb of New York, it’s its own state. I thought I’d explain, given how little time in your life you’ve spent in or near New York.

Getting Your Letter Spacing Right

Earlier this year, I found myself in Malaysia, which is odd, because I don’t remember leaving myself there. (Please click here for an audio file of the rim shot that joke deserves.)

I was on Pangkor Island, standing at the end of a dead-end street that, had it continued, would have dumped travelers right into the Straits of Malacca. Luckily for travelers, the road ended and this giant billboard prevented people from accidentally ending up with soggy shoes.

Before I continue, I should point out that a few weeks ago, Shea wrote a post asking what sort of posts you, our readers, would like us, your bloggers, to write about. One response that cropped up several times was that you would like an occasional post about the nuts and bolts of interpretive design. (Very few of you said, “More baseball!”) So because you asked for it, here’s a post about letter spacing.

A lot of people use the terms kerning and letter spacing interchangeably. These people probably have more active social lives than we do, but they are using these terms incorrectly. Both relate to the space between individual letters, but kerning means to tighten the spacing, while letter spacing means to increase the space. And neither of these should be confused with tracking, which refers to letter spacing throughout a block of type rather than between individual letters. (Remember, you people asked for this.)

Anyway, back to Malaysia: I was drawn to the billboard in the same way local TV journalists are attracted to abandoned warehouse fires. (“It’s so awful, I have to show everyone!”) I just couldn’t ignore the stacked type, the faux Polaroids, and the composition that makes it look like all of the design elements were loaded in a cannon and fired at the billboard from 100 yards away.

This sign was nearly the width of a two-lane street, and they still ran out of room for the word “beach” in the bottom right corner. Perhaps had they not letter spaced those lower-case characters in the sentence “Keep the cleanliness of the beach,” they could have kept that whole sentence on the billboard. (Besides, readers recognize words as shapes, so letter spacing lower-case type is generally frowned upon.)

The first thing I noticed that made me break out the camera was the script type “Ceria di Pangkor,” set in our old default typeface friend Mistral. Script typefaces are meant to be strung together to look like handwriting. When you letter space them, it breaks the connection between the letters and makes it look like you were writing during a bumpy van ride.

As you blow type up (and by that I mean making it larger, not actually exploding it), the imperfections and inconsistencies in letter spacing become more obvious and distracting. Basically, the larger the type, the more important it is to pay attention to the space between individual letters. The word Pulau (island) pictured here drove me crazy. The blue outline actually causes some of the letter combinations (“ul” and “au”) to touch while others (“Pu” and “la”) are left with space between them. At this large scale, that letter spacing issue is obvious and distracting.

Letter spacing is more art than science. Most computer fonts have letter spacing built into individual characters (one of the many things Comic Sans does poorly), but variations in the shapes of letters and the immense number of character combinations make letter spacing nearly impossible to automate.

Typographers have devised lots of tricks and techniques to help them get it right. Some typographers like to look at their type upside down or in a mirror. (There’s a good post about this on the website Type Cast Creative, where the image above came from.) Others like to imagine balloons of equal volume squeezed between each letter. (The image here is from a website called Computer Arts.) One of my grad school professors swore by the practice of simply covering the bottom half of the type with a sheet of paper to see where the issues might lie. These techniques help us see the gaps between the letters as abstract shapes rather than seeing the letters of the words.

Certain types of letters are more likely to cause issues. Tall, skinny characters likes lower-case i and l or the number 1 are likely to have more space on either side that needs to be tightened up (which is why the year 2011 is going to be a bad one for typography). Round characters like o and e should be tightened up so that their middles come close to touching while their tops and bottoms are far apart. Angled characters like the capital letters A and V or the number 7 are likely to start out too far from their neighbors.

Regardless of which technique you use, the first step is to recognize that the computer does not do everything for you. Getting your letter spacing right means understanding that any display type, whether it’s in a brochure or on a billboard, requires attention to detail.

Had enough? Next week, tune in for jokes about baseball and photos of our kids!

Technical note: Every layout program has its own way of handling letter spacing. I work primarily with Adobe products, and I really like the “Optical” setting (as opposed to “Metrics”) in the kerning menu.

Going with the Flow

What’s not to like about flowcharts? They are capable of transforming a complex issue or process into something that is simple, cut, and dry. I love how they work, you respond to a question and you get an answer. Sometimes your answer leads to another question but eventually you get an answer. Order can be brought from chaos through a flowchart. Now, if there were a flowchart on how I should appropriately respond to my wife, I would use it all the time. Wait, let me refer to my flowchart on when to use flowcharts…okay, I’m not so sure it would really work well after all.

Wikipedia.org defines a flowchart as “a type of diagram that represents an algorithm or process, showing the steps as boxes of various kinds, and their order by connecting these with arrows. This diagrammatic representation can give a step-by-step solution to a given problem.” (I must admit I just used this definition of flowchart to add the word “algorithm” and the phrase “diagrammatic representation” to our searchable list of keywords that will surely bring hundreds of hits to IBD.)

Paul and I often get asked difficult questions like, What color should I use in this logo? Which is better, In Design or QuarkXPress? What is the best file format for my project? and Do you know where your children are? All of these would be easier to answer with a flow chart. So why not create a FC (that’s flow chart for the really cool) to answer the ever-present question of which typeface should I use?

Thankfully I didn’t have to do it. Twenty-two year-old graphic design student Julian Hansen has created one for us. You can view the full image here. The FC asks some great questions and at the very least conceptualizes the thought processes behind choosing a typeface. Of course, much like IBD, there is an insane amount of humor woven into the chart and it shouldn’t be taken literally. Though I specifically love the path to Futura and Frutiger, along with the questions that lead to OCR.  Oh yeah, there is even a path to Comic Sans (though I think you know where we stand on that path).

I wish design decisions could be this easy. For years we have advocated that one of the most important areas for designers, non-designers, and interpretive designers to grow in is the ability to verbalize to supervisors, co-workers, and advisory boards on the reasons behind design decisions such as font selection. As the designer, if you can’t explain why you made a decision to foster support you shouldn’t expect support. Saying something like I just like it, or because I said so, only works with my wife.

If you haven’t created a FC in while take the time to do so. I use them in developing complicated PowerPoint programs, to map project progression, and as a way to conceptualize problem solving/solution finding. There are plenty of programs that more than likely already on your computer to help you with the process or you could always use free downloads such as SmartDraw. You could also go on with life, as a normal person.

Research…blah, blah, blah!

Friend of IBD Steve Dimse sent us a simple email titled “Score one for Comic Sans!” The only content of the message was a hyperlink. The exclamation point made me suspicious, but I love spam (junk email and canned meat) so I clicked on the link. Steve let the link do the talking.

Let’s face it: Paul and I are hacks who have lured you to this website with false promises of providing insight into interpretive design. But if there is one thing that you can count on with IBD, it is Paul’s position on Comic Sans and my position on Papyrus (that and the fact that Lisa Brochu positions herself a far away from us as possible). That’s where comments about us being hacks, one-trick ponies, and broken records come from our wives.

Steve’s email echoes that sentiment with his exclamation point (maybe I’m just being overly sensitive) and the use of research (which should be saved for serious blogs). Since Steve didn’t explain the link, I was forced to read it instead of just looking at the pictures. The post from Jonah Lehrer is on the Frontal Cortex on Wired magazine’s website. Titled “The Educational Benefit of Ugly Fonts,” it had me at The.

The first concept that Lehrer presents is that research has proven that the more effort that someone has to put into learning, the more likely they are to remember it. In fact if you add rather than remove obstacles to learning, more is learned for a longer time. There’s new research in cognition from a collection of Princeton psychologists, Connor Diemand-Yauman, Daniel M. Oppenheimer, and Erikka B. Vaughan, who write about disfluency, which is defined by the authors as making the educational material harder to learn. Here’s what they said:

There is strong theoretical justification to believe that disfluency could lead to improved retention and classroom performance. Disfluency has been shown to lead people to process information more deeply, more abstractly, more carefully, and yield better comprehension, all of which are critical to effective learning.

Perhaps Paul and I owe you an apology for what we have been writing for years (and for that embarrassing incident in Las Vegas) but removing as many obstacles as possible in order to improve communication of interpretive messages is our story and we are sticking to it.

Here’s the interesting part (I know you have been waiting for this moment over the last two years): In the second portion of the study the researchers took standard instructional pieces (worksheets, handouts, PowerPoint presentations) and presented them to students in two formats. One was presented in Helvetica and Arial (IBD approved) and the second format was presented in Monotype Corsiva, Comic Sans Italicized, and Haettenshweiler (as is Comic Sans was not enough, but italicized, really). Okay, now here’s the interesting part, those students that used the materials in the second group (with Comic Sans Italicized) scored significantly higher.

This study demonstrated that student retention of material across a wide range of subjects (science and humanities classes) and difficulty levels (regular, Honors and Advanced Placement) can be significantly improved in naturalistic settings by presenting reading material in a format that is slightly harder to read. The potential for improving educational practices through cognitive interventions is immense. If a simple change of font can significantly increase student performance, one can only imagine the number of beneficial cognitive interventions waiting to be discovered. Fluency demonstrates how we have the potential to make big improvements in the performance of our students and education system as a whole.

How does can this be applied to interpretation? Don’t go all Haettenshweiler on you new exhibit project. We want our visitors to read and retain our themes but they have to be appealing to read in the first place. We also have to remember their motivations and their non-captive status, unlike the captive students. We are expected to know our audiences and adapt to meet their needs while still getting our messages across to them. Keeping the message clean, clear, and concise will improve your change of success.

And is it just me or does it seem strange that Wired magazine is still printed?

The Great Debate: Legible vs. Expressive

It’s one of the biggest dilemmas designers face: How much legibility are you willing to sacrifice in favor of achieving a certain effect? (Also, do you brush the cheese puff crumbs off your shirt right there at your desk or do you at least attempt to get them into a trash can?)

Friend of IBD Phil Sexton came to us with this question (the design one, not the cheese puff one) in regards to one of his projects, a poster for Eagle Theatre in Old Town Sacramento. The building, the first structure built specifically for use as a theater in California, was in use during 1849 and 1850.

For inspiration, Phil and colleague Robert Mistchenko looked to playbills appropriate to the period, like the one pictured here, the famous Boston John Wilkes Booth playbill from March 18, 1865. Of course, there was a problem, which Phil describes:

One of the great and fabulous things about old handbills is their total disregard for any design sense; indeed to our 21st century eyes, they are nearly impossible to read. If we were to be absolutely true to those times, our information would be nearly impossible for some people to decipher, and probably be seldom read. If we objectively meet good design standards, it would conflict horribly with our mission, and would stick out badly.

Designers love these old playbills, with their slab serifs and their wood type, precisely because they violate every rule in the book, but they are truly terrible at conveying information.

The most obvious rule these playbills violate is that you should limit your compositions to two typefaces, typically a serif and a sans serif. We encourage designers to select two typefaces carefully according to their specific needs and what they intend to say about their site or organization, then stick with those typefaces as part of a larger identity system. (There’s some leeway here for a third typeface, if it’s decorative and used more as an image than for conveying information.)

The intent of this rule is not to prevent designers from having fun, but to prevent interpretive media from looking like those placemat menus at diners (like the one from Uncle Bill’s Pancake House in Ocean City, New Jersey, below).

As with all design rules, this one can be broken effectively. This spin wheel at the New Belgium Brewery serves the dual function of conveying a sense of fun and confusing visitors who have exceeded the limit of four free samples in the tasting room.

Of course, none of this answers the question we started with. While there is no simple answer, I say you should at least attempt to get the cheese puff crumbs in the trash can, but if a few miss, don’t worry, the cats will get them.

In regards to that other question, I think it’s the designer’s challenge to achieve balance between legibility and appropriate, pleasing aesthetics, but we should err on the side of legibility. I believe our first obligation is to the information we’re meant to convey, our second to the aesthetics.

That being said, truly effective graphic design does both well. The solution Phil and Robert came up with maintains the aesthetic of the old-fashioned playbills, but uses only two typefaces. Of course, this poster does a lot of things that we discourage (using all caps, skewing type, and centering, to be specific), but all of these rules are broken in the name of achieving a certain aesthetic and conveying a certain meaning, so in all cases they are justified (well, they’re actually centered, but you know what I mean).

Phil reports that the final product will be printed on parchment paper with weathered edges. He first indicated that budget constraints were preventing them from printing on specialized paper, but Phil is a tormented soul and caved to the little design devil on his shoulder.

Ever since Phil asked me about using 19th-century playbill typography in contemporary design, I’ve been noticing around town this poster for the Fort Collins Winter Farmers’ Market. It uses the old-school playbill aesthetic, but with contemporary twists like color and peppermint mocha splatters. (That last part may be related to the fact that this particular poster was found in the Dazbog coffee shop near my office.)

While I think the Farmer’s Market folks have done a nice job with this poster (though the bright colors seem a little incongruous), I’m a little skeptical, because I doubt they’ll have cheese puffs there.