Bringing Words to Life: The Role of Kinetic Type in Modern Design

Bringing Words to Life: The Role of Kinetic Type in Modern Design

The days of the written word’s static existence are over. Welcome to the age of kinetic type.

When you think of the written word, movement isn’t exactly at the top of a list of its attributes. That said, there’s a certain irony to the history of those static rows of characters we read every day of our lives. All the way back at the dawn of the printing press, moveable type was the name given to the individual components slotted into the press to print letters onto a page. Moveable type literally gave birth to books.

Later, when Alfred Hitchcock introduced us to hit after suspenseful hit, his experience as a title designer came to the forefront. Moving text became front and center in intros, credits, and title sequences. When digital technology started to get cheaper, advertisers saw the potential of grabbing our attention by shifting, squashing, and moving type around on screens, everything from digital bulletin boards on pavements to screens the size of buildings. More recently, moving text (or kinetic type, if we’re going to apply full designer lingo) has had somewhat of a renaissance as an edgy device for livening up everything from websites to loading screens to entire design systems. The days of the written word being simply static forms on a page are truly over.

What Is Kinetic Type?

Kinetic type is the act of applying animation to type to convey meaning and narrative. The title sequence from Hitchcock’s North by Northwest, back in 1959, is considered the first true example of kinetic type. It was used again a year later in Psycho, and has been a staple device in film storytelling ever since. We all remember the iconic opening crawl from Star Wars (which was, in turn, inspired by a similar technique used in Flash Gordon), for example.

Although it can be assumed that all changes to type are kinetic type, that isn’t the case. Anything related to form, such as changing color or font, isn’t considered kinetic type. The behavior has to be associated with movement for it to be considered kinetic (hence the name). As such, fade ins and outs, contortions such as squashing, stretching, and misshaping, or movement through 3D space, such as flipping or revolving, would all count.

Kinetic TypeKinetic type has to do with the movement of the text. Image via video by kingsparkmedia.

Interestingly, type has been treated in these ways well before the ability to actually move it. Graphic design has a rich and beautiful history of treating type as more than just a communication device. The masters of graphic design quickly realized that, much like other elements at their disposal—such as color, imagery, and shapes—type itself could enhance the overall aesthetic, mood, and tone of a design.

Probably the most pre-eminent examples of this come from the Bauhaus movement. Other notable examples include the work of Paula Scher and David Carson. Although there’s no movement in the truest sense of the word, nonetheless, type is manipulated in ways that presume movement, action, or direction, in an effort to enhance the overall look and feel of the design. The role of kinetic type essentially takes these ideas to the next level.

Kinetic Type A modern example of kinetic type. Image via video by Topan Sopian.

If you fast-forward to the more modern applications of kinetic type, particularly how it’s used in entertainment and fashion settings, you can see a stark resemblance to the techniques employed in the poster designs that came before them. These modern examples rely heavily on tried and tested graphic design principles—limited color palette, hierarchy, grid, and layout—to convey an enticing, and incredibly beautiful, message.

Why Should I Use Kinetic Type?

As technology has democratized, so has the power of tools. Previously only available to designers with deep pockets, these tools became available to the masses. This is good news for all of us, but this means that in order to be seen, you really have to knock it out of the ballpark with something well beyond run-of-the-mill.

Grabbing Attention

Scrolling Text Website layouts that employ kinetic type are used to grab attention in surprising and compelling ways. Image via awwwards.

At the dawn of the internet, websites were heavily text-based, as images cost too much bandwidth. With considerable increases in the speed of broadband, those early considerations no longer apply. So, previously unimaginable attention-grabbers, such as kinetic type, become evermore commonplace. Websites are no longer simple information dumps, but more and more often, highly engrossing customer experiences.

Kinetic type is a perfect way of creating an experience that will immediately grab the viewer’s attention. Movement draws our eyes, so taking a key message and applying movement to it is a surefire way of getting visitors to take note.

Engaging the Audience

