University of Southern California Dissertations and Theses

Type Set : Exploring the effects of making kinetic typography interactive

(USC Thesis Other)

Type Set : Exploring the effects of making kinetic typography interactive

PDF

Download a page range

Download transcript

Copy asset link

Request this asset

Transcript (if available)

Content

TYPE SET:
EXPLORING THE EFFECTS OF MAKING
KINETIC TYPOGRAPHY INTERACTIVE

by
Daniel Anthony Ponce

A Thesis Presented to the
FACULTY OF THE USC SCHOOL OF CINEMATIC ARTS
UNIVERSITY OF SOUTHERN CALIFORNIA
In Partial Fulfillment of the
Requirements for the Degree
MASTER OF FINE ARTS
(INTERACTIVE MEDIA)

May 2011

Copyright 2011 Daniel Anthony Ponce
ii

Acknowledgements
I would like to thank my project team members Jacob Boyle, Andy Uehara,
Danny Poit, Charlotte Riffey and James Bulvanoski. Jacob, thank you so much for
helping me with design feedback and for help programming the most difficult aspects of
the game. Andy, even though you where massively busy, you still found time to come
and help out in as many ways as you could, which was a lot. Charlotte, you are amazing
and it was a pleasure to work with someone as professional as you. James, you were
instrumental in shaping the design and the narrative of the game. I thank you for being
there.
I would like to thank my project team members Jacob Boyle, Andy Uehara,
Danny Poit, Charlotte Riffey and James Bulvanoski. Jacob, thank you so much for
helping me with design feedback and for help programming the most difficult aspects of
the game. Andy, even though you were massively busy you still found time to come and
help out in anyway that you could–that means a lot. Charlotte, you are amazing and it
was a pleasure to work with someone as professional as you. James, you where
instrumental in shaping the design and narrative of the game; thanks for being there.
For all their guidance, I owe a great debt of gratitude to my advisors Peter
Brinson, Alex Neuse, Jeremy Gibson and Steve Anderson. Peter, thank you for teaching
me so much throughout the years and for encouraging me to think of the nature of game
design in a completely different way. Alex, thank you for taking the time to playtest my
game. Your feedback has been great and I have learned a lot from you directly and
indirectly. Steve, from the beginning you have been the one person who has said, “This is
iii

the best project ever!” You have encouraged me throughout the whole process and I want
to thank you for that. Jeremy, you have been a voice of reason whenever we met to
discuss the project. I take all your advice seriously since I know you are one of the best at
analyzing interactive experiences. I also want to thank Mark Bolas for the in-depth class
critiques, which influenced the shaping this project.
Thanks to my class, USC students and the entire IMD faculty for three of most
fulfilling years of my short life and for taking a gamble on someone like me. Last, but
not least I want to thank my family and my fiancé for supporting me in this three-year
adventure.

iv

Table of Contents
Acknowledgements ii
List of Figures v
Abstract vi
Introduction 1
Project Description 2
User Experience 2
Rules 4
Narrative 5
Scale 8
Motion 11
Font 14
Atmosphere 16
Playtesting 18
Discussion 19
Prior Art 20
Prototypes 24
Next Steps 27
Conclusion 28
Bibliography 29
v

List of Figures

Figure 1 – Narrative Structure 7

Figure 2 – Words vs. Emotions 8

Figure 3 – Capital Letters 10

Figure 4 – Tone-changer Placement 11

Figure 5 – Animation Sequence 12

Figure 6 – In-game Sentence 13

Figure 7 – Font Choice 15

Figure 8 – Type Set Fonts 16

Figure 9 – Color Change 17

Figure 10 – First Prototype 25

Figure 11 – Second Prototype 26

Figure 12 – Third Prototype 26

Figure 13 – Fourth Prototype 27

vi

Abstract

Kinetic typography-text that is animated and given expressive qualities – allows
for designers to express emotion and tone of voice better than traditional, print-based
media. This is accomplished through a combination of typographic treatment and
animation. One of the limitations of kinetic typography is that it does not involve user
participation. With my project, an experimental iPad game Type Set, I wanted to explore
the effects of adding interactivity to kinetic typography framed within a video game. In
the game the player must manipulate words using basic tropes found in kinetic
typography, such as scale and rotation, to affect the narrative of the game. By dissecting
the nature of kinetic typography in this paper and through my projects, I will explore how
interactivity can enhance and change the way kinetic typography is experienced.

Keywords
Interactive Typography, Kinetic Typography, Games, Video Game, Interaction,
Typography

1

