Fonts: List of my favorites

Occasionally people will ask me what fonts they should use. My advice is to try to use well established fonts whenever possible. In fact in school one of my teachers really pushed us to only work with one or two fonts in all our projects for one semester. Frequently working with the same font really helps you discover it's strengths and weaknesses and helps you get a feel for what you can do with it. Now before I started seriously looking at becoming a designer I loved to use crazy decorative fonts and there are literally thousands of them out there. I thought they looked pretty cool at the time but now looking back at them I see that most of them were really quite hideous. They usually stand out from the design like a sore thumb and draw more attention to the font it self then to the message being delivered. Plus using in using these crazy fonts I tended to lean on them as a way to make the design look good. The truth of the matter is a good design will look pleasing to the eye with a very simple font. Of course there are the rare occasions where I end up using a decorative font here or there but they are pretty rare. I've listed the fonts I use most often on the side and they include: BaseNine, Baskerville, Bodoni, Caslon 540, City, Clarendon, DIN Engschrift, Franklin Gothic, Franklin Gothic Condensed, Futura, Garamond 3, Gill Sans, Helvetica Neue, Helvetica Neue Black, Helvetica Neue Condensed, Shelly Volante, Snell Roundhand, Times New Roman, Trajan and Verdana. There are other good fonts but if you stick with these time tested standards and try to avoid immediately grabbing the newest flashy font, your designs will look a lot more professional.

Keep it Simple

The most effective designs are usually very simple ones. One of my college teachers really drilled this into my head through the various exercises he had us do. When I'd show him a draft of a design he'd examine it and ask, "Do you think you really need this element? I think you already saying that with something else." Sometimes an extra graphic picture or effect just clutters the message. My teacher stressed that there was no need to say the same thing multiple times and doing so just clutters the design. An extreme example is if you were designing a poster for a concert and used lots of clipart of of music notes, instruments, piano keys and sheet music. Chances are you could communicate the same idea just as effectively with only one of those elements. In fact you might be able to communicate the idea more abstractly by making the typography and colors convey the feeling of music which would probably make it look more professional. The main idea is to focus on saying your message well and saying it only once. After all you wouldn't type the sentence "Come see a great band!" on the poster in the copy multiple times so don't do the same visually. Ask yourself what the bare minimum is that you need to convey the message and start experiment by dropping what isn't needed. This will take time and even courage to try removing things you've worked so hard on but will make your design more effective and easier to read in the end.

Increasing Tracking (Letter Spacing)

One of the easiest ways to make text more readable is to increase the spacing between the letters. This is called changing the tracking and it will especially helps make small text easier to read. Just don’t get too carried away or people will start to read a word as individual letters :-) Basically increasing the tracking just gives the typography more room to breath on the page so it appears lighter and not so bunched up. This is an especially common effect used with type on TV or in films. Increasing letter spacing can also be a nice way to make a piece of text, such as a title, stand out similar to applying a bold or italic effect. Give it a try and see how much cleaner a paragraph or line of text can look by simply increasing the overall letter spacing.

Decorative Fonts

I use to go crazy with decorative fonts. Why use a boring familiar font when there are so many more exciting options I figured. One of the first things I learned while studying graphic design however, was that decorative and crazy fonts need to be used sparingly. They have there place and can be effective at certain times but in general they are going make your design look less professional so it’s usually best to avoid them. Here are a few reasons why decorative fonts spell trouble for your designs:

1) They are hard to read – It’s just a fact that these fonts are more difficult for our eyes to recognize words and sentences. Since design is all about communication, you’re shooting yourself in the foot if you make it difficult for the words to be understood. You might be able to get away with this if you use the font sparingly but never use a crazy font for a large chunk of text.

2) They draw to much attention to themselves – Yes, you want your design to attract attention and stand out but a decorative font can distract from your message and what the words actually say. A good design will attract attention through other more subtle means.

3) They rarely are well designed – Fonts themselves are actually designed and it’s pretty safe to say that 99% of all the decorative fonts out there are poorly designed. Well designed fonts are built to be quietly pleasing to the eye and usually have similarities or patterns that can be seen throughout there characters which make the text seem well balanced.

