Fundamental Typography Guidelines for Motion Designers

Apr 21 2010 by Jake and Dan | 21 Comments

Fundamental Typography Guidelines for Motion Designers

When designing for the screen, people tend to underestimate the importance of type. You would be wrong to think that only print designers have to kern, adjust, weight and organize type meticulously.

That’s exactly what separates semipro’s from high standard professionals. Let’s talk about minuteness for a bit.

It is strictly a lie that motion designers don’t have to spend hours on adjustment and alignment on type.

It is starkly a lie that motion designers don’t have to kern, weight and organize type.

Obviously, we can’t bring typography to perfection for every single frame, but the important key frames should show a sense of aesthetics when it comes to typography.

We’ll share with you the do’s and don’ts of typography used in animation.

Do’s and Don’ts of Typography in Animation

Do: use sans serif fonts when the type you are displaying is not easily legible due to terms of timing or composition. Serif fonts are harder to read and become a plight rather than the originally intended information bearer.

Serif

Always keep in mind that you are designing for the screen. In opposition to printed work, the user can easily resize your screen design, and you sure as hell do not want to lose your serifs due to the user’s high screen resolution. Using sans serif typefaces retains the readability even at smaller font sizes.

Don’t: stretch fonts disproportionally. The thick strokes will get way out of proportion fast, so will the curvatures. Squeezing type could even put your job in jeopardy.

Do: limit yourself to two or three different typefaces per piece of art. More than that will destroy the feeling of a clear concept and make you look like an amateur. This tip is generally held as a basic guideline for typography in any media, whether its print design or web design typography.

Don’t: use faux italic or faux bold. Those are the buttons for bold and italic in Photoshop and any other Adobe product. They will try to simulate the type style of the font but never succeed entirely as it can’t elicit what the intention of the font’s creator was. And yes, in most cases, faux italic and faux bold are noticeable.

Instead, look for the typeface’s italic or bold style. In the example below, you can see the difference between the real versus the faux bold style.

Faux bold

Do: kern your type. A big leap between L and T, for example, simply looks foul. Use your Alt/Option key in combination with the arrow keys to change the kerning between letters in any product of Adobe.

Don’t: make text oriented vertically unless you’re targeting an audience that is accustomed to reading them this way. Especially in animation, it is irritating and takes time to read since most viewers are used to reading from left to right.

Kerning

Do: use a grid to align your type elements. Relate them to each other in size and position and make sure the spaces between them are equal or follow the same pattern. (Learn more about grid layouts.) Use tracking and leading to bring the spacing to perfection.

Don’t: use Comic Sans or Papyrus. We don’t care how funny they might look. Do not ever use them. Since Microsoft released Comic Sans back in 1994, it has been used in any possible (unintended) way.

It was originally designed to imitate Comic book lettering, and that’s the only occasion you should ever even consider using it. And even then—you’re better off with another font. (Read more about the History of Comic Sans.)

Summing Up

Don’t look at type as if it is a "must", but rather, see it as another powerful graphical element that will not only help to convey your message and information, but also support the overall visual impression. And—when worse comes to worst—you can still ask Max Kerning.

What are your own experiences with typography in motion design such as Flash movies? What tips can you share with us? Share it in the comments.

Related Content

About the Author

Jake and Dan is the design and postproduction team of Jake Rathmanner and Dan Borufka, based in Austria and the Bay Area. They are the founders of creatogether, a site where they share articles and tutorials on design and coding. As freelancers in web design and postproduction, they are driven by challenge. Catch Jake and Dan on Twitter as @jakeanddan.

21 Comments

matt

April 21st, 2010

great tips, thanks!

Young

April 21st, 2010

hahahaha “don’t ever for any reason use comic sans”… amen. i did enjoy looking at all the pictures of improper uses, however.

DBT

April 21st, 2010

It’s true when we have to use sans-serif font for animation. I hate looking at some animated serif text, it makes my eyes hurt :(.

And a good “DO” I love in this post is using grid. It’s right, because it can make my eyes “predict” where the text will be shown and of course my eyes don’t have to look around just for finding it :D.

Steve

April 21st, 2010

Lol, don’t use Papyrus. I guess James Cameron can break the rules all he wants. That stick out for anyone else watching Avatar?

FreshBTutoriaL

April 22nd, 2010

wow…nice and fresh tips. Thanks dude

sada

April 22nd, 2010

Nice one… Thanks!!!

Oliver D.

April 22nd, 2010

Great tips. Its a helpful concept for logo and branding designer. Thanks. More power.

author wanglili

April 22nd, 2010

I like the plug-in of About the Author in the bottom of the post. where can I download this plug in?

Jacob Gube

April 22nd, 2010

@author wanglili: It’s not a plugin. It’s a theme function. But I would be surprised if there wasn’t a plugin for this out there. Although, if you have a developer handy, he can write you up one in under 10 minutes.

clea walford

April 22nd, 2010

thanks for the nice and useful tips!

robert

April 22nd, 2010

WoW!! Thks, helpful tips for futures project

Jordan Walker

April 22nd, 2010

I will take those into consideration when designing product labels. Thanks for the advice, much appreciated.

Chris McCorkle

April 22nd, 2010

Yeah, thank you for the tips. A quality sixrevisions post.

WebGuide4U

April 22nd, 2010

typogrpahy is an essential feature for any website/blog. because it helps out to gain people attention and more subscribers.

@ author wanglili: there is a plugin if you search it on wordpress plugin gallery and if you don’t want to search it on wordpress plugin gallery then you can search the net tut plus site oe 1stwebdesinger where you find the code to show the author profile information at the end of the post. if you are using thesis theme then let me know i will help you out in customizing it

Cook

April 22nd, 2010

nice tips….thx for sharing

Robin

April 25th, 2010

typogrpahy is an essential feature for any website/blog. because it helps out to gain people attention and more subscribers.

@ author wanglili: there is a plugin if you search it on wordpress plugin gallery and if you don’t want to search it on wordpress plugin gallery then you can search the net tut plus site oe 1stwebdesinger where you find the code to show the author profile information at the end of the post. if you are using thesis theme then let me know i will help you out in customizing it

Sam

April 25th, 2010

Yeah, thank you for the tips. A quality sixrevisions post.

Wes Hare

April 26th, 2010

Great typography tip for designers of all mediums.
However, there are some lovely beefy serif and slab serif typefaces that are very usable, it’s not always about the sans.

Steve, I agree. Papyrus?! It’s just silly.

Charles

April 26th, 2010

typogrpahy is an essential feature for any website/blog. because it helps out to gain people attention and more subscribers.

@ author wanglili: there is a plugin if you search it on wordpress plugin gallery and if you don’t want to search it on wordpress plugin gallery then you can search the net tut plus site oe 1stwebdesinger where you find the code to show the author profile information at the end of the post. if you are using thesis theme then let me know i will help you out in customizing it

Jeff

April 26th, 2010

thanks for the nice and useful tips!

motiodesign

May 3rd, 2010

thanks! I would strongly agreed with you. Just what a typographer need :)

Leave a Comment

Subscribe to the comments on this article.