Introduction
In our society the use of text is part of daily life and essential for the process of
communication and expression. Motion also has expressive qualities, as it is not just the
changing position of an object, but can also invoke the ideas of energy and dynamics,
which can be interpreted in different ways. When combined, typography and motion can
elicit and enhance the emotional impact of a word.
In 1954 Saul Bass revolutionized graphic design and the Hollywood movie title
sequence with the film, "The Man With The Golden Arm". Even the movie studio
acknowledged that Bass’ title sequence was crucial to the whole of the movie, and
instructed projectionists to open the curtains before the start of the film, allowing the
audience to fully appreciate Bass’ opening sequence (Krasner, 2008). This title sequence
was one of the first instances where animation, typography, music and graphic design all
came together to set the mood and story in the opening minutes of the film. This marked
the beginning of modern kinetic typography.
It is now common to see kinetic typography in not just films but also television
shows and commercials, as it has become a captivating way to gain people’s attention. By
manipulating the size, shape and rotation, and adding animation to text, kinetic type
designers have been able to capture emotion and tone of voice much better then with
static print-based typography. However, kinetic typography is a passive experience. This
paper theorizes that the addition of interactivity could further add to user engagement.
With my project, Type Set, I wanted to make kinetic typography interactive. By
making the game and interaction accessible and framing them within the context of a
2

game, I wanted to study the effect that interaction has on kinetic typography and how
interaction can change player interpretation of text.

Project Description
Type Set is an experimental iPad game that makes kinetic typography interactive.
The game narrative is about a phone conversation between the (nameless) protagonist, a
23-year-old slacker, and Sarah, the best friend of the protagonists’ girlfriend. The
objective for the player is to touch all of the positive or negative "tone-changers" in a
given level by manipulating the size and rotation of words. The words that can be
manipulated are the protagonist’s lines of dialogue. Players are directly manipulating the
words of the protagonist to change the tone of voice. Collecting a tone-changer will alter
the mood of the conversation in a positive or negative way depending on what type of
tone-changer is collected. When enough of either tone changer is collected, the player
may move to the next level. This means the player has the option to complete a level two
ways: by collecting all of the positive tone-changers or by collecting all of the negative
tone-changers. Depending on the way in which the player manipulates these lines of
dialog to collect all of a certain type of tone-changers, the narrative begins to branch.
This branching encourages players to experiment with the kinetic typography to solve
puzzles and explore the narrative.
User Experience
When the player starts the game, he/she is taken to a menu screen, which gives
him/her the option to begin playing immediately or look at an instruction screen. If the
3

player choose to play the game, there will be a short animation of a cellphone ring. The
first level begins after the animation is done.
At the top left of the screen are two counters, representing the number of positive
and negative "tone-changers" that have been collected. The word “hello” is in the middle
of the screen with two positive tone-changers and four negative tone-changers to the side
of it. If the player touches the word with one finger, the word gets bigger; if the player
touches the word with two fingers the word gets smaller.
Controlling the size of the word, the player will discover that if he/she touches a
tone-changer the appropriate counter at the top will increment. When the player has
collected negative tone-changers, the background color changes from purple to red, a
darker vignette appears. If the player has collected positive tone-changers, the
background changes color from purple to light blue and the vignette gets lighter. The
music will change to a faster melody when the negative "tone-changers" are collected or
to a slower one when positive "tone-changers" are collected. When either the positive or
negative tone-changer counter is full, a button will appear at the bottom right of the
screen allowing the user to progress to the next level. The player is left to decide if he/she
is ready to proceed. The content and narrative of the next level is determined by the way
the player decided to solve the puzzle (either through positive or negative tone-changers).
If all the positive "tone-changers" are collected, then the narrative will branch towards a
more pleasant branch, while if the player touches all of the negative "tone-changers" then
the narrative branches towards a more confrontational branch.
4

When the player chooses to go to the next level, another kinetic typography
animation will play. This time the player hears the voice of a woman. Sarah, the woman
at the other end of the phone, will have a condescending tone. These lines of dialog are
represented as non-interactive kinetic typography movies with voice-overs to give the
player the feeling that someone is reacting to his/her choices.
The rest of the play-through follows this format, where the player manipulates the
lines of dialog of the protagonist to collect all of positive or negative of tone-changers,
and Sarah responds to those lines in a kinetic typography segment. The puzzles get more
and more complex, and new modes of manipulation of words are introduced. By the end
of the play-through, the player will have completed ten levels and finished the phone
conversation with Sarah.
Rules
Keeping with my goal of making kinetic typography interactive, I will now detail
how I catered the game design to meet that goal.
Rules:
1). Players can only manipulate the protagonist’s line of dialogue.
2) If the word is colored white the player can touch it with one finger to increase
the size, two fingers to decrease the size of the word.
3) Words that have a glow can only be rotated. This is done with a one-finger
drag.
4) Words cannot overlap.
5) All words have to be visible on the screen to continue to the next level.
5

