The New York Times had a nice piece about logo art on May 31, 2009. Bill Marsh compiled a list of recent logo changes of big corporations, like Walmart, Kraft, Cheer, Sysco and Blackwater and discovered some commonalities among their redesigns. If you read the article carefully, you will see that the new logos actually apply many of the regular typographical rules which are often violated in logo design to make them “loud” and supposedly memorable. Interestingly, the trend towards all lower case seem to match the writing style of microbloggers who use their cell phones and other devices to just type along without considerations for capitalization. Happy reading!

In order to access DemoModule: VizBiz you will need to login as guest. The instructors of this online course, Martin Eppler, Remo Burkhard, Ralph Lengler & Patricia Klarner will give you a brief overview on the fascinating world of visualization for Business and Communication. Some of the topics cover (1) how we perceive and process visual information in the brain; (2) how to improve your (passive) visualization skills is by assessing visualizations from others; (3) exploring the differences between Information Visualization and Knowledge Visualization; (4) knowledge-intensive issues that can be made clearer through visualization methods; and (5) benefits of visualization in the context of strategic management.

I have discovered a very informative Website which compiles a comprehensive list of visualization resources. WikiViz was created and is maintained by Riccardo Mazza and is hosted by Institute of Innovative Technologies at the University of Applied Sciences of Southern Switzerland. For instance, under books, it lists the classics, like Bertin, Tufte and Harris. Or under videos it lists famous TED talks by Hans Rosling and Steven Johnson. Check it out!

There are some typographical rules when it comes to dashes, following or violating them can be easily spotted and is often used as first indicator for typographical sloppiness. While there are many different dashes, I only want to focus on the most common ones: hyphen, en-dash and em-dash.
The em-dash is often misused for a comma and overused “Dashes surround a series punctuated by commas: ‘The governor will face many problems—unemployment, declining revenue and rising costs—in the election year.’ Also use dash to mark an abrupt change in continuity of expression: ‘The balance of payments is—but you know all that.’ … Do not use a dash alongside a comma, a semicolon or a colon. … Avoid [] dashes in headlines because they are ungainly in large type” (source: NYT Manual on Style and Usage).
An em dash is ASCI character 151, so Alt+0151 (on the numeric keypad) inserts it. If its not available in your program, for instance in ASCII email messages, it is common to use to two hyphens.

The en-dash is also called the figure dash because it is used between numbers, like in phone number 724-934-0706 or to denote numerical ranges. If not available you can use a hyphen or a minus sign instead.

The hyphen is used for hyphenation—I guess you would have figured that—but, it can also be used between numbers in cases when an en-dash is not available and to hyphenate compound words.

The em-dash or m-dash has the width or the lower case “m” and the en-dash or n-dash has respectively the width of the lower case “n.” The en-dash is wider than a hyphen. There should be no spaces before and after an em-dash.

One of the most common type crimes is to use so called pseudo italics. To the defense of all who regularly use slanting instead of italic fonts, Microsoft with its popular MS-Word has lured us into slanting by placing the little “I” icon in the formatting bar. Their crime is to actually use an “I” instead of an “S” because the all what a push on this icon does is slanting. Slanting creates wide, ungainly forms of these skewed letters which makes them look forced and unnatural. The italic form of a font is not just a mechanically slanted version of the roman: it is a separate typeface. Letters have actually a different shape (Figure 1)! Photoshop calls these “Faux Italic” and they can be invoked using “SHFT+CTRL+I” when text is selected for fonts which do not come with a separate italic typeface.

The same concept applies to the type crime pseudo bold which just pads around the edges making the letters look blunt and dull. Bold versions of traditional fonts were added to meet the need for emphatic forms. Again, you cannot create these using the “B” icon in MS-Word (Figure 2)! Again, Photoshop calls these “Faux Bold” and they can be invoked using “SHFT+CTRL+B” when text is selected for fonts which do not come with a separate italic typeface. Resist using them!

Anti-aliasing is an often-used term when talking about text on a screen. The technique uses shades of gray to create the illusion of a curved edge. It is especially effective for presenting text on a screen at large sizes. At small sizes, however, anti-aliased text looks smudgy. Readers prefer pixel fonts.

I am often ask what “points” stand for and how actual font sizes relate to printed size on posters and on the Web. Here is the short explanation for font sizes everybody needs:
In typography, a point is the smallest unit of measure and is commonly abbreviated as pt. The measurements of type referred to the dimensions of a piece of metal bearing a single character when printing presses were used. The history of this measurement unit goes back to 1735 and a French guy who based it on the size of the king’s foot. As we know, foot size changes over lifetime and eventually they got rid of the monarchs in France. So, today we use a DTP point which is standardized and is defined as 1/72 of an inch, or approximately 0.0139 inch. Twelve points make up a pica, and six picas make an inch. A program which uses pica by default is Adobe InDesign where you can find it as measurement unit for page size (51p0 x 66p0 for 51 picas and 0 points x 66 picas and 0 points = 8.5’’ x 11’’ = US letter size page).

