TYPE ON SCREEN

PIXEL PAINTING TYPOGRAPHY
Cameron Zotter and Jinhwan Kim

Typography embodies written language in a concrete form. A typeface communicates through its strokes, proportions, and visual weight. But what happens when typography sheds its static body and becomes a virtual phenomenon? What happens when readers are free to transform typography to serve their own needs and preferences?

Type on Screen is a book about how to use typography in screen-based applications, from film and video to websites, electronic publications, and mobile apps. This practical primer shows how to combine classic concepts of typographic form and structure with screen-based technologies and principles of user interaction and animation. Type on Screen offers guidance on how to choose typefaces for the screen; how to style beautiful, functional text and navigation; how to apply principles of animation to text; and how to create compelling logos and icons. Reinforced with dos, don’ts, and basic exercises and tutorials, Type on Screen can be used as a textbook for college-level courses in web design, interaction design, and motion graphics and is an indispensable guide for any designer or developer seeking practical and inspirational information about digital typography. Presented here are demonstrations of dynamic typography drawn from Type on Screen.

cover

Available In Print And Digital Editions

book

Paperback: 208 pages, 200 color illustrations, 75 b/w illustrations
ISBN: 978-1-61689-170-1
US $24.95 · UK £15.99

buy the book
epub

ePub: Coming soon. Includes additional multimedia content; supports Kindle, iBooks, Nook and most digital readers.

pdf

Enhanced PDF: Coming soon. Universal format with additional multimedia content for use on any computer or tablet.

Animating Type

In any time-based design—from a complex title sequence to a simple Keynote presentation— there are numerous possibilties for text to arrive on screen. It can fade in, fade out, drop down, or simply appear on a blank canvas. It can emerge all at once, word by word, or letter by letter. Type can change in opacity to appear or disappear, or the background can shift to reveal or conceal what is printed on top of it. Although animation can be highly abstract, designers often use motion to imitate movements and behaviors observed in the physical world. As projects build in complexity, they manipulate multiple parameters to create text that appears to inhabit a dynamic, three-dimensional universe. Diagrams designed by Cameron Zotter.

Basic Animations

  • APPEAR The type simply appears on a blank screen.

  • WORD APPEAR Each word appears in sequence to reveal the full text.

  • OPACITY Text gradually becomes opaque.

  • FALL IN Text falls from the top of the screen and stops in place.

  • FOCUS Text comes into focus from a blurred state.

  • VERTICAL REVEAL A foreground plane slides up or down to reveal text.

  • BACKGROUND COLOR SHIFT The background changes color to reveal the type.

  • LETTER SLIDE IN Individual letters slide in horizonally, in order.

  • PAGE FLIP The type enters the screen with the motion of a flipping page.

  • Fly in + Opacity The individual letters fly into place while increasing in opacity.

COMBINE TECHNIQUES

  • PAN + OPACITY The camera pans to each word, which changes in opacity.

  • PAN + ROTATE The camera pans and rotates to reveal the type.

  • REVOLVE Each word is displayed, and then rotated.

Animated GIFs

The animated GIF is one of the oldest animation formats for the web. Introduced by CompuServe in 1987, it consists of a series of single-image frames that play in sequence, often in a loop, to form an animation. This crude technology polluted the Internet during the 1990s, when animated GIFs popped up everywhere in the form of flashing flames and “under construction” signs. The Web 2.0 gradient craze of the early 2000s left the animated GIF for dead, but designers and photographers recently resurrected this trusty format, finding new ways to exploit its technical simplicity and retro charm. In a few short frames, a GIF creates moving images for display on any device.

Animated Gifs media section

brand new starts In this typographic animation, the numbers dissolve in a clockwise wipe, then reappear. Design: Jason Wong, Friends of Type, 2012.

Animated Gifs media section

graffiti meets gif British artist Insa creates animations from photographs of his street art by manipulating the stripes in the photograph. Design: Insa, 2011.

Animated Gifs media section

Wavering A The flicker of a computer screen is animated over several frames in this eerie GIF. Design: Amy Thornley.

In the Classroom: Animated GIFS

WITH BRIAN PELSOH

