Project 4: Type Animation

Exploring how motion and sound can express the personality of Roboto Slab.

8 min readDec 8, 2020

Having already designed a spread that covered the basic personality of Roboto Slab, we moved onto animating the typeface to explore how elements of motion could express the same adjectives in unique and interesting ways.

Defining the Script

Adjectives
Modern, Effortless, Friendly, Rhythmic, Approachable, Adaptable, Flexible, Universal

Long Essay
The Roboto family is defined by its adaptability. In the turn of the 21st century, digital devices became increasingly ubiquitous. Everything — from phones to refrigerators — started to connect with one another. Suddenly, a typeface needed to work on a 2” watch screen, an 80” Smart TV, and everything in between. It had to be legible enough for users to read instantly off a car’s dashboard when driving yet remain invisible enough to be Android’s primary typeface. In this ever-changing digital landscape, Google’s design team was confronted with a unique challenge: How do we create a type system that works across it all?
Their solution was Roboto, a geometric family of typefaces in their larger Material Design system that was crafted to be flexible, friendly, and most importantly, universal. Google’s in-house team of designers, led by Christian Robertson, released the original Roboto family in 2011, and Roboto Slab in 2013, to replace its aging sibling Droid Sans. The first iteration of Roboto Slab came in four different weights: Thin, Light, Regular, and Bold.
Roboto Slab emphasizes its friendly nature through its seemingly contradictory blend of large, rounded curves and geometric letterforms. Its straight-edged capitals and tall x-height help increase its readability across a wide range of screen sizes. Roboto Slab’s large counters and narrow apertures gave it an approachable yet distinctly modern appearance that matched its content. Unlike its more clinical, clean counterparts like Apple’s San Francisco or Microsoft’s Segoe UI, its angled, open terminals and slightly slanted serifs keep its personality playful and interesting. The designers gave special attention to the letterform’s dimensions, letting each letter stretch or shrink to its own width to give it a rhythmic, almost effortless reading experience. Compared to its predecessor Droid Sans, Roboto Slab’s more condensed letterforms could fit more content into the same amount of space without feeling tight or compressed.
Since its release, the Roboto family has grown into its own. Whether on Android, YouTube, or Google Maps, the typeface has become synonymous with the modern web. However, Roboto’s adaptability extends beyond just its letterforms or its use cases. Ever since its initial 2011 launch, Google’s Material Design team has been constantly innovating the family to fit the modern digital age. In 2014, the team tweaked the Roboto family to improve its legibility. In 2019, Roboto Slab got five new weights, expanding the number of styles to include nine different thicknesses. Furthermore, the update also introduced variable weights to Roboto Slab, which let typographers generate every possible font weight from 100 to 900. Font families like Roboto have evolved alongside the digital age and filled its corresponding typographic needs. The story of Roboto isn’t just about its friendly personality or incredible flexibility, but it also reflects the role of typography in our everyday lives.

Short Writing
Roboto Slab
Geometric yet curved, rhythmic yet playful
Large counters, narrow apertures, angled serifs
Tall x-height, natural spacing
Roboto Family
Android, YouTube, Google Maps
Designed for the digital age
Constantly evolving, constantly improving
Any device, any size, any weight
To fit a typographic need
Adaptable, invisible, ubiquitous
Material Design in miniature

Starting with the three pieces of writing we created for the poster, I began creating the initial script by pulling elements that were important to understanding the typeface, like the history or distinct features, together to see what order made the most sense. I made sure to include and emphasize a few key aspects that built the outline for my story:

Background of why the font was created
Who/where/when it was made
Its purpose/intended use cases
Letterform characteristics
Key adjectives

Script
Watch, phone, refrigerator, TV
The digital age demanded a new kind of typography
One that was
Legible, flexible, and universal
Created by Christian Robertson as part of Google’s Material Design system
Roboto Slab was born in 2013.
Geometric yet handcrafted, rhythmic yet playful
Large counters, narrow apertures, angled serifs
Tall x-height, natural spacing
Nine weights, fully variable
To accomodate
Any device, any size, any weight
Adaptable, invisible, ubiquitous
Material Design in miniature

Since Roboto Slab was designed around such a unique set of circumstances, I wanted to make that moment of the story more dramatic by setting up the context and history of its creation before introducing the typeface’s name for the first time. Furthermore, I wanted the plot to move from its specific letterform features back out to the more broad, descriptive portion of its personality. This way, I could cover both the quirky aspects of the slab serif as well as touch on the larger Material Design system that it is a part of.

Initial Storyboards

