• Add to Collection
  • Tools Used
  • About

    About

    THE FIRST FONTSHOP POWERED BY PEOPLE'S VOICES. To celebrate The Webby Awards People's Voice 20th anniversary, Ogilvy NY created Typevoice, the f… Read More
    THE FIRST FONTSHOP POWERED BY PEOPLE'S VOICES. To celebrate The Webby Awards People's Voice 20th anniversary, Ogilvy NY created Typevoice, the first fontshop that allows anyone to create their own typeface using their voice. Scream, shout or sing and Typevoice will generate a customized font based on your unique soundwave. We created an algorithm that measured pitch, volume and time lapsed, allowing each letter to react in realtime (using two independent SVG animation timelines). People can share animated GIFs of their font or even download the vector of their typeface of their whole alphabet to use in their design projects.  Read Less
    Published:

Watch the full case study below.



THE FIRST FONTSHOP
POWERED BY PEOPLE'S VOICES.

To celebrate The Webby Awards People's Voice 20th anniversary, Ogilvy NY created Typevoice, the first fontshop that allows anyone to create their own typeface using their voice. Scream, shout or sing and Typevoice will generate a customized font based on your unique soundwave. We created an algorithm that measured pitch, volume and time lapsed, allowing each letter to react in realtime (using two independent SVG animation timelines). People can share animated GIFs of their font or even download the vector of their typeface of their whole alphabet to use in their design projects. 

Visit www.typevoice.net for the full experience (the web app is only supported by Google Chrome and Firefox bowsers).






The website utilized GSAP to create two independent animation timelines—or two axes of motion, one driven by pitch and the other volume. The site runs in Chrome, is built in ES6 vanilla Javascript, uses GSAP & CSS animations for SVG images, and weighs only 1.5mb.




The following are examples of unique fonts generated by people's voices. Over 10,000 unique fonts were generated in the week leading up to the launch of The Webby Awards People's Voice Awards 2016.



Below are several examples of typographic art that was created from the a selection of the generative typography that was downloaded from Typevoice.


Awards & Recognition:

Cannes Lions: Silver | Design and Cyber
D&AD: Yellow Pencil | Crafts for Advertising / Typography for Advertising
One Show: Silver | Design | Dynamic / In Motion
One Show: Merit | Design | Website Design
One Show: Merit | Direct Marketing | Use of Digital Technology - Single or Campaign
One Show: Merit | Interactive | Utility
One Show: Merit | UX / UI | Utility




Chief Creative Officer: Corinna Falusi
Creative Direction: Chris Rowson, Bastien Baumann
Design Lead: Blake Rutledge
Typography Design: Lucas Camargo, Justin Au, Robyn Makinson, Weston Doty
Creative Technology & Development: Blake Rutledge, Joe Laquinte, Lynn Maharas
Motion Design: Justin Au
User Experience Design: Blake Rutledge, Justin Au, Chris Allen


Thanks for checking this out.

Follow me on: