Archive | Symbols RSS for this section

Paramount 100th Anniversary poster

Paramount 100th Anniversary poster by Gallery 1988. Totally cool use of icons, and all 3 films from the Indiana Jones trilogy made the cut. Sadly, so did Justin Bieber. How many can you identify?

The ampersand

According to author Simon Garfield, “much of what one needs to know about the history and beauty of a font may be found in its ampersand.” Often regarded as a single character or glyph, the ampersand is actually a logogram representing the conjunction word “and,” and is actually two characters combined—the e and the t of the Latin “et.” The term ampersand being a conflation of the phrase “and per se and.” The term supposedly came into being when André-Marie Ampère began using the symbol in his publications, and people began referring to it as “Ampère’s and.”

The ampersand can be traced back to 1st century Roman cursive, in which the letters e and t were occasionally written together to form a ligature, while the modern italic ampersand is reminiscent of Renaissance cursive scripts. Regardless of the symbol’s 2000 year old roots, the ampersand remained a fairly unused symbol until the advent of the printing press in 1455.

It’s widely regarded that William Caslon cut the finest ampersand in the mid-1700s for the typeface we know as Caslon, but Claude Garamond’s italic ampersand is arguably the fanciest, clearest representation of the character’s origin—the combination of e and t from left to right. Both bear similarities and unique differences that set them apart, ensuring that one of the two will likely be the right fit for any type job. Caslon’s ampersand gives considerable weight to the e, using a capital of the letter, that cradles a smaller, calligraphic capital t within it’s counter. Garamond’s, on the other hand, favors lower case versions of both letters equal in height. The crossbar of the lower case e is gone, and replaced with an ascending, forward sloping stem that intersects the two letters. Both include a similar curled arm across the t, closely resembling an unfinished infinity symbol.

Caslon, above, and Garamond, below

Historically, the ampersand has been reserved for use in the names of businesses (particularly all too many law firms) and titles in the entertainment industry such as film, television, and role playing and video games. What started out as a shorthand symbol in handwriting, prior to the advent of mechanical type, has for many years since been considered taboo within sentence form. The ampersand did experience a revival in shorthand usage, however, with the growth of mobile phone usage and text messaging in the late 20th century.

Possibly the greatest testament to the ampersand’s legacy came in 2010 when the Society of Typographic Aficionados released Coming Together, a font consisting of nearly 500 ampersands, each unique and contributed by nearly 400 designers. A worthy showing for our most charming character.

For more ampersand fun, check out The Ampersand, a blog dedicated to everything ampersand-related.

Iconic


This image hit the web a few months back and received a number of reposts on pop culture blogs and design sites, such as LogoDesignLove.com, along with an accompanying video that explores the icon’s evolution à la Michael Jackson’s Black or White. The Batman icon is arguably one of our most recognized graphics, dating back to 1941 with the publication of Batman #1 (Batman first appeared in 1939 in Detective Comics) and receiving a huge pop culture push in 1989 with Tim Burton’s Batman. Most importantly, this evolutionary chart is a perfect example of what a good, recognizable icon is made of. After nearly 70 years of artists and designers tweaking the design, there’s no doubt what each iteration represents. But if this is such an exemplary icon, then why do all of these sites keep calling it a logo?

Design clients often struggle with our terminology when requesting graphics for their projects. Isn’t it a logo? What exactly is a wordmark? By the looks of internet chatter, sometimes we even get confused. This image provides an opportune time to clarify, so here goes…

There are 3 basic options when creating a graphic to brand events, products, companies, and what-not. The first, and most basic, is the icon. Similar to the Batman graphic above, icons are simple graphics sans-text. The Nike swoosh is a perfect example of this. When creating representational icons, the graphic should always capture the characteristics of what is being represented and be easily understandable. This is where the Batman icon excels, and where the icons on your computer or mobile phone screen should, but often don’t. So when you see a neon green swoosh on someone’s sneaker or one of the above bat-shaped graphics in the night skies of Gotham, there’s no questioning what they represent.

The other end of the spectrum is the wordmark, which is a text-only representation. Think Coca-Cola, FedEx, and Google. Wordmarks are representations of a word or name that are intended as visual symbols of a organization or product, and sometimes also referred to as logotypes. My personal guidelines are that a wordmark can only include symbols located on the QWERTY keyboard, but there are a number of designers that will incorporate further design elements (such as horizontal rules or custom-shaped letterforms) and still consider the product a wordmark.

And finally, when an icon and a wordmark really love each other, they make a logo. Logos incorporate graphics with text to accomplish the same fundamental goals as stated above. In fact, many organizations, such as Nike again, have both logos, icons, and wordmarks to represent their companies or products, and all three can be used in combination for successful branding.

Additional links:
10 mistakes in icon design

10 tips for effective icon design
Todd Klein’s history of the Batman logo