6) There are two types of objects that may be collected in order to proceed to the
next level: positive tone-changers or negative tone-changers. The type of tone-
changers collected affects the path of the narrative.
Narrative
Type Set is a game about phone conversations. The protagonist is a 23-year-old
airhead. He meet his girlfriend when they where both in college but couldn't figure out
what he wanted to study and decided to drop out. Meanwhile, his girlfriend has
been studying to be a doctor and is planning to attend medical school. They have been in
a relationship for five years, but he has not changed since they first met. For the last
couple of years, his girlfriend has been pushing him to do something with his life, but he
is so oblivious that he hasn't noticed and does not realize he is going nowhere. His
girlfriend has grown tired of waiting for him to do something with himself.
Sarah is the best friend of the protagonist's girlfriend, and she has been tasked
with delivering the news that the relationship is over. Sarah has never really liked the
protagonist, and for a long time, she has been waiting for this moment. She has always
thought her friend could do better for herself, and though she acknowledges the
protagonist is not a terrible boyfriend, he is selfish, lazy and at times, extremely forgetful.
The game begins when a phone starts ringing. The protagonist answers the phone
and says, "Hello". This hello can be said in either a positive or negative intonation,
depending on the player’s choice in the opening level. The person calling is Sarah. Her
dialogue and attitude are in direct response to the protagonist’s tone. The narrative
follows this structure, where the conversation branches based on whether the player
6

chooses to be positive or negative and Sarah reacts. The conversation and game last for
ten lines of dialogue from the protagonist. Figure 1 shows a flow chart of the narrative.
Players choose the positive or negative path via collecting a specific type of tone-
changer, which determines response of Sarah as positive, neutral or negative. These three
emotional states allow the player to experience a more natural conversational flow. For
example, if the player begins the conversation in a negative way, Sarah’s response would
be negative. But, if the player decides he/she wants to have Sarah to respond in a nice
way after being negative to her, it would require the player to collect all of the positive
tone-changers for two levels, as Sarah’s responses will go from negative to neutral, and
then, from neutral to positive. The neutral response prevents the conversation from going
directly from one extreme to another.
7

Figure 1. A flow chart showing the narrative structure of Type Set.
Narrative-heavy role-playing games, such as the Mass Effect series or Fallout 3,
give the player narrative choices in a given conversation with non-playable characters.
These conversation options boil down to three categories; positive, neutral and negative.
Each option the player can select is a completely different sentence. I wanted to take the
non-linear narrative approach of those games and adapt it; instead of giving the player
three different choices, the player instead must change the meaning of a sentence through
the physical manipulation of words. The player controls the tone of voice of the
8

protagonist, which is expressed through level design. Positive "tone-changers" are placed
where they can only be reached if the words are small, while negative tone-changers are
placed in a fashion which forces the player to make words bigger in order to reach them.
Scale
Letters by themselves do not have meaning other then to represent a sound or
phoneme, it isn't until a specific combination of letters are placed together that we begin
to create the written word, which has meaning. One of the main limitations of the
Romanized alphabet is that "in most cases a word does not look like the idea it
represents" (Woolman, 2000, p.32). For example in Figure 2, a side by side comparison
of a picture of an angry man and the word “angry”, shows that seeing the word “angry”
does not provide the reader with any quantifiable information about how angry the word
“angry” indicates. Thus, making the word is open to interpretation by the reader, while
the picture leaves less to be interpreted; only the motivations causing the person to feel
that anger. The single word “anger” requires a series of words to accurately describe how
much anger the person in the picture is feeling.

Figure 2. The word “angry” to the left, and the picture of the physical expression of the
word to the right.
9

