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.

Typography doesn’t sound like something which could be fun, but I saw a 3-minute video which shows what you can do with characters. In this TED video, Rives tells a typographical fairy tale that’s short and bittersweet. Watch Rives: A 3-minute story of mixed emoticons!

This post will start a series of typographical postings which intend to explore the basics of typography. If you want to design a poster or a chart or anything which includes text, a basic understanding of typographical concepts and the application of the most important typography rules is essential.

Video and other media usually enhance a presentation. But, they need to be designed well (no cheesy YouTube videos). In general, a video is much better than a live demo. I have yet to witness a live demo that worked perfectly and started without delay or setup during the presentation, which makes every audience restless.
Here are two very different examples of videos produced to showcase projects. The first one is a demo of an online community which we have created for a grant-funded project. The Digital|Vita system was designed by a team of masters students in human-computer interaction at Carnegie Mellon University. It allows users to manage biographical information, output this information into several commonly used formats (e.g. NIH biosketches), and assemble research teams through expertise location and a social network. The system is currently in the prototype stage. It was put together in Adobe Premiere Pro and took quite a time to produce. Goto the project page and select a video based on your bandwidth.

A much more low-tech approach can be accomplished by using a video camera and a well-lit table and a few pieces of paper. I have seen this the first time on YouTube with a video about the “My Location” feature on Google Maps. We have reused this idea and you can produce a decent video with little effort.

“Complementary” in regards to fonts often refers to a combination of serif font and a sans serif font. But, the creative combination of both is often the tricky. See Figure 1 for an example of the combination of a serif with a non-serif font for a logo for an online community.

Note: If you use non-standard fonts install these fonts on presentation machine (or embed fonts in presentation). In general, nothing renders fonts as well as Adobe Acrobat Reader. Thus, consider displaying a full screen PDF show instead of PPT.

Color evokes feelings! There are two general categories of colors
• cool (blue and green)
• warm (orange and red)
Use cool for backgrounds because cool colors recede from us into the background and use warm colors for objects in the foreground, like text because warm colors move objects towards us.

While not strictly color related, you want to consider the following advice: If presenting in a dark room, use a dark background with white text; but if presenting with lights on, use a white background with black text.

You can learn more about colors at CreativePro.com which provides an introduction to color use for Website, but the information is good for presentations as well. If you are interested in learning more, I suggest you visit the Color Matters which even explains why school buses are yellow.