The animated GIF is one of the oldest animation formats for the web. Introduced by CompuServe in 1987, it consists of a series of single-image frames that play in sequence, often in a loop, to form an animation. This crude technology polluted the Internet during the 1990s, when animated GIFs popped up everywhere in the form of flashing flames and “under construction” signs. The Web 2.0 gradient craze of the early 2000s left the animated GIF for dead, but designers and photographers recently resurrected this trusty format, finding new ways to exploit its technical simplicity and retro charm. In a few short frames, a GIF creates moving images for display on any device.

narrative techniques

Aristotle described a story as “a whole action of a certain magnitude.” What makes a story feel whole and complete? Words and images bopping aimlessly around a screen don’t add up to a fulfilling experience for viewers. Movement on screen should feel purposeful. Like a story, it should have a beginning, middle, and end; it should convey from the outset that the motion is heading somewhere and deliver a satisfying sense of closure. A fully developed story follows an arc, from a set of initial conditions to a problem or conflict to a final resolution. Similarly, a successful animation consists of sequences of changes in scale, position, or color that work together to convey whole actions.

ANALOG MEETS DIGITAL This animation combines hand-drawn lettering and multiple animation principles to illustrate the story of a young boy confronting his fears. Design: Kelcey Towell. Story: Corey Bradbury, 2012.

  • SCALE CHANGE Animation software allows the designer to change the position of the viewer.

  • APPEARANCE OF DEPTH Shifts in scale can be used to imply depth on a two-dimensional.

  • ANIMATING FILL Any graphic element can be animated.

  • EMPHASIS Various words are knocked out of moving shapes in order to create emphasis.

Transitions: getting from A to B

Animation is often used to transition between two states. The in-between state is where the action occurs. Some may scoff at the standard transitions we have inherited from filmmaking, such as swipes and fades, but often the more basic a transition is, the more effective it is. Following are some simple and some more complex ways to animate the transition between two frames of information. These techniques can be used in websites, slideshows, or motion graphics. Diagrams designed by Jinhwan Kim

  • ROTATE Landscape image rotates to portrait.

  • CHECKERBOARD Square segments of frame A flip over to reveal frame B.

  • OVERLAP Frame B moves in over frame A. The direction may vary.

  • FOCUS Frame A becomes blurred as the focus is given to frame B.

  • FADE OUT Frame A fades out as frame B appears from behind.

  • PAGE SPIN A three-dimensional cylinder spins around and pulls out a selected page.

  • PAGE TURN Frame A folds closed as frame B unfolds from the other side.

Animated Logotypes

Animated logos have appeared on television for decades, where they dramatize the identity of networks, local stations, and individual programs. Often appearing in short clips between commercials, animated logos for television can become stories in their own right, occupying center stage and accompanied by distinctive music and sound. Logos that move and change also play a role on websites. The animated identity system proposed by Natasha Jen for the cultural event Context/Out of Context, pictured below, conveys its own narrative and occupies considerable screen real estate. Most animated logos on the web require less space and use motion in quiet ways. A logo might cycle through one or two transformations and then come to rest, or it might change only on rollover, or when the screen is refreshed. Designers seek to balance the desire to attract the eye with the need to respect the reader’s focus on the site’s content. READ MORE >> Irene van Nes, Dynamic Identities: How to Create a Living Brand (Amsterdam: BIS Publishers, 2012).

animated logotype image1

animated logotype image1

CONTEXT/OUT OF CONTEXTThis logo begins as a grid of dots. Over time, the grid becomes populated with the elements of the graphic identity. Design: Natasha Jen, 2010.

B-X LAB This identity features an invisible window that alters the letters as they move behind it. Design: Luiz Ludwig and Javier Lopez, 2013.

animated logotype media2

SECCA by Luke Hayman, Pentagram, 2010

CURRENT TV This logo for a progressive cable news channel appears to blow in the wind like a flag. Design: Wolff Olins with motion assistance by Ghava, 2011

Generative Logotypes

