Posts Tagged ‘typography’

Animated History of Typography

Monday, May 20th, 2013

One of my colleagues shared this animated short about this history of typography and I liked it so much, I thought I’d share it with all of you! It’s important as a designer to understand where type came from so that you understand the underlying historical references you’re making in the selection of a particular typeface.



Can You Spot the Typography Errors?

Monday, July 2nd, 2012


Today I was behind this lovely landscaping truck at a stoplight, giving me ample time to observe (and photograph) the typography of its bumper graphics. Unfortunately, a lot of the type could use some tweaks. Can you spot the “no-no”s?

A traveling typography lesson

Can you spot the typography flaws in this design?

  1. Generic font choice. The fonts used for this company’s logo lack imagination. It appears that the designer used a combination of Helvetica and Times, two of the most common fonts available. Selecting such common fonts fails to make the logo memorable and speaks to too large of an audience. A more specialized, lesser-used type face would be more likely to stand out against competitors and set a tone for the company’s brand personality.
  2. Type over a photo.Though it’s quite common to see type set against a photo, in execution it can be quite difficult.
    Type over a photo

    Proper placement of type over a photo. The logo was inverted for better contrast and placed in a region of the photo that was darker with less visual clutter.

    The designer here has chosen to lay the type over a busy part of the photograph, making it difficult to to see the contrast of the type against the background. A better option would have been to select a photo that had a large portion of “type space” in it instead. Examples of type space might include a region of blue sky, a grassy lawn, or a dark area, such as the rocks in the foreground of the photo they selected. If no other photo option were available, it would have been best to create a photo-free dedicated area of the layout for type, or to apply a subtle effect to part of the photo to blur or dull a region of the photo.

  3. Too many type effects.The designer here applied multiple type effects, most likely in attempt to solve the problem of too little
    Typography: too many text effects

    A close-up of the text shows outlined type, 3-dimensional shadows and highlights applied, and an orange glow effect.

    contrast between the type and the photo background. In doing so, however, the type has become more difficult to read! The green outline on the orange type makes the type look blurred from a short distance (as does the dark orange border around the tagline!). Plus, the designer here has applied a three-dimensional effect to the letters that neither enhances readability nor reinforces the brand (are we to surmise from the dimensional letters that they use a lot of rocks in their designs?) When it comes to effects, I’m of the camp that less  is more; a designer should have a good reason—that is, a good branding reason (the effect reinforces an element of the brand’s unique products or services)—for applying an effect to type.

My intent for sharing this example is only to instruct. It’s often by redesigning others’ layouts that we learn more effective solutions than the ones presented. Is this a bad designer who did this? I doubt it. With so many do-it-yourself print sites out there now, and plenty of people who don’t want to spend the time or money on good design, this type of layout is an inevitable result. Just remember, if you don’t invest in your brand, it will be more difficult to get clients to invest in you!

Hanging Indents: Perfecting the Bulleted List

Friday, March 26th, 2010

Has this ever happened to you? You’re typing a list in Microsoft Word or Powerpoint;  the first line is short so it looks just fine. But the second line is longer, and the text wraps below the bullet, like so:

An example of an incorrectly formatted bulleted list

An example of an incorrectly formatted bulleted list using manual bullets (Opt-8)

Clearly, your list needs a hanging indent: a typographical tool that allows your bullet, symbol or number to stand alone, while the text wraps neatly next to it.

One way to achieve this is to use your text editor’s “bulleted list” button. But what’s this? There’s a glacial gap between the bullet and the text, and it’s indented much farther than it needs to be!

An Example of a preformatted bulleted list

An example of a preformatted bulleted list, using the "Bulleted List" button in Microsoft Word. Notice the huge gap between the bullet and the text, and the extra large indent?

A more  elegant solution is to create your hanging indent manually, allowing you to control the spacing between the bullet and the text and to dictate the amount of indent. The result looks like this:

Example of a properly-formatted hanging indent

Example of a manually-formatted hanging indent. Notice the tighter spacing between bullet and text, and the more modest indent?

Here’s how to do it:

  1. Type in your own bullets, using the Opt-8 key command. Note: using manual bullets also allows you to make them smaller or larger as desired, or to replace them with a symbol.
  2. After your bullet, press the TAB key. Then, write your text.
  3. Press ENTER/RETURN after each item on your list. Note: to force a line break within the text of an item on your list, use the command SHIFT-RETURN.
  4. Highlight the text you want to format.
  5. Locate the ruler at the top of the page. Slide the bottom triangle over a tick on the ruler, and the top triangle back a tick on the ruler (you can adjust the amount of indent to suit your document by experimenting with these two settings).
    Hanging Indent Settings

    Settings used to create a hanging indent

  6. Click on a ruler line to generate a tab stop (black arrow). Slide the tab arrow to match the position of the bottom blue arrow.

Generally, I like to indent the space of two letters when calling out a paragraph of text. A full tab stop is overkill, and can make you quickly run out of space in your document if you have a list with several sub-lists.

To add another level of sophistication, consider customizing the space between your bulleted lines using the “Paragraph Spacing” function (under Alignment and Spacing in Word). In the following example, I’ve added 4pts of spacing between paragraphs:

Bulleted list with manual space after setting

Bulleted list with manual paragraph spacing

The hanging indent function is common to most programs that allow formatting of text, including Microsoft Word and Powerpoint, TextEdit, Adobe Illustrator, InDesign (use Command+Shift+T to bring up the tabs ruler) and more. Mastering this function will give you tighter typographic control and create documents that look professionally-designed versus created on a template.

Happy formatting!

Apostrophe or Prime?

Saturday, January 30th, 2010

I’m the first to admit that this is a super picky typography issue, but I’d be negligent if I didn’t point it out. I saw the following photo on the cover of the Business section of today Star and Tribune. Can you spot the typography error?

Delta sign: Prime or apostrophe

Can you spot the typography error?

If you said, “huh?” you wouldn’t be alone. Look at the apostrophe: see how it goes straight up and down instead of angling in toward the letters? That’s because it’s a prime symbol.

Still saying “huh”? Let me explain it this way: a prime symbol is the one that’s used to abbreviate foot. There’s a separate typographic symbol for an apostrophe, this one curves toward the previous letter. Here’s an example:

An example of primes and quotation symbols

Correct usage of primes and quotations

In print, the correct symbol can be inserted using a glyphs palette or key command. Many design programs also have a feature called “Smart Quotes,” that converts the default prime and double prime symbols to apostrophes and quotes.

For the web, typographic manipulation is less accessible. That’s why this very blog entry is polluted with incorrect examples. Please excuse me.

So why should we care? Well, think of correct punctuation as proper grammar. Sure, you can speak poorly and still get your point across just fine, but you won’t sound very smart or refined. Same goes for typography. If you spend the time to make sure your typography is correct, your layout will feel more elegant and refined, though most people would be hard-pressed to tell you why.

Plus, in the case of Delta, they paid a good chunk of change to have this sign printed. And then a newspaper photographer came and took a photo of it. Wouldn’t they have desired to have the right message come from it?

The Fuss about Ligatures

Wednesday, November 12th, 2008

I recently started working with an editor on a project. Scanning my document, I noticed she caught many of the typical errors: an extra space here, change curly quotes to hash marks for inches, change this word for that word. . . but what was this? She was circling all my ligatures!

“Turn ligatures off,” the comment said.

What? It must be a mistake! But then, further on in the document, I saw it again!

“What’s going on here?,” I wondered. I had been taught as a graphic designer that the use of ligatures was a mark of good typography. I decided to get to the bottom the issue.

First, let’s look at what ligatures are, and why they exist. Ligatures are combinations of letters, created as part of a typeface’s character set, to avoid collision of elements of letterforms and create more elegant transitions from one letter to the next. Some common ligatures are ff, fi, and fl:

Common Ligatures

Ligatures were popular for setting type in the 15th century, when metal blocks of letters were placed into tracks to compose a printable document. At this time, ligatures were a great time saver, allowing the typesetter to place a single “fi” block into the track instead of separate “f” and “i” blocks—a seemingly small act that made a difference in a book of say 50,000 words.

Later, with the invention of Sans Serif type (with letterforms that have less overlap), modern-era printing (which uses print plates vs. individual blocks of text), the typewriter (with forced equal spaces—monospacing—between letterforms and no ligature keys), and desktop publishing (a decendent of the typewriter, where ligatures are hidden as glyphs that require unusual keystrokes) use of ligatures began to decline. An article about ligatures on states that:

Richard Wendorf, in a 2005 lecture The Secret Life of Type, even suggests that the death of the ligature was brought about by a desire to reduce the number of type pieces, and was also influenced by the popular publisher John Bell (1745-1831), who abandoned ligatures.

So ligatures declined. But when did they become despised by editors?

A partial answer to this came when I was reading a follow-up comment to a blog entry about ligatures. The person had written:

A question that I have is what does the ligature actually do for usability. Is it to help the flow of reading, or is it just to make the text look better?

Another reader responded:

I know of no studies that have broached the topic of ligatures and readability. The ligature was used by ancient scribes to speed their writing; I don’t think the ligature is the product of a desire for improved readability; however, as Stephen Tiano writes below, perhaps they do perhaps inadvertently perform this function.

When I asked my editor about her ligature bias, she suggested that the ligature was a stylistic dinosaur that confused the reader, decreasing readability due to people’s relative unfamiliarity with these typesetting specialties.

When it comes right down to it, a well-designed paragraph of type should not call attention to individual letters or letterforms. Rather, it should be read effortlessly. In this vein, I considered that it is the task of the designer to determine if a font’s ligature detracts or adds to readability. Some fonts, like Adobe Garamond Pro, were created with readability in mind and have thoughtfully-designed ligatures that enhance the flow of text. Others, such as some sans serif fonts (to be honest, I couldn’t find a bad example—but I’m sure they’re out there), may be better suited to have ligatures turned off. Whichever route you select, take care that you use (or don’t use) ligatures consistently within a single document to avoid confusion.

As for the highly stylized, fanciful ligatures that exist in many faces: I would suggest that they are entirely appropriate in headlines or logotype, where we want readers to notice the beauty and style of the letterforms. Bookman, Mrs. Eaves, and Zapfino are examples of fonts that have exceptionally beautiful ligatures that the world deserves to see!

Are you a fan or foe of ligatures? Let us know! Leave a comment below.