Graphic designers are tasked with giving words a visual meaning even when they
are in the Romanized alphabet. Using several techniques such as italics, colors, etc., they
enhance the simple letterforms and extract their meaning in a way that is visual, as
opposed to internalized. "Italic is the standard form of emphasis. There are many
alternatives, however, including boldface, small caps, or a change of color"(Lupton,
2004, p. 94). As Lupton mentions in this quote, bold typefaces and capitalization can be
used to enhance the meaning of a word, but in today’s culture this can be misconstrued.
"When you write in all capital letters, this looks (and maybe sound) to many a recipient
as if you where shouting" (Tschabitscher).
The idea that simple capitalization of a word can change its intonation shows that
people have learned to interpret visual aspects in messages that are typographically
enhanced. The scale of the letters when they are capitalized, as opposed to being in lower
case, is a visual cue that the wording has emphasized meaning. Consequently, words with
a smaller scale that are in lower case convey a different set of emotions which are more
fragile and delicate, while larger all uppercase words are interpreted as being more
aggressive. This could be because lowercase words contain more circular shapes and
lines that create comfortable, pleasant, playful and generally positive feelings. Uppercase
words are comprised mainly of harsh lines and sharp shapes, which are good for
portraying feelings of frustration, loudness, rage, anger or pain.
10

Figure 3. An example of how the use of uppercase words can change the interpretation of
the sentence.
After learning this, using scale was the most intuitive way to convey emotion
within Type Set’s game structure. The gameplay is tied to the flow of a telephone
conversation, and allowing a player to have some control and expression within this
conversation was a main focus of the game’s structure.
11

Figure 4. A comparison of how tone-changers placement affects the players’ gameplay
and the intonation of the word. Yellow spheres are positive tone-changers; red spheres
are negative tone-changers.
Motion
Scale is a key component of kinetic typography to provide emphasis, but kinetic
typography is distinguished from static typography by motion. Print-based typography
conveys motion through the orientation of words, angular fonts and the movement of the
eyes, while kinetic typography uses traditional animation techniques to convey an
emotion and giving added meaning. Just as with comparing lowercase and uppercase
letterforms, motion also has a visual language. Circular movement of words can evoke
softer emotions, such as gentleness or kindness. Angular movement can represent
12

triumph, need, anger, or misery. Figure 5 demonstrates how form and movement can be
used to convey the emotion of a surprise and makes it feel as though it is a pleasant
surprise through circular movement.

Figure 5. An animation sequence (Woolman, 2004, p.41)
The speed of motion also plays a role in the emotions evoked by the experience.
Faster movement can create a powerful effect, as it implies energy and evokes intensity
of emotions, whereas slow movement is better at depicting emotions that are more
contemplative. Motion also has the ability to capture and direct the attention of the
viewers, since the human eye tracks motion innately, which can be used to guide a
viewer’s eye along a particular path (Krasner). This is why large exaggerated movements
13

are useful for explicitly transitioning the viewer's attention from one location to another
or from one object to the next (Krasner).
Following the motion components of kinetic typography, Type Set has several
types of motion that make the player feel like they’re in control of the motions and
animations within the game. In the game, all of the words that the player can manipulate
in a sentence follow each other in order, as demonstrated in Figure 6.

Figure 6. A sentence of dialog as it appears in the game.
This set-up allows for a ripple effect to be seen in the rest of the sentence when
the player performs an action. This ripple effect simulates the ability to animate the
words and helps with the impact of words that are emphasized. For example, if a player
scales up a word, all the other words in the sentence would be pushed away. When the
14

player rotates a word, all of the remaining words would follow that rotation. These
movements are not just the basis for game play, but also help emphasize certain words
the player thinks are important. The level design and placement of “tone-changers” also
influences which words should be emphasized.
Font
A challenge with making a game with type as the main visual was how to
represent separate characters. In Type Set, the decision was made to make the separate
characters distinguished through color and font choice.
Kinetic typography doesn’t have the luxury of images to represent ideas; the font
choice and animations together must convey all emotions and actions. The visual
characteristics of type, such as bold, italics, tapered, thin, and heavy, cause the viewer to
describe the fonts in more emotional terms, such as lovely, cool, obnoxious, irritated,
ceremonial, and spontaneous. Every typeface has its own visual and meaningful qualities,
which means that each can demonstrate a distinctive use and purpose for expressing
emotions. Awareness of these variants is key to selecting the appropriate combination of
typefaces that compliments the expressive meaning in kinetic typography, as well as
interactive typography.
15

Figure 7. An example of the different personality traits between two different fonts.
In Type Set, the font choice for the protagonist and Sarah, the best friend of the
protagonist’s girlfriend, must to be legible separately and when they were interacting.
The protagonist is a 23-year-old slacker, so the font had to reflect youth and laziness. The
font that I eventually chose was Crocante. The font is a slab serif, which is a font that is
characterized as thick and block-like. This makes the font easier for the player to read
while interacting with it, due to its large presence on screen. For Sarah, I choose LeHarve
Rounded because her character is supposed to be rigid and more mature, but at the same
time youthful. LeHarve Rounded reflects that with straight lines, which can be interpreted
as being more mature or having more stability, but the tips of that font are curved,
reflecting that she is still young.
16