Scrolling Text This colorful example is immediately engaging, and sets the tone right from the start as to what the visitor can expect from the rest of their experience. Image via video by keyframelab.

Though books are utterly magical entities, it’s easy to see why kids are drawn to the flair of an iPad screen with all its color, vibrancy, and dynamism. And, whether we like it or not, that trend isn’t likely to dissipate anytime soon, if ever. Kinetic type is a fantastic way of driving up engagement on your website, ad, or app. The treatment of the letters and the space in which they inhabit can give a clear indication of the tone, mood, and aesthetic you’re attempting to convey. To that end, kinetic type can drive forward your narrative, and create a greater sense of visitor engagement.


Considering text as a design device, particularly through the use of kinetic type, can also improve responsiveness of your visitors. It’s a simple case of customer satisfaction—sweating the details, and going above and beyond, says a lot about what experience customers can expect from you. Kinetic type is a creative way of showcasing that you care, which can lead to greater uptake in your experience, product, or service.

When Should I Use Kinetic Type?

As with all design questions, it really does depend. And yes, the least satisfying answer of all, but it’s the right one, nonetheless.

There are definitely some parameters to consider. To start with, use kinetic type sparingly. And, don’t try to apply all the bells and whistles to every application. Doing so will simply put off visitors, as they won’t understand what you’re trying to convey. Ultimately, type is all about relaying a message. It’s okay to play with the bounds of your storytelling, but if it becomes too unwieldy, the only thing your visitors will get from it is confusion.


Headers Simple, yet effective, titling. Image via video by keyframelab.

Titling and headers, especially in the hero section of a website (that’s the first thing you see when you load a website), are perfect places to introduce kinetic type, as it will undoubtedly capture the viewer’s attention.

Animated Logos

This above example of animated text, by Imra Hasanic, leads the animation into the logo—a less dominating, yet no less effective, use of kinetic type.

If you want to try a simple, but effective, form of kinetic type, then introducing some animation to your logo might be the way to start. It provides just enough visual interest as to be playful, but without overpowering. Slick animations are key here, but the results can be breathtaking. This is also a way of invigorating a brand that might be a little tired, but without having to redo the entire thing.

Loading Screens

Loading ScreenLoading screens are a handy way to introduce kinetic type, even on websites and apps that may be more conservative in their approach elsewhere. Image via Norman Dubois for Dorfjungs.

Another smaller application, loading screens are strong places to involve some kinetic type. Of course, in an ideal world, your visitors would never see a loading screen. But, they are sometimes an inevitability, so why not give them something to look at while the magic is happening in the background!

Set Pieces

Sales PromotionElements small and large can be used to convey change of some type in your experience. Image via video by Topan Sopian.

This one is pretty broad, but the idea here is to introduce some kinetic type wherever there’s a change in tone, mood, or direction, or when you’re revealing a big idea. The change of pace can really engage visitors and make them feel like they’re involved in the experience, as opposed to being a silent bystander.


Fundamentally, language is how we communicate. However, as with any other design tool, it can also be used as an aesthetic device, to further drive home the message in more interesting and engaging ways. As technology allows more and more people to access the tricks of the trade, the bar continues to rise in the constant battle for gripping people’s imaginations.

The beauty of kinetic type is that there’s a place for it in any project—whether it’s a simple, subtle implementation or something more complex and captivating. So long as it lends support to the overall direction of the project, it will undoubtedly make its mark.

For more typography inspiration, check out these articles:

Five Pro Typography Tips to Instantly Improve Your DesignsTypography Terms: Four Concepts You Need to KnowThe 10 Most Common Typography Mistakes and How to Avoid ThemThe 5 Best Illustrator Warp Effects to Transform Your TypographyHow to Give Your Typography a Digital Glitch Effect in Illustrator

Cover image via video by millionreason.

The post Bringing Words to Life: The Role of Kinetic Type in Modern Design appeared first on The Shutterstock Blog.

Read more:

Leave a Reply

Your email address will not be published. Required fields are marked *