Kinetic Typography

Readings

CMU Kinetic Typography web page:

http://www.cmu.edu/cfa/design/kdg/kt/

No authorship given, but seems to be adapted from a paper by Shannon Ford, Jodi Forlizzi, and Suguru Ishizaki (all CMU Dept. of Design)

Links to lots of examples

Old expressive form

• Expressing language through typeset text is an old (but still central) form of expression– Powerful due to strong human linguistic abilities – Typography extensively studied this century

• Going beyond just the content and into the form

New expressive form: Film

• Primarily visual (but also auditory) forms – Moving pictures

• Rather different properties– Much stronger story telling ability

• Writers have to work very hard to “paint a picture” in words• A good film maker can “set the scene” in a few seconds

– Easier to convey emotive content• Verbal: puts back “tone of voice” (prosodic features)

Films tend to be much more engaging– “Take you places” and make you feel things

Perhaps not as good at “communicating facts”– Less linguistic

Kinetic typography

• Now have the ability to do add some of the properties found in film to text (via dynamics)

Emotive powerEngagement

• Less passive• Can explicitly direct/manipulate attention of reader

Text Film

KineticText

A new opportunity• Earliest uses in film

– Needed text for opening credits but wanted to better match the form / feel of the rest of the film

• Separate thread from perceptual psych– RSVP: Rapid serial visual presentation

• Currently very widely used in commercials– Emotive content & attention manipulation both important

• But only recently really looked at systematically – Media lab starting late 80’s (Small, Wong, Ishizaki) – CMU since then (Ishizaki, Boyarski, Forlizzi, students)

Powerful but under exploited(A nice combination :-)

• Only widely used in limited domains– Lots of other potential uses (e.g., web, email, …)– Not combined with interactivity at all

• Not well explored / understood– Some systematic exploration of design space, but not by a

lot of designers– Not much in the way of recognized / reusable rhetorical

structures– Very little literature on this

• Could use help from tools– Currently quite hard to author

Examples

http://www.cmu.edu/cfa/design/kdg/kt/kt_examples/kt_kid.html

(local link)

What do we know about kinetic typography?

• A few general things

• Start on how to express a few specific things– Emotion– Character

• Longer list of things that can be manipulated for expression– Still far from complete

Content and form (in)separability

• Some text has ambiguous meaning that can be indicated by form– “I said I’m sorry”– “Oh boy is it nice out” (nice day1) (nice day2)

• But most have fairly clear meaning– Can only manipulate so far– Might turn sad into angry

but probably not sad into happy

Things that can be expressed: Emotion

• Analogs to affective meanings in human (and other) motion (nice day1)

• Use of prosodics – Timing, pace, rhythm– Tone of voice

Expressing emotion

• Tone of voice– Two parts– Paralinguistic

• Doesn’t typically affect meaning• Vocal qualities (e.g., huskiness, timbre)• Hard to express / weak results

– Linguistic / Prosodic• Can effect emphasis and/or meaning

Analogs for prosodic expression

• Pitch– Classic example: statement vs. question– Analog: large upward or downward movement

• Loudness (abuse example)– Used e.g., for stress– Analog: changes in weight or size

• Tempo– Used for overall emotional quality– Analog: movements with human meaning

Things that can be expressed: Character / personality

• Look to techniques from film – M. Smith, “Engaging Characters”

• Can manipulate aspects of – Recognition– Alignment

• Attachment• Subjective access

– Allegiance

Aspects of character creation

• Recognition– Identification and re-identification of a character– Normally based on invariance of characteristics

• Position, typeface, color, etc.

– Critical to establishing a character

Aspects of character creation

• Alignment (Oh No example)– Attachment

• Following characters in time and space• View follows (is attached to) some characters

– We see them or what they see– “Attached” / main characters are always in the scene– Others only in view when they come in contact w/ attached

– Subjective access• How much we know about the inner life of character• How much of emotive content is expressed

Aspects of character creation

• Allegiance– Viewers emotional and moral response to

character• Desirable / preferable characteristics relative to other

characters• Do we like them, are we “rooting for them”?

Attributes of form that can be manipulated for expression

• Visual properties– Color, saturation, brightness, etc.– Translucency (visibility) & focus / blur

• Spatial properties– Location, layout, alignment, …– Scale & Rotation– Pseudo-3D (order, occlusion & overlap, relative scale)

• Typographic properties– Typeface and style– Spacing (leading, kerning, etc.)– Glyph shape (pit stop ex)

Attributes of form that can be manipulated for expression– Timing, Pace, & Rhythm (silence ex)– Motion

• Wiggle, bounce, vibration, etc.• Path

– e.g., curvature of arcs, anticipation & follow-through

• Analogs to meaning in human and other motion• Inferred properties of material (stiffness, mass)

– Dynamics of other properties• E.g., change translucency, color, or visibility flash

Possible Structures: Hierarchy of Phrases

• Phrase– Entrance– Progression

• Manipulation of form(s) over time• Possibly sequence of component phrases

– Departure

Rapid Serial Visual Presentation (RSVP)

• A technique of particular interest– Saw a lot of it in the demos

• Display one element at a time (serially)– Typically one word, but also groups, or letters

• Originally emerged from experiments on visual perception and reading– Flash a word on the screen very fast, can you see it?– Can increase reading speed

• Eyes don’t have to move (esp. back to beginning of the line)• But can be tiring (esp. if not under user control)

– Have to pay attention– No opportunity to rest

Rapid Serial Visual Presentation (RSVP)

• Applicable to small screen displays– Trade time for space

• Reuse the same (limited) space over time

– Not necessarily a tradeoff• Same or better performance in much less space

– But can be tiring

• Single words can be large (less resolution issue)

• Provides independence between words etc.– Can manipulate e.g., size without worrying about

effects on the rest of the line

Other recurring themes / techniques

• Applied to different levels and purposes– e.g., Word emphasis

• Wiggle / shake, grow, fade, retention, etc.

– e.g., Direction of attention• Flying, zooming

• Need to be categorized and characterized better

Wrap up

• Lots of potential here– Adding emotive content

Appeal, liveliness, desirability

– Direction of attention Improved perceptionTool for story telling

– Win for small displays

• Under exploited• Needs more study (characterization of techniques)• Needs tools