Figure 8. Side-by-side comparison on the protagonist's font and Sarah's font.
Atmosphere
Atmospheric effects, such as color and music, reinforce the notion of being
positive or negative within the narrative. Though they have little direct influence over the
gameplay, the changes in color and music can subtly influence player decisions by
heightening the effects positive and negative tone-changers have on the atmosphere.
Color plays an important role in conveying the tone of the protagonist’s voice in a
visual way and helps the player differentiate between positive and negative “tone-
changers”. Color can have a profound effect on emotion. These emotions are triggered
more based on our psychological and physiological state at the moment at which we
encounter a color, as the same color can have different meanings (Fehrman, 2004, p.110).
Type Set utilizes color to reinforce the emotion, be it positive or negative. When a player
has collected a majority of positive tone-changers, the background color changes to a less
saturated color. If the players touches negative tone-changers, the color changes to
darker, more saturated color. Because the player-manipulated words are white in color,
17

the difference in background color can really make the words emphasized when negative,
when blending more when being positive.

Figure 9. Color change is dependent on the type of tone-changer being collected. The top
shows the effects of positive tone-changers while the bottom shows the effects of negative
tone-changers.
Along with color, music in kinetic typography helps set the mood of the narrative.
“In early exploration of kinetic typography, using different types of music with the same
kinetic composition have shown clearly how music can affect our interpretation of the
content” (Krasner, 2008, p.253). Musical cues not only enhance the emotions that are
being conveyed but also are integral to the timing of the animation. In Type Set, music
affects the player on two levels: directly and indirectly. Directly, music, much like color,
is dependent on the type and number of “tone-changers” that are being collected. If the
player-manipulated words are touching a majority of positive tone-changers, then the
music is slower in pace and more pensive-sounding. While if player-manipulated words
are touching a majority of negative “tone-changers”, then, the music is fast pace and
18

harsh. Indirectly, there is an influence on player decisions, as the type of music that is
being played, be it positive or negative, can affect the mood and state of mind that the
player is in. This can affect the type of emotional response the player may have towards
the narrative, which in turn effects the players’ gameplay choice of either collecting all of
the positive or all of the negative tone-changers.

Playtesting
When I began the project, I considered a number of different ways that the players
could interact with typography. Ultimately I wanted to mold Type Set into a game, the
first playable prototype was on a keyboard utilizing a similar button layout to a
platformer. The keys A and D allowed the player to scroll between words that players
could manipulate with the up arrow and down arrow keys they could scale a word with
the left and right arrow keys players could rotate a word. The sentence that players could
manipulate was “Who the hell is calling me?” During the first play test, I discovered that
at the start, players had a difficult time correlating the actions of the manipulation of
words with intonation of voice. Once players where informed that the scale of words
represented different tones of voice they became more engaged. Some players began to
narrate out loud the sentence based on their manipulation of words.
The second playtest the decision was made to port the project to the iPad mainly
to see how affecting words through physical touch would influence the player’s
manipulation. This play test utilized the same sentence as the previous playtest and a
19

control scheme that was adapted to the iPad. Even though the gestural controls needed
more refinement, it was clear the experience became more engaging, because the player
was beginning to feel a sense of ownership for the designs he/she created through his/her
manipulation of words. The addition of touch made the player feel he/she had more direct
control over the words and allowed the player to position words with better accuracy.
During later playtests, I wanted to know the effects narrative had on the player’s
manipulation of words. The first test was with a linear narrative and resulted in negative
feedback. The major problem was that there was no correlation between the player’s
actions and the narrative. By having a linear narrative, the player felt as though his/her
actions were inconsequential, so players became less interested in the experience as a
whole. I later experimented with a branching narrative. The response was that the player
was more engaged. The player now knew that their actions had direct consequences in
the narrative so the player changed the way the text was manipulated to not only solve the
puzzles, but also express himself/herself by creating unique designs and solutions for
puzzles.
Discussion
Making typography interactive has been difficult from a conceptual and design
standpoint. There are several factors that came into play when designing a game based
around kinetic typography such as the meaning of words, the environment, and the lack
of literacy in interactive typography. What made it even more difficult was the surprising
lack of research and lack of projects that revolve around the subject. As listed in my prior
20