Generative logotypes employ rule-based algorithms to produce variations on an underlying form. A generative logo might potentially produce infinite versions. This experimental method of logo design is often used to emulate or demonstrate the thought process associated with institutions engaged with science and technology. The identity system created for MIT Media Lab in 2011 allows every member of the organization—faculty, staff, and student—to have a unique logo. The identity aims to express the collaborative nature of Media Lab’s work while its design strategy matches the institute’s experimental outlook. Custom animation software allows each member to add unique animations to the many videos produced by Media Lab. Creating all those manually would be unmanageable, so instead a system is set up and given some rules (color sets and a grid in this case), which can generate an infinite number of individual logos.

MIT MEDIA LAB LOGO The designers devised an algorithm to generate endless variations of the MIT Media Lab logo. Design: Richard The, E. Roon Kang, and the Green Eyl, 2011.

EXPLORATORIUM: CONCEPT LOGO This animated logo grows and changes like a living thing. Design: Paul Hoppe, 2011.

Case Study

MFA Branding

This dynamic logotype was designed to promote a series of interdisciplinary MFA thesis exhibitions held at MICA. The logo is based on sixteen permutations of the letters M, F, and A. These varied custom letterforms symbolize the school’s range of interdisciplinary study (painting, photography, design, illustration, digital media, and more). Each character was created collaboratively by three designers, who took turns adding their touches to the grids, lines, and warped planes that make up these distinctive shapes. On screen the logo flips through all of the available characters like a slot machine. The simple black-and-white color palette is accented by flashes of neon green. case), which can generate an infinite number of individual logos.

MFA branding image

INTERDISCIPLINARY LETTERFORMS Three designers played musical chairs, each taking a hand in creating the sixteen letterforms featured in this dynamic identity for MICA’s MFA thesis exhibitions. Design: Brian Pelsoh, Javier Lopez, and Kelcey Towell, 2013.

MFA branding image

Case Study

Poster Machine

Using Processing and Arduino, designer Luiz Ludwig developed the Poster Machine to challenge the digital tools that designers conventionally use to make posters. Instead of a computer and Adobe software, Ludwig offers users a series of knobs and switches and a flat-panel television; anyone can create a poster by manipulating the position and scale of a set of given design elements. Each poster is both hand- and machine-made.

POSTER MACHINE images

POSTER MACHINE images

POSTER MACHINE images

Design: Luiz Ludwig, 2013.

Case Study

Transitions on the street

On the street, everything is moving, including signs. Traffic signs flicker and restaurant signs flash, all vying for our limited attention. The ubiquitous road construction sign shown here is made from square units that become green when open and black when closed. Each segment changes at a different speed, a simple system that creates surprisingly interesting transitions.

transitions in street image

ANALOG PIXELS This common construction sign can display a maximum of twenty-four characters, eight characters in each of three rows. Each character is formed by a combination of thirty-five available pixels, which are either on or off. The images here were captured in less than two seconds. Photos: Jinhwan Kim, 2012.

Case Study

Logo Transition

Designed by Jinhwan Kim, this animated logotype for a website about future technologies employs images of six-sided cubes, one for each character of the title. The cubes are programmed to rotate randomly yet always spell out the text “function beyond form.”

logo transition images

FUNCTION BEYOND FORM Design: Jinhwan Kim, 2012.

logo transition images

Case Study

Kixel: A Kinetic Alphabet

Kixel is a collection of kinetic letterform experiments, one for each letter of the alphabet, designed by Jackie Littman. The series explores the construction and deconstruction of form through a variety of animation techniques, including stop motion, digital effects, and animated GIFs. Each animation is based on a modular unit, from paper to pixels to peppermints.

kixel images

Design: Jackie Littman, 2012.

kixel images

STOP MOTION B Red Tic Tac candies are placed on a sheet of paper, one at a time, to create the form of a letter B. Design: Jackie Littman, 2012.

Case Study

the alphabet of nations

Created with the band They Might Be Giants (John Flansburgh and John Linnell), this video presents kids with an alphabet of geographic locations. The project was designed by Emily Oberman and her team at Pentagram, who produced a layered landscape of letterforms that plays with space in two and three dimensions. The typographic maps are mixed with crowd-sourced imagery, supplied by TMBG fans from around the world via Twitter and Tumblr. The video was made to benefit the Global Fund for Children, an international charity. Design: Pentagram, 2012.

the alphabet of nations images

the alphabet of nations images

the alphabet of nations images