A brief look at modern typographic animation videos on the web and how it can deliver a powerful message for businesses.

1. user experience agency

2. How Typographic animation delivers your message

3. Research
Typographic animation is it’s most effective form

4. • Typographic animations are
most effective when
combined with a narrative
voice over and/or audio
soundtrack.
• The composition of both
visual and audio mediums
provide a more effective
message, allowing the user to
absorb the information in the
Screen shots taken from jmheather’s ‘Shop vac – Kinetic Typography
animation more easily. animation’ regarded as the most creative and extensive typographic
animation produced as non client work. Features a full length
typographic portrayal of Jonathan Coulton’s Shop Vac song,
available on iTunes.
Typographic animation is it’s most effective form

5. • Video sharing websites like YouTube and Vimeo
house a vast variety of typographic animations,
often created to express a certain scene or segment
of any given media e.g. film, TV, music.
ramza7337’s recreation of a particularly brutal ‘Kill Bill’ callme4b’s depiction of an iconic scene from ‘Oceans
scene enraptures the Japanese culture of the actors and Eleven’ is a great example of type positioning, and using
the dialogue perfectly with it’s type choice and the camera to express the audio narrative’s messages
background textures. with subtle direction and pace changes.
Typographic animation is it’s most effective form

6. Stevadore2032’s elucidation of Tom Waits – ‘What’s he
building in there’ actually shapes the type formations to create
what the narration is suggesting, certainly more effective that
just listening the audio or reading the text alone.
Yhetiwool’s interpretation of a scene from ‘The Dark Knight’
contains some sensational typographic effects that relate to the
Joker’s choice of words – thus making the type more than just a
visual repetition of the audio narration.
Typographic animation is it’s most effective form

7. Architect
Typographic animation without aid of narration

8. This is an example of how type
based animations can also
work without narrative audio.
In order for messages to
communicated successfully to
end users without the same
information being presented in
two mediums, more visual aids
are often used.
Alextrimpe’s example uses
clean, clear graphics to
symbolise the accompanying
type messages. Stats and
figures are represented in a
similar format typical of
infographics, allowing the user
to absorb the information in
sequence without the need for
The world is obsessed with Facebook – Alextrimpe. an audio input.
Typographic animation without aid of narration

9. This example is a promo
video for a Rep role at a
festival. A large volume of
information had to be
communicated to the user
via small messages of type
and accompanying graphics,
footage and imagery,
without the aid of audio
narration. A music
soundtrack was included to
convey the vibrancy and
energy required with the
role at the festival, meaning
the animation sequences
could be sync to an audio
format.
Beach Break Rep promotional video – Zabisco.
Typographic animation without aid of narration

10. Some informative motion
graphics simply don’t require
audio narration to effectively
communicate their
respective message(s). This
can actually stimulate a
more personal response
from the user, as they may
absorb the messages and
relate them to their own
lives more than if someone is
dictating the words to them
verbally.
This example has a fitting
instrumental soundtrack
which progresses and alters
as the 29 ways to stay
TO-FU - 29 ways to stay creative. creative are illustrated.
Typographic animation without aid of narration

11. Design
How aesthetics of type dictate visual style of animation

12. BYU Design Students and Faculty’s typographic ‘feast’ on the 5 senses is a great example of how the aesthetics of the type
animated relates directly to the theme of the motion graphic – the type informs and illustrates on it’s own. Inspiring work.
How aesthetics of type dictate visual style of animation

13. n9ve’s Alphabetic creation incorporates an array of aesthetics that signify the letter/word(s) of the alphabet. Using a variety
of stop frame animation techniques and materials with skillful art direction makes this piece a real gem.
How aesthetics of type dictate visual style of animation

14. Implement
Transition styles of type messages

15. • Typographic transitions between
messages/words/letters can vary
greatly between motion works.
• Some examples emphasise how the This specimen focuses more animating it’s content with a lot of jerky
camera movements and rotations to portray the flow of fast paced
audio narration speaking the words. The typographic transitions are
information strings together and based more on changes in type size, font and layout, rather than the
type flowing together frame by frame.
flows throughout the animation.
Others focus more on the aesthetics
of the content itself and how type
links frame by frame, message by
message is not as crucial to the
overall success of the piece.
This example’s type physically links together between transitions.
*The following examples have different styles of Typographic Letters in some words animate to form the next and other words lead
on to form part of the next message. The words are shaped and
transition, both relative to their individual purpose and art positioned to portray the audio narration as above, but the type forms
direction. One is not stronger than the other. physical objects, relative to the narration.
Transition styles of type messages

16. n9ve’s example of an alphabet of type has an interesting transition style, where each letter appears to possess a
liquid like state as it breaks and reforms to create the shape of the next in a different typeface.
This simple but effective transition style contains the perfect aesthetics to mirror the purpose of the animation – a
spelling-video, where each character is the initial character of n9ve’s favourite fonts.
Transition styles of type messages

17. YouAreNotSoSmart’s book trailer on Procrastination has insightful content no doubt sampled from the book itself. Due to it’s considerable
length, the narration is fairly fast paced, meaning the transition style is sharp and precise with each message change. Emphasis seems to be
on clean, sharp type often illustrated with accompanying graphics illustrating the point more visually.
Transition style seems
to naturally develop
throughout a
typographic animation.
If the purpose of the
original piece, the art
direction and in a lot of
cases, the audio
dictation are in place,
then animator already
has the blueprints to
work form to piece
together the messages.
Transition styles of type messages

18. Evaluate
In Conclusion

19. • In most cases, typographic animations are • When the typographic choice relates to the
most effective when combined with a audio’s tone, it can make the type more than
narrative voice over and/or audio just a visual repetition of the audio narration.
soundtrack. The composition of both visual It becomes informative and illustrative art.
and audio mediums provide a more • In order for messages to communicated
effective message, allowing the user to successfully to end users without the same
absorb the information in the animation information being presented in two
more easily mediums, more visual aids are often used.
• Video sharing websites like YouTube and • Transition styles emphasise how the
information strings together and flows
Vimeo house a vast variety of typographic
throughout the animation. Some examples
animations, often created to express a
emphasise how the information strings
certain scene or segment of any given
together and flows throughout the animation,
media e.g. film, TV, music. others focus more on the aesthetics of the
content itself and less how the type links
frame by frame.
In Conclusion

20. Thank you!
Jon Ward
Interactions Designer
jon@zabisco.com
0115 948 4454