art section, there have been some interactive typography projects, but they are all self
contained in the sense that they all have a different literacy for interactions.
With scale and rotation- scale in particular- I felt that I could convey tone of voice
and emotion particularly well through interaction. The advantage with scale was that with
Internet etiquette, modern graphic design and kinetic typography, there was already an
established literacy correlating size of words with tone of voice. With rotation, I found it
to be a highly subjective aspect of kinetic typography that is mainly used for artistic
expression based on what the designer is trying to convey. In Type Set, rotations give
players the ability shape and change the composition of the text and end up creating
unique designs and solutions to the puzzles.
Playtests showed me that interactive typography adds a sense of ownership and
freedom of expression that is best complimented by a non-linear narrative. Words
presented in a print-based medium or through kinetic typography are loaded with
meaning and context; adding interactivity allows for people to interpret words in their
own way and imprint that meaning on to the word based on their manipulation. This is
why interactive typography is best suited for a non-linear experience. When users gain a
sense of ownership towards their creation, having a system in place that reacts based on
what they create can make for an incredibly engaging experience. This also further
encourages the user to be creative.
Prior Art
I set out with the goal to make kinetic typography interactive, so it became
important to view videos of kinetic typography from which to draw inspiration. Coming
21

from a graphic design background, I had always felt that Saul Bass’s iconic movie titles
where still among the best examples. Saul Bass had a great visual style, but he never let
the visuals overtake the purpose of his title sequences, which were meant to prepare the
audience for the movie narrative. It was this balance, between visuals and narrative from
which I wanted to draw inspiration.
Bass on Titles
This
is
a
documentary
DVD
that
contains
a
selection
of
the

feature
film
titles
Saul
Bass
designed
and
made
famous.
Bass
talks
about

the
evolution
of
his
thematic
title
sequences.
His
designs
involve
the

search
for
the
elusive
visual
statement
that
instantly
communicates
the

film's
intent
while
generating
audience
interest.
Among
the
film
titles

discussed
are,
“West
Side
Story”,
“The
Man
with
the
Golden
Arm”,
“A

Walk
on
the
Wild
Side”,
“Around
the
World
in
80
Days”,
and
others.

From the beginning, Type Set was always meant to be a game. I wanted to see if
there where any other games that involved interactive typography. I found several games,
one of which, ERGON/LOGOS, used a branching narrative, which influenced me to test
how a branching narrative would affect my game. The one common thread that linked the
following games together was that the pacing of the games were more contemplative,
which is what I strived to achieve in Type Set.
ERGON/LOGOS by Paolo Pedercini
22

A fast paced interactive storytelling piece that tries to be a meta-
platform game based on the stream of consciousness of a homosexual
protagonist. The game is based a piece of non-linear kinetic visual poetry
written by a teenager obsessed with post-structuralist French philosophy.
Piping Trebuchet by Alexis Andre
A puzzle game based of the font "Trebuchet". The player needs to
connect two letters by linking them with other letters. This plays on the
visual and physical aspect of typography to create shapes and forms. This
game encourages player creativity, but it has no narrative context.
Wise Up!
The players’ goal is to move a camera around a set of letters in 3D
space to make them align into a famous quotation. Some letters are closer
to you and smaller, some letters are further away and bigger, but when the
player is in the right position, they'll all line up perfectly.
Pixel Words
This is a crossword fractal game where the goal is to zoom into
words and avoid fake words.

I also wanted to draw inspiration from interactive typography experiences. These
experiences helped shape the way I designed interaction for Type Set, as experience
utilized typography in different ways.
Type-A by Jim Taylor, Asher Volmer, Daniel Ponce
23

In Type A users are presented with what is a rusty typewriter. The
user is supposed to use the keyboard to type whatever message they want.
The effects of sound and visuals set an aggressive mood that encourages
the user to type hard and fast.
Letterscapes by Peter Cho
Letterscapes is a collection of twenty-six interactive typographic
landscapes, encompassed within a dynamic, dimensional environment. In
each landscape, a letter of the alphabet serves as the starting point for a
playful, mouse-driven experience. In each case, the letterform is re-
imagined in a virtual two-dimensional or three-dimensional space, and the
user can “play” the letter as one would play a game, or a musical
instrument.

Type Drawing by Hansol Huh
The experience begins by typing a sentence the user wants to say,
and then, the user draws with his/her finger and the trail created is the
sentence that the user typed. The scale of the sentence is dependent on the
velocity of the gestural movements.
Bembos Zoo by Roberto de Vicq de Cumptich
Has an interactive alphabet in which each letter represents a
different animal. When a letter is clicked, a small animation plays where
the letters are formed into a shape that represents an animal. Because
24