4) They quickly tell people that you’re not a professional – Think about it. How many big time adds and marketing items have you seen with decorative fonts? Using crazy fonts is more or less just a cheap trick to try to make something look more exciting then it is and it usually screams out that the rest of the design can’t stand on its own.

As you can see it’s normally best to stick with fonts that are well established and time tested. Helvetica Neue, Baskerville, Futura, and Garamond are some great examples and there are plenty of others that I’ll cover in later entries. As a general rule just be sure your design doesn’t rely on the font to attract attention and you’re designs will look much more professional.

Flash Quick Tip - Seamless Looping Tween

Have you ever wanted to make an object rotate continuously in Flash? It sounds simple enough:

1) Convert your object to a Symbol such as a Movie Clip
2) Create a second keyframe a ways out from your first one
3) Tween the two key frames
4) Set the rotation in the Frame Properties of the first keyframe to either Clockwise or Counterclockwise.

This does work and as long as the second keyframe is the last frame in the timeline, the animation will loop continuously when you play or preview your Flash movie. Of course there's one small problem: The animation pauses briefly every time it loops back to the beginning. This is because the first and last frames (the keyframes) are the exact same thing while the rest of the frames all show the object in a slightly different position.

To remedy this, all you have to do is add a couple extra step to the list above. After you've set the rotation (or any other property):

5) Right-Click on the frame just before the last keyframe and select "Insert Keyframe"
6) Right-Click the last keyframe and select "Clear Keyframe"

Now when you play or preview your Flash movie it will loop seamlessly. The one thing you need to keep in mind is that if you need to change the length of the tween (the amount of frames in between the keyframes) you will need to redo all the steps otherwise you'll again see a slight stutter.

Flash Quick Tip - Scale and Rotate

Here's something simple that took me a while to discover about Flash. Normally when scaling and rotating objects I would use the Free Transform tool which works similar to similar tools in other graphics programs. To get more exact I also would use the Transform Panel. Flash actually offers a third way to transform object though and using it can really speed up development time. With any object selected press the <<Ctrl>> <<Alt>> and <<S>> keys at the same time and a little box titled "Scale and Rotate" will pop up. Enter whatever values you want and press the <<Enter>> key. The time saving trick will be evident when you use this command again as it will save your last values. This means that if you have 50 objects that all need to be rotated or scaled to the same dimension, you set values to the desired number for the first object then just keep clicking objects, pressing <<Ctrl>> <<Alt>> <<S>> and then <<Enter>> and you will be through all your objects in about a minute. To do the same thing with the Transform Panel would probably take twice as long and a lot more clicks and typing.

Controlling the Timeline with simple script in Flash

Timelines really only become useful when you learn how to control them with action script. Otherwise they will just continuously play, looping to the beginning once the end is reached. To stop a timeline at a certain frame all you have to do is place the a stop(); action in a keyframe. It’s a good idea to designate an empty layer as a script layer so you can easily find your script later. Then insert a keyframe at the place you want it to stop and be sure you have the keyframe selected. Then open the Actions Panel (hit F9 to toggle) and add the action script:

stop();

So now you can stop your timeline which will keep it from looping. What if you want to start it playing again though? The script for this is really just as simple but you will also need something to trigger it like a button.

Buttons are pretty easy to make. Simply select an object on the stage (or just draw a box) then right click it and select <<Convert to Symbol>>. This opens a little window in which you need to set the Behavior to Button and click Ok. You now have a button. To add the play(); script to your button be sure you have the button selected and open the Actions Panel and add the action script:

on (release) {
play();
}

You’ll notice that this starts with what is called an event handler. This is what will trigger the action which is contained in the {} brackets. All button handlers start with “on” followed by in this case (release) which tells flash to run the script play(); when the user releases the mouse (basically right after the mouse clicks the button). You won’t see any of this script functioning till you test your movie so give it a try by selecting <<Control>> <<Test Movie>>. Congratulations! You now can control your timeline.