Smashing Magazine we smash you with the information that will make your life easier. really.
Typography In Motion
November 19th, 2007 in Fonts, Monday Inspiration | 74 Comments
In most designs typography is used to present information in a rather static way — after all, it has to be read by users. However, it doesn’t have to be like this. What effects can be achieved if typography is set in motion? What happens if letters are suddenly floating, jumping and dancing around while sentences are actually interacting with the readers?
Where motion is involved, video is necessary. Below we present some excellent examples of typography embedded into movies and videos — be prepared, “dynamic” typography can be breathtaking.
Typography In Motion
Cuarteto de Nos
This music video of the Spanish Uruguayan band Cuarteto de Nos is mostly based upon typography. For our purposes it isn’t important what the song is actually about — the brilliant performance of typography makes a lasting impression. The colors are chosen wisely and carefully. The combination of letters, illustration and text effects is simply incredible. A must-see for typography lovers.
Alex Gopher - The Child
A video created by Antoine Bardou-Jacquet for the French DJ Alex Gopher. A world made only with typography. Cult video for fonts lovers and graphic designers.
The Hush Sound - The Lions Roar
So simple, yet so beautiful. Apparently, sometimes you just need to follow your inspiration. The rest isn’t that important.
Pulp Fiction in Typography
What Does Mr. Wallace Look Like?
Typographics
Typography is what language looks like. A brief movie about typography with interacting typographic elements.
Duck and Cover
Typography assignment using audio from an old public service announcement called “Duck and Cover” from the 50s.
Further Resources
- Court.TV
A typographic intro. - Typography In Music Videos
A growing collection of music videos based upon different typography techniques. - Citizen Cope - Let The Drummer Kick
A typographic animation of Citizen Cope’s song “Let the Drummer Kick”.
The Last Click
Royksopp - Remind Me
OK, it’s not about pure typography, but this music video is fascinating. As stated here, you can watch it dozens times and still not catch everything. A day in the life of an average working Jill, broken down into its minutest component parts. The unstated joke: mankind has erected immense, resource-devouring systems of almost incomprehensible complexity just so you can sit in your cubicle.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Footers can be a place where a designer can let his creative juices flow a little more freely. Christian Watson shows 76 excellent footer designs. More footers.
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Robin (November 19th, 2007, 4:46 pm)
It’s shame that some of these are just YouTube videos - I’d love to see higher quality versions, particularly of the ‘typographics’ clip
Richard Francis Kay (November 19th, 2007, 4:58 pm)
Great post! They look absolutely fabulous :-) Thanks for putting such an effort in this Smashing resources/quality website!
Eli (November 19th, 2007, 5:08 pm)
Seen the Pulp Fiction one before, really quite interesting.
Also, as Robin said, it would be good if we could see a better quality version of these, I hate the tiny little videos :)
JoK (November 19th, 2007, 5:11 pm)
What a perfect begin for this week !
Thanks a lot smashing yeah.
Some of this videos are absolutely cultish.
David Airey (November 19th, 2007, 5:24 pm)
The Alex Gopher vid is one of my all-time favs. I’d never seen the Royksopp video before, even though I really like that track, so thanks for posting it.
uli (November 19th, 2007, 6:16 pm)
great post, thanks for that! I hope there will be a chapter 2 with opening titles of movies …
and those youtube-flash-movies suck. I wish quicktime ruled the net :(
~~~d(o.o)b~~~ (November 19th, 2007, 7:20 pm)
Alex Gopher… I love his music style… and that clip is perfect!…
Jet… I like their song and that video rocks too…
Pulp Fiction… Does he look like a bitch?… BAM, BAM, hrhr…
Thanks for that great stuff!… really smashing…
hAVE pHUN
~~~d(o.o)b~~~
Aaron (November 19th, 2007, 8:59 pm)
Maybe Prince’s 1987 video clip for Sign ‘O’ The Times was maybe the first commercial use of mainly typography in video clips:
Prince’s video on Dailymotion
Stephane (November 19th, 2007, 9:09 pm)
Link [www.dailymotion.com]
Here is another nice video clip with cool typography in motion :) hope you’ll enjoy it
French Rap Music
Franko (November 19th, 2007, 9:15 pm)
That’s quite nice also: Link [blog.designin.pl]
Jonny Haynes (November 19th, 2007, 9:30 pm)
really smashing work ;-) seriously, keep it up!
Wendy (November 19th, 2007, 9:40 pm)
would love to see the font download references from those movies mentioned
cemiotika (November 19th, 2007, 9:59 pm)
Hi there!, CUARTETO DE NOS is not a SPANISH band, is a BAND from URUGUAY (south america!),
I’am from Uruguay too!, that’s why i know where is the band from!…
CheerZ! (sorry for my english)
joseph (November 19th, 2007, 10:07 pm)
This is an excellent article. Loved this post…So many talented pieces in this.
Anthony (November 19th, 2007, 10:16 pm)
Royksopp is awesome. This has been one of the better Inspiration monday posts. Keep it up Smashing!
Michael Peters (November 19th, 2007, 10:23 pm)
This is fucking incredible post! The best Monday Inspiration so far!
Chris (November 19th, 2007, 11:09 pm)
Link [www.youtube.com]
~~~d(o.o)b~~~ (November 20th, 2007, 12:13 am)
@Stephane:
Nice track and a cool clip 2… ;-)
hAVE pHUN
~~~d(o.o)b~~~
Ryan Uhrich (November 20th, 2007, 12:19 am)
Hi Robin,
Yeah, the Youtube version is really compressed and hard to see. You can view a higher quality version of Typographics at:
Link [wearenormal.ca]
cheers :D
Ryan
tite (November 20th, 2007, 12:38 am)
Yeaaaaah !!!
AweSomEEEEE MONDAY
Thanks
Jonic (November 20th, 2007, 12:55 am)
Here’s another cool typography in motion clip… It’s more about the animation than the typography itself, but it’s worth a peek anyway…
It’s the first 30 seconds of Blackalicious’s “Chemical Calisthenics”:
Link [www.youtube.com]
CrazyLeaf (November 20th, 2007, 1:47 am)
Love the Pulp Fiction one. Really interesting.
JC (November 20th, 2007, 2:03 am)
More here: Link [deafmusician.com]
ezKiel (November 20th, 2007, 3:35 am)
You have to include Link [www.youtube.com]
Wes O'Haire (November 20th, 2007, 3:36 am)
Hey guys check out this one out too…
Link [www.youtube.com]
Ben (November 20th, 2007, 5:04 am)
Nice article as always. I love typography, particularly in movie credits.
Matty (November 20th, 2007, 9:49 am)
Smashing post! This was very inspiring for me, thanks a lot Smashing Magazine. :)
Mig Reyes (November 20th, 2007, 12:23 pm)
Hey, thanks for posting our video! It’s an honor to be among so many other great type-based motion videos. Check out our high-rez version on Vimeo!
Link [www.vimeo.com]
thejanuaryfall (November 20th, 2007, 12:33 pm)
the hush sound one is made by my friend mig reyes, he.s a student at the illinois institute of art … so you should give credit to mig reyes, not the hush sound …
Mig Reyes (November 20th, 2007, 1:19 pm)
I did it in collaboration with Matt Born, he never gets enough credit haha. Thanks!
Carola (November 20th, 2007, 5:04 pm)
@cemiotica (or anyone informed)
Do you know who made the Cuarteto de Nos video ?
(translation: sabés de quien es el video del Cuarteto de Nos?)
torkla (November 20th, 2007, 10:22 pm)
@Carola
Productora: Milagrito Films
Director: Charly Gutierrez
:)
Bruno (November 21st, 2007, 12:29 am)
Hi!,very good selection , i am uruguayan , and is good to see a high quality work like the Cuarteto videoclip listed here.
By the way, amazing blog, i have this feed on favorites. Keep Smashing!
stefano picco (November 21st, 2007, 1:28 am)
simply call it motion-design
Raf (November 21st, 2007, 1:30 am)
If you’re going to talk about typography in motion you gotta talk about the masters - mk12. Link [www.mk12.com]
Just check out their reel.
TheUprock!.com (November 22nd, 2007, 1:42 am)
A little disappointed when I opened — I’ve seen all these videos before, by simply typing “typography” into YouTube.
I can’t believe you guys didn’t include this video, which pioneered most of the aforementioned clips and their styles —
Link [www.mk12.com]
Dom Gregori (November 23rd, 2007, 5:15 am)
Can’t believe no one included this one. Link [brian.shaler.name]
Out cast’s hey ya covered by Obadiah Parker (Acoustic) all typography by Brian Shaler.
-Dom
madriaza (November 24th, 2007, 4:49 am)
we publish this post about 5 months ago. see Link [www.digilicious.cl]
Stefan (November 25th, 2007, 7:50 am)
Mhhh, great but Link [www.colurz.de] published some movie based typographie videos a few days earlier. Also great!
paqpaq (November 25th, 2007, 8:12 am)
Link [www.youtube.com]
cb (November 27th, 2007, 4:35 am)
This is all a rip of Kyle Cooper’s work.
If you don’t know about Kyle Cooper, you probably need to - he’s the Saul Bass of contemporary motion graphics. If you don’t know who Saul Bass is…
NR (November 28th, 2007, 4:43 pm)
What kind of programs are used for this videos. And are there some tutorials on the web so I can start experimenting with it.
Love the videos!!
Jorge (November 29th, 2007, 3:13 pm)
This one rocks.
Link [www.clemenskogler.net]
fayyaz B. (December 10th, 2007, 9:29 pm)
Cool stuff… very inspiring!.
I remembered an ad for one of the earliest MAC Ads which had a really cool TYPOGRAPHY animation. It was so smooth and cool like MAC ads are, though I never got hold of that ad or how that was made.
nicole (March 4th, 2008, 8:56 am)
Link [www.youtube.com]
is also another fun typography piece.
chestah (April 7th, 2008, 5:46 am)
pulp fiction in typography is smashing!
Reginald (May 13th, 2008, 1:01 pm)
Typography in motion…everything is always that much more impressive with a little animation.