So, next time you want to have text half an inch high, you know that a point is 1/72 of an inch which means you need a 36 pt font to achieve this size.

Typography for posters should allow that titles are readable from at least 6 feet away, so use no less than 1-inch high type. Your text body font should be readable from at least 4 feet away, so use no less than ½ inch high type.

On the Web, font size can be determined in various ways and we don’t want to go into the details of Cascading Style Sheets or HTML. Jacob Nielsen, the Web usability czar, wrote already in 2002 about font size on the Web complaining about crammed pages with small font “Tiny text tyrannizes users by dramatically reducing task throughput.” Most browsers allow the user to change the font size (mostly with the keyboard shortcut CTRL and + and CTRL and -). This feature is very useful for people with visual impairments or for people who just like to read smaller or larger text. No Web design approach should disable the reader’s ability to change the font size!
Nielson recommends to use at least 10 point as default font size so that very few users have to resort to manual overrides. And in case your targets are senior citizens, use bigger default font sizes (at least 12 point). However, the actual size of the text appearing at the end user’s display depends on resolution of the screen and the screen size. So, a 10 pt font is certainly smaller on an iPhone (screen size: 3.5’’; resolution: 480×320 pixels at 163 ppi, with 3:2 aspect ratio) compared when displayed on a 50’’ plasma high definition screen (screen size: 48’’; resolution: 1366 x 768 pixels at 72 ppi, with 16:9 aspect ratio).
In general, avoid too many different font sizes in one document or screen display. A whole text book usually can be well structured with five different sizes.

Many learned to make two spaces behind a sentence in school, but you are not using a typewriter anymore, so just insert one space.

Why space-space is a no-no?
First of all, most typewriters used non-proportional fonts where every character is of the same width. For instance, consider a word like “skiing.” The lower-case i takes up the same space as the n. Having the two “i” after each other means there is a lot of white space. While reading, our minds separate sentences based on space between sentences. But, if there is an “m” at the end of a sentence, followed by another wide character, only separated by a period and one space, the resulting white space visually appears to be less than between two “i.” In other words, typewriter typefaces were designed in a way that all the characters occupy the same amount of space. These are so-called non-proportional fonts or monospaced typefaces (wide characters are squeezed; narrow characters are unnaturally wide). An example for such a monospace font is Courier.

See the example below.

However, practically all fonts used on computers are proportionally spaced typefaces, where the width of each character is customized to accommodate the natural shapes of the characters. As a result, the type sets more tightly, which makes word spaces stand out more. And, to conclude, this makes a single space after a sentence a sufficiently large white space, or visual cue, to separate two sentences.

When I explain this I often hear that people understand this, but for them after decades of writing like this there is no way they can change the habit of adding an extra unnecessary space after a sentence. You can try to use AutoCorrect options in your text processing software replacing automatically “period-space-space” with “period-space.” However, this does not work for Microsoft Word 2003.

Many of you might know some things about typography. For instance, most people adhere to rules, like “Always use sans serif fonts for digital displays!” or “Never use italic type on the Web.”
However, there’s more to typography than just following a few rules. Actually, there are many rules and some of them are more relevant than the others.

Here is the first important rule or concept: Hanging Punctuation!
Hanging (aka “Hung”) punctuation means that left aligned (or, for that matter any vertically aligned blocks of text, but lets stick with left for the explanation) need to be extended when they begin with punctuation marks, like a quotation mark. Without that adjustment, a left aligned text in a text block will appear indented (Figure 1).

Compare the same text block with proper typography adhering to the principles of hanging punctuation (Figure 2). I would recommend to follow this rule when working on headlines or sub headings and do not bother with it when you deal with a long text because this kind of manual adjustment would make a lot of extra work. Another tip along the same lines is to dramatize the quote by setting the quotation marks larger than the type. I would do something like that, for instance, on a scientific poster about a qualitative study where I cite verbatim quotes from my subjects.

If you want to learn more about this subject, take a look at the bible of typography “The Elements of Typographic Style” by Robert Bringhurst.

PS (3/23/2009): I just read a blog from CreativePro about the same topic. They noted that in Adobe InDesign you can specify that hanging quotes should always be used by checking “Optical Margin Alignment” which can be accessed in the Story palette, which is located under Type in the main menu.

Recently, I picked up a story in Slashdot which discussed a complicated visualization problem. Mathematicians and physicists work all the time with more-dimensional objects or ideas, but how do you show this to the layman who cannot read the formulas? The videos on Dimensions-Math show some clever tricks to get a feeling for what four dimension are like. The techniques begin by imagining how two-dimensional creatures, like those in Edwin Abbot’s Flatland, could get a feeling for three-dimensional objects. ScienceNews‘ Julie Rehmeyer reports as well about these mathematicians who are freed in their imaginations from physical constraints.