Week04.02 Typographic Influence - UX-UI-Design-Lab/DH150-viz GitHub Wiki

Agenda: Typographic influence

  1. Font in digital age
  2. Psychological studies
  3. Depth perception

assignment04

Design guideline for typography

Font in digital age

What is your reflection of the part1 activities about the typography design like?

My first font design was in 1995, my 2D graphic design class - we drew the outline of the typefaces on the A2 size grid paper and filled in with Gouache paint by very thin brush. We used a 1mm Rotring pen and mechanical drawing equipment -- there were a digital tool (Corel draw) but it was nothing but manual vector drawing so there was a technician to convert the drawing into a file - then, we had to decide the spacing like proofreading (with a red pen marking). It took a long time to finish the draft design roughly a semester. But it is still doable by comparing with the situation that testing type/typeface in a (metal) type. It would have taken a year to just make the typeset as you could watch in the Gutenberg project video. We can do it now, from draft sketch to print it out for testing about an hour (if we have the solid idea of the look&feel of typeface). It is really amazing how technology supports the publication processing and encourage individuals to dream of a personal publication. Only the idea of design matter.

The cost of industrial/professional fonts were pretty expensive -- as you probably check with some fonts with a full license when you searched for the name of the font. But luckily now, plenty of digital fonts come with the graphic authoring tool (thank you, Adobe!). Also, it was a bit of issue that internet browser, which supposed to show the contents as the designer planned -- because the fonts are heavy in terms of memory size, the design with the typefaces was not be able to transferred through the webpage. Therefore, the old version of browser used the system fonts (the fonts provided by the OS) by replacing the fonts with the font-family (in your browser setting you can still see that if there is no font found as the name described in css, it will look for the font family, like serif and show the default serif font of your browser). It was the concept behind of web-safe font -- people wanted to make sure that several specific fonts were offered across the OS system. The list you could see here https://web.mit.edu/jmorzins/www/fonts.html has the 16 fonts you can safely assume that any computer would show as you intended.

[list of web-safe fonts]

The web-technology has been fast evolving and now people developed the technique to reduce the font size dramatically so the font design can be offered as a part of style sheet (CSS) or downloaded ahead to be used to display the web contents. Quite amazing job has been done in terms of web font styling through Google fonts. If you visit fonts.google.com you can find various good quality fonts that can be used for the web design as well as the fonts for your system. It is a very well-designed and easy-to use font tool -- you can test your word or paragraph to check the overall look&feel and legibility/readability.

[image of http://fonts.google.com ]

If you want to try a free (amateur work) fonts - you may want to lookup this site for inspiration. dafont.com -- You can find fancy Christmas fonts. Most of the fonts are free in personal use (and works great as far as I experience) but it is your risk if the fonts have some deficits.

[image of http://dafont.com ]

And if you have your own font design, you can convert it to web font and use in your web project. (refer to the part1: activity02)

In sum, it seems that we have plenty option of fonts. Then, should we be happy?

Psychological influence of typography

Unfortunately, typeface you choose does influence the reader's perception and understanding of the meaning.

In visual communication, typography is considered an influential design element in how people perceive a message [Swan, C. (1991)]. For example, identical messaged can be perceived as exhibiting more dominance and confidence when it presented in a large size, bold font and with narrow space between letters (i.e., kerning); the identical words in different typefaces can be interpreted as having different meanings [Alter & Oppenhinger(2008)].

When the messages look less professional but deliver the professional messages, it confuses readers – for example, when scientists used Comic Sans for the announcement about the new particle which was related with the Nobel Prize in Physics, people felt that the choice of typeface was impropriate comparing to the importance of the scientific finding - Higgs Boson discovery presentation by CERN.

CERN presentation in comic sans

Typographic choice can influence the perceived meaning of a message. Researchers found that the typeface contributes to a better impression of job applicant’s resume [Henderson, Giese, & Cote,(2004)] & [Penrose (1984)].

Also, typography influences the perception of a brand and memorability of an advertisement [Childers & Jass (2002), Doyle & Bottomley (2006)]. Identical city names(ex. New York) were perceived differently when they were presented in different(legible vs. illegible) typefaces, while identical sentences were rated more believable than others were when there were typographic changes [Alter & Oppenhinger(2008)].

Therefore, the typographic influence on the adherence to a message reveals that our visual perception can serve in a more fundamental level of information processing than has been thus far understood. Typography can serve as the initial constructor of meaning, rather than merely the surface level (“window dressing”) of presentation. Since the visual element is easily accessible before we scrutinize the source quality, our best heuristics for deciding if the message on a website is trustworthy seems to rely on the typography on the screen. When the typeface looks less trustworthy, the message could be evaluated as less trustworthy, as if the source was lacking in credibility[Wathern & Burkell (2002)].

This typographic influence on message judgment involves the interaction between the appearance of typefaces and the meaning of the message. People may judge the message if the visual cues of typefaces fit the meaning of the message, if the typefaces are congruent with the meaning of the message. Congruence heuristics refers to a way of thinking in which people favor information that matches their assumptive frame of reference. The result is congruence bias [Baron, Beattie, & Hershey (1988)]. People deem something pleasant when it satisfies their congruence bias; the new information can be processed more fluently or efficiently [Reber, Schwarz, & Winkielman(2004)]. The congruence bias will strengthen the confidence of an individual’s judgment.

In sum, it is a matter of distinction or contrast - people wanted to express something with typography itself, even if it doesn't match with the contents. Again, it is an interaction between form vs. function or style vs. meaning.

Ironically, when we design something, we want to do our best to apply the elements to deliver what we mean -- This is a quote from R. Bringhurst in The elements of Typographic style:

You are designing, let us say, a book about bicycle racing. You have found a typeface called bicycle, which has spokes in the O, an A in the shape of a racing seat, a T that resembles a set of racing handlebars, and tiny cleated shoes perched on the long, one-sided serifs of ascenders and descenders, like pumping feet on the pedals, Surely this is the perfect face for your book?

The best type for a book about bicycle racing will be, first of all, an inherently good type. Second, it will be a good type or books, which means a good type for comfortable long-distance reading. Third, it will be a type sympathetic to the theme. It will probably be lean, strong and swift; perhaps it will also be Italian. But it is unlikely to be carrying excess ornament or freight, and unlikely to be indulging in a masquerade.

When we talk about the type design and typography, people often refer to reading02-01: Crystal Goblet by Beatrice Warde. Please read this short chapter.

Now your question would be, what are the basic fonts I need to know to good to use. Introducing typefaces is literally a history -- so my introduction would be limited (so I won't do it). But to help you to start your exploration, here are some fonts many (graphic) designers can recognize. These are the fonts appearing on the inner cover of the book "Thinking with type" by Ellen Lupton.

But these are once-yale-graphic-design-professor Ellen Lupton's collection. Here is a reading02-02 from ["Just my type" by Simon Garfield] (CCLE) that introduce you the survey in 2007 by Cahalan about 1) the the most used fonts, 2) the fonts that are believed to be most visible, and 3) the least liked fonts. So you can see the tastes/evaluation of some of the graphic designers at that time.

The best practical guide how to choose typography sets, which I found so far, from this reading02-03 from ["The elements of typographic style" by Robert Bringhurst] (CCLE) -- it is good to consider the historical background of the typefaces. For example, according to Bringhurst, the most widely available typefaces like Baskerville, Helvetica, Palatino, or Times New Roman, they have their own strong personality and history, so they won't go with each other. So, you would better choose only one out of them.

Eventually, you will have your own collection of typefaces. That selection and how you utilize and modify the typefaces will define your design style (so eventually, I will be able to see you in your work). It is not by the expressive display fonts, but the plain texts for the contents and how you arrange the main information accordingly.

I may stop here; but there is one more thing I would like to explain -- it is not purely about typography but the general rule how we perceive the background -- or perceive the depth out of the 2-dim surface. It is a technique you can make your shape visually come front or you can push the background back. That means, even without the splendid decoration, subtle cues can make your main information more easily noticeable.

Depth perception

In the topic of pre-attentive attribute, we learned how something can be distinguished (or pop out) from the others by color, shape, and orientation. [for a recap, optional reading02-04, ch. 3 visual thinking for design by C. Ware] (CCLE).

The depth cues are the environmental information that helps us use to judge distances (towards-away) from our particular viewpoint. [reading02-05: ch. 5 visual thinking for design]

There are several depth cues we refer to:

  • Occlusion: when Object_A is covering a part of Object_B, we think Object_A is closer to us.
  • Size/texture gradients: the distanced object looks smaller than the nearby objects when they are assumed to be a similar size.
  • Linear perspective: parallel lines from the nearest point to the farthest look converging into a vanishing point
  • Shadow/shading: the shadow creates an illusion that there is a light-source (ex. sun) and make us feel the 3D space (height)
  • Aerial perspective/ depth of focus: Because the human eye focuses only a. specific distance, objects farther or nearer are blurred. So, the sharp image is more readily attract the eye.
  • Relative size/ reference object: if we know the size of the object, we will use that object as a reference to judge the other object size/distance. If there were two building of which height we know as same, we understand quickly the smaller one is farther than the other.
  • another Aerial perspective/ degree of contrast: some small particles in the air/water disturb the travel of lights, so the distanced object would look less saturated than the close one.

In short, if you can apply your background with these cues, less saturated and blurred, your main information gets closer to the eyes. If you have multiple blocks of information, you can apply any of the cue to make the something look more close to (like a bigger size without cover up).

Very thin inner shadow, or drop shadow effect also works very well to make the type outstanding -- but make the shadow subtle, small distance (ex. 1px) a little blurred (ex. 2px). If we can notice the shadow a too visible, our eyes notice that the effect is fake -- so will cause some backfire. But if you use that effect very smartly, it works wonderfully to make the main information (text) very clear to read.

Demo:

  • How to find the proper font style
  • How to use the font (ex. web_design)
  • How to adjust font-style, size, spacing (density), alignment
  • How to apply depth to the text (depth perception)

Assignment04: Design invitations for

  1. 10 year old birthday party
  2. wedding ceremony
  3. funeral ceremony
  4. inauguration ceremony (or grand opening)
  • Suppose that you host the event listed above. Design an invitation for your guest.
  • Choose the message (ex. "happy birthday") and information (ex. where/when)
  • No representative images should be used but only typographic variation / Use at least two styles of typefaces in one invitation - one for the main message (heading, title) and the other for the detailed information (when/where and details of the event).
  • Show four variations with Sans-serif, Serif, Cursive/script/display. (4x4 = 16 invitation cards -- if you want you can mix, but in total of four variation of birthday card for example, I would like to see at least one sans-serif, one serif, one cursive or similar)
  • The dimensions of the invitation = 4:6 (ex. inch, but your choice -- make it big enough to support the high-resolution printing), your choice of direction either vertical or horizontal (but keep the direction same across your variations)

The example of invitation card with only typographic variations:

[image- 10th birthday card design] [image- graduation party card design]

References will be listed here.

  • Alter & Oppenhinger(2008). Effects of fluency on psychological distance and mental construal. Psychological Science, 19(2), p.161-167
  • Henderson, Giese, & Cote,(2004). Impression management using typeface design. Journal of Marketing, 68(4), 60-72
  • Penrose (1984). A discrepancy analysis of the job-getting process and a study of résumé techniques. Journal of Business Communication, 21(3), 5-15