Create Stunning Kinetic Typography with These 6 Elements

You’ve seen it countless times in movie title sequences to show the credits before a movie in such a way to evoke the style or feel of the movie… 

Now it has become more common (music videos, commercials, web applications) and is used to create animations that accompany audio or music, where the text supplements the spoken word or lyric. Kinetic typography is, put simply, text in motion. 

Just like skinning a cat, there are many different ways to create animations with text as the main visual content. Usually text is supplemented by audio, either a song or a voiceover from a movie clip, talk, presentation, etc. Regardless of the content (audio/text),  the animation or form should stand on solid design ground.

Some components of design like unity, space, color, gestalt, etc. will be present in all of the best examples. Besides motion or movement here are a few examples of elements that push a kinetic typography piece that much further and make it move. 

1. Simplicity

This spot for a Starbucks campaign is effective because it relays its message in a clear, concise way. The animation relies on cleverly adding and reducing the text to combine words or form new sentences from previous ones.

2. Detail

After simplicity you wouldn’t think attention to detail would follow. However, just because something appears simple doesn’t mean that it lacked complexity in creation.

This piece was estimated at taking from 500 – 1000 hours to make. That’s 17 weeks of 8-hour days, 7 days a week, and it shows. The animation evokes the lyrics both literally and figuratively. If you look at 14 seconds in on the video the text “dog” is a serif and the semi-structural form on the top of the “g” wags like a dog’s tail. The result is brilliantly simple, thanks to extraordinary attention to detail.

I had to watch the piece 3 times just to catch all the things I missed the first time, then I watched it another 6 more times and still caught things.

3. Originality

This video was done in 2008 completely in Flash. It’s very bare bones but the use of the text is a great example of using something (text) for a purpose (create the outline of the portraits) other than the obvious way. The letters spell out the same word over and over in rhythm with the lyrics and beat, creating the portraits. This video gives new meaning to the phrase word play.

4. Space

This piece, done using an audio clip from The Dark Knight shows how a composition can evoke a sense of depth in 3-dimensional space. Space and form are the yin and yang of visual design, without one, you can’t have the other.

The less space you use on a screen, canvas, etc., the clearer your message can become. In this piece text moves in the environment in such a way that it also gives it that sense of depth. Coupled with the use of slick effects, and it just adds to the drama of the audio.

5. Color

Generally, using too many colors will distract, sometimes making it harder for viewers to focus on what’s important. But, the use of color here focuses the viewers attention and makes the content (the audio and text) stand out that much more.

6. Story

When the text is a part of the story that the audio is telling us, you could turn off the audio and get the narrative just the same. Story and narrative within the animation add that stickiness quality that keeps eyeballs coming back to view a video years after it was created.

Conclusion

Kinetic typography as a medium is forging new ground with lots of talented designers creating beautiful work for both commercial and personal motivations. Creating a kinetic typography piece that amazes viewers starts with the above 6 design essentials. One thing that weaves a commonality through all the best animations is a mastery of design and art paired with a great idea.

Have you seen some amazing kinetic type pieces lately? Please feel free to share in the comments!