each letter has its own personality, it creates an engaging experience
during the first play through. There is an element of surprise not knowing
what a particular letter will be represented.
Recombinant Dating by Emily Duff and Sean Plott
An interactive piece in which the user makes some selections and a
recombinant story is formed. Even the same selections result in different
stories. There are over 300 possible recombinant stories based on random
generation and path selection.
For the narrative structure of the game, I utilized the same structure I had used in
a previous project. His and Her Story’s narrative structure was tested and was successful
in creating a branching narrative that felt organic.

His and Her Story by Hua Chen and Daniel Ponce
Two-player experience, the players take the role of a man or a
woman. The players make decisions by taking turns, which allows both
players to see the affects of their actions. After each choice is made, the
player must read their story out loud to each other.
Prototypes
Type Set has always been foremost about figuring out a logical way to make
kinetic typography interactive in manner that is easily accessible to non-designers. I
began this project doing a simple, video game prototype. It was a platformer where the
player controls a character that runs and jumps on top of the word "test". The
25

combination of primary colors, words and a dynamic camera proved to be engaging even
without a narrative.

Figure 10 – First Prototype.
Next, I wanted to experiment with the intonation of the words. I began by
choosing a monologue from a well-known movie and asked someone to voice act that
monologue. A second person that was listening to this monologue had to replicate the
intonation and emotion of the person reading with paper printouts of the words. There
where three versions of each word, one scaled big, medium and small. After both
participants were done a third participant, whom did not listen to the original narration of
the monologue, came and would narrate the dialog based on what the second person did.
It turned out to be a success as the third person was able to replicate with some accuracy
the intonation of the original narration.
26

Figure 11 – Second Prototype.
I proceeded to make another digital prototype with emphasis on controlling the
size and rotation of words in a digital space.
I
discovered
that
at
the
start,
players
had
a

difficult
time
correlating
the
actions
of
the
manipulation
of
words
with
intonation
of

voice.
Once
players
where
informed
that
the
scale
of
words
represented
different

tones
of
voice
they
became
more
engaged.
Some
players
began
to
narrate
out
loud

the
sentence
based
on
their
manipulation
of
words.

Figure 12 – Third Prototype.
27

Next a prototype was made for the iPad. One of the main advantages of having
Type Set on the iPad is the gestural control allowed by the device’s multi-touch screen.
Gestures allowed for the experience to be more visceral and physical, since the iPad
almost gives the illusion that you can touch the text. The touch controls also allow the
player to have a more personal connection with each word, which gives the player a sense
of ownership as players became attached to the designs they made with words when
solving puzzles.

Figure 13 – Fourth Prototype.
Next Steps
The main focus in my production pipeline is the creation of content. For my
project to be experienced as intended, I have to be able to create enough content to allow
players to make meaningful decisions when it comes to solving the puzzles. It is when the
player realizes his/her actions and the way he/she manipulates words have an effect on
the narrative, that the player becomes truly engaged. The goal is to have a phone
28

conversation that has ten exchanges of dialog; which is long enough to feel like a real
conversation. At the same time, short enough in terms of gameplay to encourage multiple
play troughs. With more time, I would want to include two more phone conversations:
one with the protagonist's best friend and one final conversation with the girlfriend. The
narrative objective is for the protagonist to go from being an oblivious slacker to
acknowledging that he needs to change his life style in order to better himself.
Conclusion
Type Set introduced interactive typography that is easily-accessible to a non-
design audience. By analyzing the formal elements of kinetic typography and translating
those elements so that they work in an interactive environment.
As
I
have
mentioned
in
this
paper,
typography
can
function
in
a
variety
of

ways,
from
a
neutral,
almost
inconspicuous
manner
of
delivering
content
and

information
to
a
kinetic,
behavioral
vehicle
of
rich
meaning.
Reading
is
not
the
only

way
to
get
meaning
from
text,
because
the
formal
aspects
of
type
like
shape,
size,

color,
as
well
as
the
placing
of
text
in
a
space,
can
create
or
change
the
meaning
of
a

word.
When
the
player’s
actions
have
an
affect
on
the
overall
experience,
the
player

gains
a
sense
of
ownership
towards
his/her
creation,
and
having
a
system
react

based
on
what
he/she
has
created,
can
make
for
an
incredibly
engaging
experience.

29

Bibliography
Cooper, Muriel. Computers and Design : The New Graphic Languages. N.p.: Walker Art
Center, 1989. Print.

Drucker, Johanna. The visible word: experimental typography and modern art, 1909-
1923. Chicago: University of Chicago Press, 1997. Print.

Fehrman, Kenneth, and Cherie Fehrman. Color : The Secret Influence. 2nd ed. Upper
Saddle River, NJ: Pearson Education Inc., 2004. Print.