Wanted to emphasize the idea of bold colors and depth with sliding cards, gives insight into the slightly quirky sense of the slab serif and hints at the diversity of application and uses cases of the typeface. Then looked at possible music to see how it guided me on transitions/tempo.

After creating an initial script, I moved to storyboarding key lines of the script to get a feel for how elements would behave and work through various motion ideas. Taking cues from Google’s own Material Design guidelines, which emphasized creating intuitive interfaces by highlighting the depth of different elements, I wanted to play off the theme of using bold, expressive colors and sliding cards to set up a dynamic yet simple set of basic movements. These helped give insight into the more lighthearted nature of the typeface and hinted at the diversity of applications and use cases it had.

I found that deciding the amount of text on a single screen and the pacing at which new lines appeared or disappeared very early on in the storyboarding process incredibly valuable. Being able to see what different styleframes that I wanted the viewer to remember looked like and linked together gave me insight into the larger narrative I was trying to deliver. Once I got a good grasp on a few of the scenes I wanted to try animating, I then looked at possible music to see how it might inform my overall tempo and transitions.

Music Selection

I ultimately settled on these two songs because of their strong beats that seemed to push the story forward. I decided to move away from music that had prominent vocals since it didn’t seem to fit well with the universal, almost invisible nature of Roboto Slab’s personality. In the first track, I liked how the cowbell taps that counted tempo felt easygoing yet energetic, something that I thought would fit well with the slide transitions and bold colors I wanted to use. However, the funky melody and subtle vocals in the background of the second track caught my attention and the faster tempo gave more variety in the possible timings of each scene.

Tuesday Feedback (Jaclyn)

A lot of people might recognize your music, not if that’s a bad thing
Tempo and the melody are of different speeds, see how to play with that
Next step → taking thumbnails and make a musical slideshow, get a vibe for how the animations and music fit
keep in mind readability, make sure that there’s enough time to actually read the text, could check by reading aloud the text as it appears
Create basic moodboard/styleframes to see what themes/motions you want to mimic/draw from
try to keep a small set of movements, keep objects that are in the same group have the same size/movement/colors/etc.

Following Jaclyn’s advice, I first pasted my storyboard frames into After Effects so I had distinct points to reference when filling in the rest of my script. I cut both audio tracks down to one minute segments, which ended up being more difficult than I expected. Once I had both the audio and storyboard frames placed, I then filled in the remaining script lines on the beat where I wanted them to appear or disappear so I could get a better read on the timing and legibility of my video.

Moodboard

Since Roboto Slab and the design system it was a part of were inseparably intertwined, I looked at Google’s Material Design guidelines and some of their other motion videos for inspiration, pulling different shades of their four primary colors out to create a palette that worked well on both light and dark backgrounds. Furthermore, I looked at how other companies applied and used type within larger design systems. I found that IBM’s Carbon Design system and its associated typeface IBM Plex fascinating in seeing how letterforms would reflect the values or traits of the whole system.

Wednesday Feedback (Vicki)

Only time enough to read with visual cues of where to look
when two lines appear, want to reread both
line up the baselines on the second line to minimize eye strain
see if you could do something to emphasize meaning through motion/type → bold might be bolder, verbs have actions, make MOMENTS

Initial Animation Test

Thursday Crit (Vicki)

readable at the current speed, though the iconography is a bit large
fridge is a bit large, watch a bit left, etc.
how does color fit into the narrative? is one color blocking one section of the plot?

Sunday Crit (Hannah)

Make sure the colors read optically the same
Touch up icons to make them seem straight
Trying full-screen swipes instead of icon based swipes? icons might be too hard to read at speed
keep the style of the icons consistent, straight lines only, consistent with the stroke weights and thicknesses
Static-ey noise could correspond to a color fade?
Time vertical swipes on the color full beat
minimum time to read aloud two times fast
try going offbeat, double things every beat

Tuesday Crit (Vicki, Michael, Ian, Quinten)

Think about when to center vs. when to left-align
Use colors and movement to pull eye to where you want to go
Think about animating stroke maybe? that part feels kind of arbitrary
Color refinement, some parts a little heavy
Try optical alignment without the grid just to double check whitespace
Test web accessibility? yellow on white is a bit hard
Maybe using grid as a transition? has a nice aesthetic to it

Final Critique

showing not telling, prove it visually instead of simply stating
trust your intuition and fail faster, don’t hesitate as much
paralysis by analysis is real, don’t be caught to fail to make in time
when do you lean into the music and when do you break the contrast of the relationship b/t music to highlight what is happening?