Animation and Code

Excerpt from "Type On Screen" | Brian Pelosh, Jinhwan Kim, Nicki Dlugash, & Cameron Zotter

Intro Basic Animations About The Book Design Choices Citation

Kinetic type saturates screens of all types and sizes and across all digital platform, from phones to computer screens to jumbotrons. Motion enlivens typography by adding complexity and dimensson to flat letterforms. We’ve come to expect type to move and change in title sequences for film and television and on the flashing screens of Times Square, pitching the latest gadgets and news. Animated text appears in more subtle ways in digital interfaces. Triggered by a simple touch, type moves as we open applications on our smartphones or click on a menu on a website.

Animated typography is not a new phenomenon. Saul Bass pioneered the medium more than fifty years ago with his innovative title sequences for Alfred Hitchcock films. While Bass was able to produce stunning effects with limited means, today’s advanced soft- and hardware have made the process of animating letters more accessible than ever. Ranging from simple to sophisticated, animation effects have become integral to such commonplace tools as Powerpoint, Keynote, InDesign, and HTML5. An animated GIF (Graphic Interchange Format), the simplest form of web-based animate, can be produced entirely in Photoshop.

Typography is not inherently kinetic. Most letterforms are designed to be static, front, and upright. Motion allows type to grow, shift, transform, shrink, and stitch across time and space. Working with so many parameters can be overwhelming. But by storyboarding a concept and focusing on a few basic transformations, designers can plan and produce animations that add meaning and purpose to a project instead of stirring up a maelstrom of arbitrary effects.

In addition to transforming text through carefully controlled animation techniques, today’s designer are using code to produce unexpected forms. Experimenting with programming tools such as Processing, Paper.js, and Nodebox, designers create generative systems that construct complex letterforms and texts that behave like living or mechanical organisms.