Gill, Eric, and Christopher Skelton. An essay on typography. N.p.: David R. Godine
Publisher, 1998. Print.

Krasner, Jon. Motion Graphic Design : Applied History and Aesthetics. Burlington, MA:
Elsevier Inc., 2008. Print.

Lee, Joonhwan, Soojin Jun, Jodi Forlizzi, and Scott Hudson. Using Kinetic Typography
to Convey Emotion in Text-Based Interpersonal Communucation. Pittsburgh PA:
ROTOVISION, 2006. Print.

Lupton, Ellen. Thinking With Type: A Critic Guide For Designers, Writers, Editors, &
Students. New York, NY: Princeton Architectural Press, 2004. Print.

Malik, Sebrina, Jonathan Aitken, and Judith K. Waalen. Communicating emotion with
animated text. N.p.: SAGE Publications, 2009. Print.

Tschabitscher, Heinz. "Writing in All Caps is Like Shouting." About.com. N.p., 1997.
Web. 20 Feb. 2011.

Van Gastel, Mikon. Design in the age of performance. N.p.: SAGE Publications, 2005.
Print.

Woolman, Matthew. Moving Type: Designing for Time and Space. N.p.: ROTOVISION,
2001. Print.

Abstract (if available)

Abstract Kinetic typography-text that is animated and given expressive qualities – allows for designers to express emotion and tone of voice better than traditional, print-based media. This is accomplished through a combination of typographic treatment and animation. One of the limitations of kinetic typography is that it does not involve user participation. With my project, an experimental iPad game Type Set, I wanted to explore the effects of adding interactivity to kinetic typography framed within a video game. In the game the player must manipulate words using basic tropes found in kinetic typography, such as scale and rotation, to affect the narrative of the game. By dissecting the nature of kinetic typography in this paper and through my projects, I will explore how interactivity can enhance and change the way kinetic typography is experienced.

Linked assets

University of Southern California Dissertations and Theses

Conceptually similar

PDF

Grayline: Creating shared narrative experience through interactive storytelling

PDF

By nature: an exploration of effects of time on localized gameplay systems

PDF

Day[9]TV: How interactive Web television parallels game design

PDF

Outer Wilds: a game of curiosity-driven space exploration

PDF

The voice in the garden: an experiment in combining narrative and voice input for interaction design

PDF

Timension

PDF

Maum: exploring immersive gameplay with emerging user interface devices

PDF

N|TONE: an interactive exploration of a poetic space through voice

PDF

Seeds: role-play, medical drama, and ethical exploration

PDF

Exploring empathy through negotiation

PDF

Spectre: exploring the relationship between players and narratives in digital games

PDF

Psynchrony: finding the way forward

PDF

Toward a theory of gesture design

PDF

The witch: Identity construction and the fairy tale in interactive narrative

PDF

Players play: extending the lexicon of games and designing for player interaction

PDF

Intimation and experience of the self in games

PDF

Carte blanche: experiments in the art of interactive political satire and contemplative virtual space

PDF

The moonlighters: a narrative listening approach to videogame storytelling

PDF

Exploring space literally & figuratively in Eight Moons to Eternity

PDF

Ahistoric

Asset Metadata

Creator Ponce, Daniel Anthony (author)

Core Title Type Set : Exploring the effects of making kinetic typography interactive

School School of Cinematic Arts

Degree Master of Fine Arts

Degree Program Interactive Media

Publication Date 05/06/2011

Defense Date 03/26/2011

Publisher University of Southern California (original), University of Southern California. Libraries (digital)

Tag design,Games,gestures,interactive,interactive typography,iPad,kinetic typography,OAI-PMH Harvest,Touch,typography

Language English

Contributor Electronically uploaded by the author (provenance)

Advisor Brinson, Peter (committee chair), Anderson, Steven F. (committee member), Gibson, Jeremy (committee member), Neuse, Alex (committee member)

Creator Email Chiwisdp@gmail.com,Danielap@USC.edu

Permanent Link (DOI) https://doi.org/10.25549/usctheses-m3922

Unique identifier UC1430889

Identifier etd-Ponce-4298 (filename),usctheses-m40 (legacy collection record id),usctheses-c127-469309 (legacy record id),usctheses-m3922 (legacy record id)

Legacy Identifier etd-Ponce-4298.pdf

Dmrecord 469309

Document Type Thesis

Rights Ponce, Daniel Anthony

Type texts

Source University of Southern California (contributing entity), University of Southern California Dissertations and Theses (collection)

Repository Name Libraries, University of Southern California

Repository Location Los Angeles, California

Repository Email cisadmin@lib.usc.edu