Kinetic Typography UX — Principles, Patterns, and Getting Started

Harnessing motion design, storytelling, and text to convey complex ideas and augment user engagement

Ninglin — Dribbble

Contents

1. Basics — Motion vs. Fluid Typography, Transitivity Theory
2. Patterns — For Inspiring Your Creativity
3. Principles — For Designing Kinetic Compositions
4. Getting Started — For Designers
5. Getting Started — For Developers

Basics

Kinetic typography is the art of moving type. It is the application of motion design to tell stories and evoke emotion through typographic visuals. It is a form of temporal typography (letters/words that are presented over time) that is distinct from serial presentation (the sequential presentation of static typographical elements).

There are two main genres of kinetic typography:

Motion Typography — typographic elements move relative to one another within a 2d or 3d plane, but do not necessarily transform into new elements. Words and individual characters enter, exit, grow, shrink, and move around the screen in a way that maintains readability.

Digital Synopsis

Fluid Typography — the transformation of typographic elements into non-typographic forms. Words and characters can transform into shapes and other words, not just change their position or relative attributes on a page.

Digital Synopsis

Underlying these two genres is transitivity theory — the systemic functional approach to understanding how humans infer meaning and connection from transitions in an object’s state. It studies how we can make meaning more explicit through the application of movement and fluidity.

Patterns

• Create / Destroy — Typographical elements can be created using an aggregation of shapes/patterns that transform into the typographical elements. Likewise, this elements can be deconstructed, dissolved, and destroyed.

Creation — David Stanfield

• Enter / Exit — Typography can be introduced into the view through a transition, either appearing out of the background or sliding in from outside the container. The order of appearance progressively guides the user through the sentence (if it is a combination of words).

Enter/Exit in PowerPoint — Skillshare Course

• Morphing — Lettering can morph into non-typographical elements. This can be used in a metaphorical sense or to transition between words and graphical elements. Morphing goes beyond just color or positional changes by focusing on structural changes to the elements, themselves.

Morphing by TAPE

Morphing State Transition — Al Boardman

• Inventive Metaphors — individual characters can take on real-world characteristics. For instance, the serifs on certain fonts can become feet that walk.

Inventive Metaphor — Hyemin Hailey Lee

• Arc / Path Motion— movement along arcs or abstract lines as text moves along linear or curved paths.

dudenas

• Storytelling — using motion to tell a story or complement a narrative (ex. lyric videos). This is rare in products, but can be found on some product marketing sites that use scrolling or interactivity to trigger motion.

The Rolling Stones — Paint It, Black (Official Lyric Video)

Storytelling — Web Ascender

• Signaling Motion — subtle movement that signals a larger movement. This is effective at drawing the user’s eye to the inception point for an animation.

Signaling Motion — David Stanfield

Principles

Here are some guiding principles to take into consideration when designing kinetic typographic compositions:

• Maintain Relativity — The individual typographic elements move relative to each other. This relativism is very distinct from traditional motion design where you don’t need to maintain a linear ordering.
• Optimize for Readability — The ease with which a reader can accurately consume digital text. In natural language, the readability of text depends on its content (the complexity of its vocabulary and syntax) and its presentation (such as typographic aspects like font size, line height, and line length).
• Optimize Effect Duration — The duration of the effect should be enough to evoke the targeted emotion, understanding, or response from the user, but not more.
• Manage Emotion — Effective motion and movement can evoke a myriad of emotions from your users. Make sure that you truly understand how your colors, transitions, and changes in physical state interplay with your audience’s emotional state.
• Maintain Linearity — Humans still read in a linear fashion. The order with which letters and words appear or disappear should maintain that linearity.
• Motion Sensitivity — We all love really slick, modern animations.. or do we? Motion sensitivity is becoming more concerning as animations become more complex and intrusive. I recommend this article on Designing Safe Animations.
• Optimize for Accessibility — Be cognizant of those with screen-readers, color sensitivity, and other impediments. Use kinetic typography as a way to emphasize elements, but not in a way that distracts from the core usability of your product.
• Bandwidth Constraints — Users do not want to sit and wait for an animation to load or to read a sentence in 20 seconds instead of 3. Make sure you take into account bandwidth constraints, both technical bandwidth (internet) and personal bandwidth (attention).
• Fallback States — If the animation fails to load or if you identify a timeout issue, then it is best practice to have a static fallback state.

Getting Started — For Designers

Adobe After Effects

One of the industry-leading tools for creating complex kinetic typography used by industry professionals. Typically requires a higher learning curve than other software, but has a robust community and lots of support.

• Kinetic Typography Quickstart Tutorial by Cocombee Studio — A comprehensive tutorial using Adobe After Effects with downloadable lesson material.
• Kinetic Typography Advanced Tutorial by Jesse Rosten — An advanced tutorial on Kinetic Typography using Adobe After Effects.

Microsoft PowerPoint

One of the most practical ways to apply kinetic typography to presentations and simpler exports. This would not be recommended for actual production web applications.

• 4 Part Tutorial on PowerPoint Kinetic Typography by PowerPoint School — In this PowerPoint animation tutorial, you will learn how to make kinetic typography animation in PowerPoint.
• 3 Part Tutorial on Masking and Motion Graphics in PowerPoint by Abhinav Rawal — Creative application of masking, layering, and advanced kinetic typography using PowerPoint

Apple Keynote

For Apple users, you can also create kinetic typography in keynote. Though, if you have PowerPoint, then you may prefer it due to being more widely adopted and available on both PC/Mac.

• How to Use Kinetic Typography Animations in Keynote by Andrew Childress — A 60 second tutorial for kinetic typography in Keynote

CSS Animation Libraries

If you like to play with CSS and some simple JS frameworks, then these libraries can be helpful:

• Animate.css — very simple, lightweight css transitions with sandbox area
• AniJS — a library to apply typographic animations without coding

Alternative Desktop Software

• Apple Final Cut Pro (Motion) — A powerful motion graphics tool that makes it easy to create cinematic 2D, 3D, and 360° titles, fluid transitions, and realistic effects in real time (Mac only). You can check out this Typography Tutorial for Final Cut Pro X.
• Tumult Hype — Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.

Just a note: I am not including UX prototyping tools like Principle or Framer, which you can still use for kinetic typography — though these are typically more reserved for broader IxD prototypes.

Getting Started — For Web Developers

There’s a wide array of JavaScript animation libraries on the market. Here are some of the most popular, lightweight JS libraries that are commonly used in production apps:

• GSAP — Professional-grade HTML5/JS animation for modern web frameworks, specifically optimized for cross-browser compatibility.

GSAP Animation — CodeMyUI

• textillate.js — A simple plugin for CSS3 text animations. You can apply CSS animations to any text (try the demo on their site).
• Popmotion.io — A series of simple animation libraries for delightful interfaces. Can work with Vue, React, React Native, or any JavaScript environment.
• React Reveal Text — A small react library for animating the revealing of text in React.
• React Spring — One of the industry standards for building animations in React apps. Very easy to integrate and typically lightweight if used appropriately.

React Spring

• Airbnb Lottie — Airbnb’s open source animation library for iOS, Android, and React Native that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets.

Airbnb Lottie — The Verge

• Velocity.js — Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Velocity.js — CodeMyUi

Thank you so much for taking the time to read this article :). I frequently write on a myriad of design and tech topics, so feel free to follow for more.

Happy designing!

-Justin