Kinetic typography refers to the art and technique of expression with animated text. Similar to the study of traditional typography of designing static typographic forms, kinetic typography focuses on understanding the effect time has on the expression of text. Kinetic typography has demonstrated the ability to add significant emotive content and appeal to expressive text, allowing some of the qualities normally found in film and the spoken word to be added to static text. Kinetic type has been widely and successfully used in film as well as in television and computer-based advertising. Perceptual psychology research on attention, reading performance, and comprehension has indicated that time-based presentation of text can be used effectively to capture and manipulate a viewer’s attention and in some cases improve overall reading performance.
Kinetic Typography has been explored in the School of Design at CMU since 1996. This site describes the research work done here in the Human-Computer Interaction Institute by Johnny Lee under the direction of Scott Hudson and Jodi Forlizzi.
Examples created by design students:
Students have explored expressive capabilities of kinetic type in a class entitled Time, Motion, and Communication taught by Dan Boyarksi in the School of Design. The following are two particularly strong examples of the power of kinetic typography as a medium for expression. NOTE: Quicktime is required to view these clips.
| Sky[18Mb] | Created by Heebok Lee. Excerpt from "Renaissance" by Edna St. Vincent Millay. |
| Fight Club[8Mb] | Created by Monchu Chen. Excerpt from Fight Club, 20th Century Fox. |
Kinetic Typography Engine
The kinetic typography engine is an animation system that we developed specifially for the purpose of creating kinetic typography. The details of the engine are described in "The Kinetic Typography Engine: An Extensible System for Animating Expressive Text" in proceedings of the 15th annual symposium on User Interface Software and Technology. The engine architecture supports low-level typographic manipulations and uses an animation framework that mirrors the structure of manipulations used by animators. This has been generalized into a signal processing approach that allows simple behavior filters to be interconnected to create highly complex animations very easily. Our engine was able to reproduce the effects found in a corpus of over 30 pre-existing design examples. Real-time rendering is available to support interactivity and dynamic text sources, but can also used offline with computationally expensive image processing filters for high quality video output. Our future work involves building applications on top of the animation engine to explore the utility of kinetic typography in a variety of contexts as well as develop reusable design principles.
Examples Created by the Engine
The following Quicktime examples shown here were generated with our engine. Some of these are original creative works of Johnny Lee and some are repoductions of existing design examples as a demostration of capabilities.
| Early Samples[14MB] | Showcases the abilites of an engine prototype and reproduces effects from the design corpus. |
| Tech Demos[26Mb] | Demostrates cartoon effects supported by the engine in isolation. Multiple versions of the same motion are given for comparison. |
| Hop-In Effect[10Mb] | An example of a reusable composite effect that can be applied to large amount of text. The animated text attempts to describe the effect. |
| UIST '02 video[14Mb] | This video appears in the video proceedings of the 15th annual symposium on User Interface Software and Technology. The entire video was done with kinetic type in our engine. |
| Live out loud[5Mb] | Created by Johnny Lee to showcase the offline output capabilites. |
| CHI '03[6Mb] | This video is supplementary material submitted with our paper currently in review for SIGCHI 2003. This showcases Kinedit, a simple editor for non-professionals to easily create kinetic type. |
Using the engine to develop your own applications
If you are interested in using the kinetic typography engine for your own explorative purposes you may. Click here for information regarding download and usage.