Expressibility
INFO424 Information Visualization and Aesthetics


How have 500 years made a difference in the visualization of information?

Book of Hours (use of Paris)
Northern France, mid-fifteenth century

Hotel Guide Paris
Northern France, 21st Century



Experimental Typography as a Modern Art Practice
By the end of the nineteenth century, the features of marked typography included: the use of a wide range of type faces, styles, and sizes with mixtures and juxtapositions of these proliferating within a single sheet; the breakup of the page into various zones of activity which received very distinct graphic treatments; the use of vertical elements; and finally, the use of paragonnage -- the incorporation of several different typefaces and/or sizes within a single line or word. Even without the incorporation of distinctly pictorial elements, the marked text became decidedly more visual, acting on the seductive methods and shock effects that could be generated by graphic variety. In addition, the site of these works was public -- the posted handbills, theater announcements, government notices, publicity circulars and a myriad of other printed sheets came to be a feature of the urban landscape in the late nineteenth century. Drucker, p. 97


Advertising typography from La Publicite, 1913
Soiree du Coeur a Barbe, I. Zdanevich, Paris 1923
The outstanding feature of this poster for the Soiree du Coeur a Barbe is what is technically termed paragonnage: the assortment of various sizes of type within a single word... All this amounts to a single conclusion: Zdanevich manipulated the word as a series of letters in a graphic field, insisting on the visual properties of written language.


The Typography of Order Emil Ruder, 1959

The rule that a text should be easily readable is an unconditional one. The amount of text set on any one page should not be more than the reader can readily cope with; lines that are over sixty letters are considered difficult to read; word and line spacing are closely interrelated and have a most important influence on effortless reading....All attempts to infringe these rules are detrimental to good typography. Irregularities in the forms of characters, or alternative letters introduced to give variety to a single typeface, though sometimes excused by citing the 'handicraft' element in typography, are foreign intrusions that have really come in from other repoduction techniques.




The Typography of Order. Emil Ruder. In: Looking Closer 3: Classic Writings on Graphic Design. Edited by M.Bierut, et al. Allworth Press, 1999.

 

Logos
The logos collected here rely on typographically-derived forms, rather than on illustrations and symbols, to convey meaning. Using typography alone to communicate an idea is the most basic challenge a designer faces. The computer has had an unquestioned influence on this new typography by allowing the creation and free manipulation of letterforms and typefaces with a facility never before possible. Prior to the computer, most designers were limited to working with the type styles created by others. Few took the time or had the skill to create a new typeface, or even a new letterform for a logo. The new tools that allow easy creation of personalized typefaces have given designers a whole new vocabulary. New Typographic Logo, p. 9



This is a logo for a company that supplies computer training to corporations -- what does this logo say?     



This is a logo for a restaurant. What is the name of this restaurant, and why this treatment of the letter "a"?      



This is a logo for song by a rock band. What is the name of the band and why are the words of the name placed as they are?      



Exercise 9


Reading Text

The Poynter-Stanford Project on EyeTrack Research
"Where do eyes go initially after firing up the first screenful of online news? To text, most likely. Not to photos or graphics, as you might expect. Instead, briefs or captions get eye fixations first, by and large. The eyes of online news readers then come back to the photos and graphics, sometimes not until they have returned to the first page after clicking away to a full article."
Common eye fixations sequences in reading a newspaper:


Aesthetics for the Web
"Simplicity is, of course, the essence of good Web design. As our networked world grows increasingly complex, layers and streams of information constantly bombard us. If you want to successfully design for the Web, you will take control of your content and boil it down to its very essence."

"All design relies on contexts, both cultural and medium-specific ones, to communicate a message. For example, in a traditional print magazine, the reader immediately knows a bunch of things about it - how big it is, how to turn the pages, how to read the table of contents. We're only just beginning to figure out stuff like that with Web sites. Some examples include the underlined words that make your cursor turn into a hand - those are hyperlinks. Or the strip of color that runs down the left side of so many Web sites - that's part of our navigation vocabulary for now."

"Simplicity is absolutely essential on the Web. Successful Web design takes control of content and boils its presentation down to essential elements in a subtle visual context. And when you achieve this, you'll be saying much more than you ever could through long explanations of everything on your pages."

"The secret to clarity in Web design is to rigorously anticipate a user's process of discovery while eloquently and succinctly placing clues to your content across your site." Jeffrey Veen
Discussion example: Web Monkey

Discussion:

Print design is 2-dimensional, with much attention paid to layout. It is obviously possible for the reader to turn the page, but substantial interplay between different spreads is rare. Typically, each view is a design unit created for a fixed size canvas - often a big canvas when designing newspapers or posters.

In contrast, Web design is simultaneously 1-dimensional and N-dimensional.

A web page is fundamentally a scrolling experience for the user as opposed to a canvas experience. A small amount of 2-dimensional layout is possible, but not to the extent of creating a pre-planned experience with a fixed spatial relationship between elements. Users often begin scrolling before all elements have been rendered, and different users will scroll the page in different ways throughout their reading experience.

Precise placement of elements on a web page goes against the nature of HTML and can only be achieved to an approximation for pages that are able to adjust to different window sizes. Thus, 2-dimensional relationships between page elements are less important than 1-dimensional relationships (what's early on the page; what's later on the page). Jakob Nielsen

 

Text Strategies on the Web

 Project Gutenberg   Ditty   colin
Line Width:
"Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal." Bringhurst, p. 26
A slice across the page of Slate:



A slice across the page of Salon:



Openings:
The simplest way of beginning any block of prose is to start from the margin, flush left, this paragraph does. ...But if the text, or a new section of text, begins at the top of a page with no heading to mark it, a little fanfare will probably be required....The opening phrase, or entire first line, can also be set in small caps or in bold...Another excellent method of marking the start of the text, inherited from ancient scribal practice, is a large initial capital. Bringhurst, p. 63
Backgrounds:

White backgrounds provide the greatest contrast and, unlike colored backgrounds, are not susceptible to browser or monitor-induced change. If, however, a colored background is necessary, consider short-wavelength colors such as blue. Because of a phenomenon called "chromostereopsis" (sometimes called the "false stereo effect"), lines or objects constructed of shorter wavelengths (for example, blue, violet) appear to be more distant than longer (for example, red, orange) wavelengths of light, and vice versa.

Blue is an acceptable background color for other reasons, as well. First, while only about four percent of the color-sensitive photoreceptors (cones) lining the inside surface of the eye (the retina) are sensitive to short-wavelength light, they are nevertheless distributed farther into the periphery than are those cones sensitive to medium and long wavelengths. The cones we have that can process blue color, consequently, are relatively far apart, making it difficult for the eye to see distracting patterns (to find boundaries, in other words) in a blue background. Thomas R. Williams




Some rules of thumb in designing with text:
  • Lighten up

    Text is a dark element in copy-heavy publications. Let the background show through wherever you can. Resist decorating pages with clip art, heavy rules, background screens, etc. Focus on leaving space.

  • Create multiple 'ports of entry'

    Facilitate the skim reading process. Copy-intense pages need 'front doors' but side doors as well such as pull quotes and subheadings. Back doors might be bulleted lists, italicized or bold key points or occasional one line/one-word paragraphs. Scannable text is lighter and easier to access.

  • Shorten the paragraphs

    Adding paragraphs adds "air" to the text itself. An old newspaper standard is no paragraph over two sentences long. Short paragraphs are restful visual breaks when interspersed with lengthier ones.

  • Capitalize on key wording

    Make the key words of a headline or title larger than the other words.

  • Vary the levels

    Create a hierarchy of headlines.

  • Be contradictory

    Choose a display face with a look that's the exact opposite of what the copy is trying to convey. For example: Use a child's scrawling type as a heading on a serious business message.

Exercise 10

References:

Bringhurst, R. The Elements of Typographic Style. Hartley & Marks, 1996.

The New Typographic Logo. Designed and edited by Gerry Rosentswieg. Madison Square Press, 1996.

Drucker, Johanna. The Visible Word: Experimental Typography and Modern Art, 1909-1923. University of Chicago Press, 1994.

Nielsen, Jakob. "Differences Between Print Design and Web Design" January 24, 1999 [Online: http://www.useit.com/alertbox/990124.html]

Thiel, Philip. Visual Awareness and Design: An Introductory Program in Conceptual Awareness, Perceptual Sensitivity, and Basic Design Skills. University of Washington, 1981.

Jeffrey Veen. The Foundations of Web Design: Lesson 1

Jeffrey Veen. Aesthetics for the Web: Lesson 2

Jeffrey Veen. Advanced Web Techniques: Lesson 3

Thomas R. Williams. Guidelines for Designing and Evaluating the Display of Information on the Web Technical Communications, Third quarter, 2000.