Tutorial details:
Written by: JT Paasch www.absconditus.com
Difficulty Level: advanced

Typography in Flash: Principles (part1)

The role of typography in the overall design of a website is very subtle, often entirely overlooked. Nevertheless, typography plays a substantialrole in the overall design of a website. Poor typographic design will inevitably destroy an otherwise well designed Flash movie. Choosing the right font, the right size, the right color, and other typographic aspects is crucial to a well designed website. So how does one know when to do what with their type?

There is of course a rich tradition of guidelines for typographic design. Unfortunately, many of us haven't had any formal training in typography and consequently find ourselves floundering in the dark as we try to choose the right font or set the right font size. As if that weren't enough, Flash presents a number of limitations to traditional typographic design principles, and so we need to improvise a little to make our typography work well in Flash.

What I want to do here is present some basic guidelines specifically relevant to typographic design in the Flash medium. If you are like me and need some basic principles with which to make concrete decisions about type design, then write these guidelines down and keep them in mind as you design your Flash movies.

This article spans two parts. The first part, the part you are now reading, presents some principles for good typographic design in Flash. We will not look at any particular actionscript examples, but the discussion is tailored entirely to how type works in Flash. The simple guidelines discussed here go along way towards good typographic style in Flash and can often make the difference between an amateur and professional looking site.

In the first section I discuss some of Flash's limitations with regard to typography. Understanding what Flash cannot do is crucial for understanding what Flash can do, and for understanding workarounds. In the second section I look at some basic principles of good typographic style to which Flash is particularly well suited. Such principles help us make the most of what Flash can and cannot do. In the third and final section of this first part, I discuss a few guidelines for how typographic design integrates with the rest of a site's design.

In the second part of this article, I turn to the role that actionscript can play in typographic design. Since this part deals with some practical aspects of writing code, I assume some familiarity with actionscript, though I don't expect you to be a guru. While the emphasis in the first part is on general principles, the emphasis in the second part is on what actionscript can do to push your type design into arenas impossible for print.

In the first section of the second part I look at the TextFormat and CSS objects. With these objects, we are afforded a relatively precise degree of programmatic control over typographic formatting. In the second section of the second part, we will use actionscript to gain even more typographic control: by placing each character of a string in its own movieclip, each character of a string can be manipulated just as any movieclip can. When wrapped up nicely in a class, such code provides possibilities far beyond that of the printed page.

I should say this is not a tutorial on typography in general. Rather, this looks at basic typography as it is applied in Flash. Consequently, I will assume some very, very basic typographic knowledge. That said, however, I tend to over-explain myself, so if you are completely new to typography, read on. If you come to some unfamiliar topic, take a peak at Counter Space to get a very simple introduction. There is also a short list of useful resources at the end of the first part.

1 Flash and Type Limitations

There is a whole world of design possibilities once you understand how to use type well in Flash. But understanding what we can do with type in Flash requires first that we understand Flash's limitations with respect to typography. Let me take this section to enumerate some of the more important limitations Flash presents to typographic design.

1.1 Immature text handling

Flash was originally designed as a tool for animation, not as a tool for presenting lengthy documents as you might find in a medical database or a library. Consequently, Flash's text handling abilities are pretty basic. MX and MX 2004 show some notable improvements in this area, but Flash still has miles to go.

That means that you only have access to a limited number of type properties. You can, for example, set the spacing between lines, but you cannot adjust the space between words. To set some of these other properties to which Flash does not offer immediate access (e.g. the just mentioned word spacing), you must pursue some rather impractical workarounds.

Flash is showing notable signs of improvement with respect to typographic control in recent versions. MX 2004, for example, introduces basic CSS support, a mighty leap forward for typography in Flash. Nevertheless, Flash is still very immature. The more you work with type in Flash, the more you encounter gaping holes in typographic support. It is important to remember just which type properties you have immediate access to, and then work from those. I often keep a list of such properties on my desk.

1.2 Pixelization

In addition to being intrinsically limited, Flash is also limited typographically simply because it is a computer technology. Computer monitors present a whole set of problems for type design. Most importantly, computer monitors display images by a square grid of pixels. That means everything you see on the screen is ultimately made up of only horizontal and vertical lines (or rather, square dots), including curved or sloped lines. In other words, everything is pixelized on the screen.

This feature of the computer screen makes both the size and the positionof a font on the screen very important. For example, curved strokes in a font show up fine at a large size, because many tiny horizontal and vertical lines can be put together to make what appears to be a smooth curve. At a small size, however, the curve must be built with only a few horizontal and vertical lines, and thus the curve often doesn't even look like a curve.

Thus, one should always consider how a font looks when it is pixelized and at different sizes. Fonts which look great on paper often look terrible on the screen, and fonts which often look great on the screen often look terrible on paper. It's not a bad idea to keep a list of fonts which look good on the screen, and at what sizes those fonts look best.

1.3 Anti-aliasing

Further, pixelized screens gave rise to another problem. Early on, when pixels were big enough to be noticeable to your average human eye, the pixelization of fonts looked pretty bad. To compensate, computers started rendering fonts with fuzzy edges. This helped to blur those sharply cornered pixels so as to make the curve appear more a natural curve. This blurring is called anti-aliasing.

Anti-aliasing looks great for large font sizes, so much so that usually one should use anti-aliasing for big sizes wherever possible, even now when computer monitors have such high resolutions. However, with small font sizes, anti-aliasing is not a good thing because the blurring of the edges ends up blurring the lines together, making it difficult to distinguish them. At small sizes, fonts cannot be anti-aliased or they are in danger of becoming completely unreadable.

Flash by default renders all type with anti-aliasing. This was for many years a serious problem because any small text was virtually unreadable. Fortunately, with more recent versions, Flash introduced dynamic and HTML-enabled text fields which could be rendered with no anti-aliasing. MX 2004 has finally given us the ability to turn off anti-aliasing, which is crucial when the type is small.

1.4 Italics and serifs

The pixelization of the computer screen also affects different type styles. The most important type style affected by pixelization is the italic style. Italic type is slanted, and that means it is made of sloped strokes. As was said, pixelization cannot properly display sloped strokes due to the fact that it uses a square grid of pixels for rendering.

Thus, just as curves look okay at large sizes but not at small sizes, so too then does italic type look okay at large sizes but not at small sizes. Similarly, anti-aliasing smaller italic type almost always makes that type even more unreadable than non-italic text of the same size. So if you're using small text, it's not a good idea to use italics, and it's an even worse idea to use anti-aliased italics.

The same rules apply to a font's serifs. Letters have serifs because serifs act to guide the reader's eye smoothly to the next letter. Serifs make reading text much easier and much faster. One can read a large page of serif type more easily than a large page of sans-serif type. However, serifs are often comprised of curved strokes, and thus such curved stroke serifs will only look good on a computer screen if they're big. At small font sizes, serifs lose their definition and end up cluttering the letters. Here too anti-aliasing can complicate things. Avoid serifs and anti-aliasing at small sizes wherever possible.

1.5 Typefaces

Yet another limitation of typography in Flash is that the viewer must have the relevant font installed on their computer. This limits the number of typefaces from which the Flash designer can choose. Just as with pixelization, this is a problem due not so much to Flash but to the way computers work.

To know how to draw the letters on the screen, every computer looks for a file installed on its hard drive which contains instructions for how to draw those letters on the screen. These files are the 'font' files in your fonts directory (e.g. Georgia.TTF in the Fonts folder). Consequently, if your computer doesn't have a particular font file stored somewhere on its hard drive, it can't draw the letters on your screen in that font. In such situations, your computer usually uses an alternative font. The result is that different end users often see different fonts.

Contrast this with type in print, where everybody sees the same font. In the world of computers, people often don't have a font on their computer, and so the type ends up getting rendered in some alternative font. That means that a Flash movie might show up on somebody's computer with its type in a font entirely different from the original designer's choice. On your computer, your Flash movie might look great with Palatino, but on another computer which does not have Palatino on its hard drive, the movie looks terrible with Courier.

That means the designer has to be very careful about the font they wish to use. On the one hand, we are limited to only a few fonts which pretty much everybody has installed on their computer. Those fonts are Courier, Times New Roman, Arial, Verdana, and Georgia. If you use one of those fonts in your Flash movies, you're probably safe as 99% of the people who see your movie will also have those fonts installed on their computers. The type in your movie will show up for them just as it does for you. If you use some other font, though, it is not very likely that most of the people who see your movie will see the type as you see it.

On the other hand, Flash allows us to 'embed' a font in our movies, which means that the font itself gets sent to the viewer along with the Flash movie. That ensures that the viewer will have the font when they look at your movie. If they don't have the font on their computer, it doesn't matter because the movie will use the embedded font to render the type.

However, embedding fonts severely limits your ability to use different fonts and different styles (at least not if you want to keep your movie at a reasonable file size). This applies to different styles and to different fonts. You must embed one font for normal type, you must embed another font for italic type, another for bold type, and still another for a completely different font altogether (e.g. Times New Roman). Each embedded font dramatically increases the size of your Flash movie, so if you want any sort of typographic variation, embedding the fonts will make your movie very large and unwieldy.

Further, embedded fonts are always anti-aliased, even in HTML text fields where type is usually rendered clear, and thus you normally cannot use embedded fonts at small sizes or else they are unreadable. However, if you must embed your fonts, you can use embedded 'pixel fonts' (sometimes called 'screen fonts') for small type. Pixel fonts are fonts designed to be crisp and sharp at a certain small size because every pixel of the font lines up with the screen's pixel grid. Pixel fonts allow you to embed your desired font and it be readable at small sizes. However, pixel fonts have their limitations. If you want to use bold or italic, you must embed a bold or italic pixel font too. And pixel fonts usually only look good at one size, so you often need to embed another font for larger sized text. Thus, pixel fonts or not, embedding fonts severely limits your formatting options.

When choosing your fonts, it is often worth your while to consider whether you really need that 'cool' font you've had your eyes on all week. Any font other than the afore mentioned 'safe' fonts requires that you embed it in your movie. But as just said, this can either limit you to a single font at a single size, or it will make your movie very large. In many cases, the site's design will not suffer by using one of those boring 'safe' fonts but will rather be better off because it affords you far more diverse formatting capabilities. Due to Flash's limitation with typefaces, good typographic design often means using those traditional 'safe' fonts with varying font sizes, colors, and formatting rather than using some hot new font which must be embedded.

1.6 Loss of layout control

Another factor in Flash's typographic limitations is that the designer loses some control over the layout of a movie. There are a number of things at work here: computer monitors are different sizes and resolutions, browsers can be resized to be narrower or longer, text can come from a dynamic source (e.g. a database), end users may not have the proper font installed, and so on. All of these factors mean that the movie might look different on the end user's computer than it does for you.

Contrast this with type design for print. The printed page maintains its layout for everybody who looks at it. The page will always look the same size at the same resolution, the user cannot resize the page, the text is not dynamic, and the reader will always see the same font. The layout for websites, on the other hand, is much more fluid and is almost guaranteed to change from end user to end user. That nice rosy pink color on my old low-res monitor might appear blood red on my neighbor's high definition flat panel display. The web designer loses some control over the layout of their designs.

This means that you need to approach type design in Flash with flexible design principles, not static ones. Design so that your type will look good no matter how big the site appears. For example, rather than design your site to look good with 9pt body text and 12pt header text, design your site to look good with body text that is 3/4th the size of header text. That way the text will look right if things get resized. Designing with a mind for change will help preserve your site's good design when things start to look differently from end user to end user.

Understanding these limitations is crucial for understanding how to use type in Flash to maximal advantage. Keep these limitations in mind as you work and ask yourself if your typographic design will suffer if (and when!) any of these limitations come into play. With a constant awareness of these limitations, you can more appropriately use type for good design, focusing your attention on those principles which are applicable to Flash typography. With these limitations in mind, we turn next to some basic typographic design guidelines which are particularly useful in Flash.

2 Typography basics

Now that we've looked at some of Flash's important limitations to typographic design, we can look at what you cando with type in Flash. The set of principles in this section are very basic principles of good typographic style, but they are principles which go a long way in Flash.

Since Flash is still immature in its typographic abilities, it often doesn't render eye-popping text on its own. Instead, the type usually appears pretty primitive. The designer, then, has to be extra careful in following good typographic principles so as to make Flash text look good. Following a few basic principles can really improve the type in your movies. In this section I will discuss these basic typographic design principles.

2.1 Readability

The fundamental principle in any typographic design is this: the type must be readable. The goal of any typographic design, then, is to make the type as readable as possible. One should pursue readability above all else in their type designs.

One might think the goal of typography is to make the type look 'cool'. It is precisely at this point that the essence of good typographic style can be most clearly seen. Typographic design is subtle, it serves a very functional purpose: namely, that the reader can read the type as easily and clearly as possible. The stuff which the viewer should get from type is the content of the text, not the look of the text. The look of the text is as it is only to make the content more apparent.

The typographic designer's work, then, should sink into the background and remain unnoticed. The viewer should notice the content of the text, not the look. If the typographic design is poor, the viewer will be distracted and not read what they're supposed to read at all. The cause of this may be that the font is simply ugly and thus makes the reader wretch when they see it, or it may be that the font is so interesting and 'cool' that the reader never gets around to reading the substance of the text. Either way, if the reader does not focus instantly and easily on the content of the text, the typographic design is poor.

Thus, in good typographic design, the look of the text remains entirely at the service of the content of the text. The text looks a certain way so the viewer can access the contentin the easiest and clearest possible way. I can't stress this enough. Your primary goal as typographic designer is to make the text as readable as possible.

This means choosing the right font, the right color, the right size, the right letter and line spacing, and so forth. If any of these aspects are not correct, the reader will have trouble reading the text. For example, imagine reading a 500 word company description in 96pt Arial type. That simply wouldn't work. The only aspect amiss, presumably, is the font size, but it's enough to make the whole thing entirely unreadable. This is an extreme example, of course, but it serves to illustrate the point that choosing the right type features greatly enhances the readability of a text. The principles discussed throughout this article are all aimed at improving readability, they are aimed at helping the designer choose the type features which make the text the most readable.

2.2 Spacing

One major factor in a text's readability is its spacing. Letters appear in space, and so there are many different kinds of spacing that affect the readability of type. The space between letters is one such kind of spacing. The space between words is another, and the vertical space between each line is still yet another kind of spacing which affects readability.

In principle, the smaller your type is, the greater the spacing should be. Contrariwise, the larger your type is, the lesser the spacing should be. For example, if you are using 7-9pt type, set the line spacing to a generous amount. 8pt type is much easier to read with line spacing at 1.5 than at 1.1. Fortunately, Flash lets us set line spacing with the TextFormat object (or with CSS in MX 2004). I will discuss the TextFormat object in part two.

However, Flash does not let us set the spacing between letters (although you can do this with static text in the IDE). Small type in Flash, consequently, usually ends up having its letters look a bit smashed together. Be sure not to make your type so small that the letter spacing becomes too tight and jumbled. Sometimes choosing a font with fixed width letters can help at small sizes. A font with fixed width letters is a font which draws each letter at exactly the same width. The result is a very evenly spaced font.

However, fixed width fonts sometimes look bad. The reason is that in every alphabet, some letters are very wide (e.g. a 'w' or an 'm') and some letters are very narrow (e.g. an 'i' or a 't'). Spacing such letters evenly can make them look unbalanced. For this reason, non fixed width fonts automatically space their letters according to the proportion of each letter's size, and this gives the font a more even feel.

In some cases, a fixed width font will not do because it will look unbalanced. In other cases, a non fixed width font will not do because its automatic spacing will make the letters look jumbled. In general, it is a good idea to be generous with spacing in Flash. Be generous with your type's line height, and be generous with letter spacing wherever possible. Additionally, be generous with the space surrounding the text wherever possible.

2.3 Color and contrast

The color of type in relation to its background and in relation to the viewer is also a crucial factor in readability. If the color of the type is only a shade off that of its background, the type will be very difficult to read because the viewer will have trouble clearly distinguishing the letter shapes (remember that the letters aren't all that clear on a computer screen anyways due to pixelization).

But if your type color is opposite that of its background, the type will be very easy to read. In principle, the more the type color contrasts with its background color, the easier it is to read. Remember too that many people are color blind, and what looks like a contrast to you may not be for others. It's always a good idea to check your colors against different kinds of color blindness (e.g., at http://www.pixy.cz/apps/barvy/index-en.html).

Good type design, then, will always implement a strong contrastbetween the type and the background. You can achieve contrast in a number of ways. You can achieve contrast by using complimentary colors (i.e. colors opposite each other on the color wheel). Orange text will stick out great against a blue background because orange and blue are complimentary and thus opposite colors. The same is true of the converse. You can also choose more subtle forms of color complimentarity to achieve contrast. For example, you might use split-complimentary colors, or you might use the strong color of an analogous color scheme against the weak color.

You can also use value (how light or dark it is) and saturation (how much black or white is in the color) to achieve contrast. In terms of color value, a dark color will contrast with a light color, and vice versa. You can even use the same color, with the type dark and the background light, provided the difference in value is strong enough to create contrast. Saturation can be used to create contrast in just the same way. You can also use the neutral colors (black, white, grey, brown) to provide contrast. Black contrasts with any light color, and white contrasts with any dark color.

In any case, be sure to use contrast in your typographic design. The reader must be able to easily distinguish the text from its background. You don't want to make their eyes exhausted by forcing their eyes to maintain too high a level of concentration, just to make out the text against its background. Use contrast to your advantage.

2.4 Different fonts and different sizes

Contrast can also be achieved with different fonts and different font sizes. Here, however, the contrast is not so much between the text and its background but between different portions of text. Here you can use different typefaces and different sizes to create contrast to clearly delineate different bits of text from each other. This is very useful in helping the reader navigate your text. The more clearly the different parts are demarcated, the easier the reader can work their way through the relevant bits.

Varying and contrast font sizes can go a long way in clearly marking off distinct portions of text. For example, a large font size might indicate a heading, while a small font size might indicate body text. With a strong contrast in size, you clearly distinguish different parts of the text, and the reader immediately understands that the big text serves one function (a heading) and the little text serves another function (body text). By contrast, imagine if your headings were exactly the same size and weight as your body text. The reader would have a difficult time recognizing the headings as headings. Thus, contrasting different bits of text with varying size goes a long way to making your type more readable and more accessible.

You can also use different typefaces to create contrast. You might use one typeface for headings and another for body text. The contrast will here too help the reader clearly differentiate parts of the text. That said, however, It is a general typographic rule to use no more than two fonts in the same document, and one should be sans-serifed while the other is serifed. Do not, then, mix two sans-serif fonts or two serif fonts on the same page. Instead, use different sizes to give further levels of differentiation. Additionally, you can use bold and italic text to add further levels of distinction.

Keep these basic guidelines in mind as you design with type. They are some of the most basic typographic design principles, but they are principles which go a long way in Flash design. Since Flash is fairly immature and does not always render stunningly beautiful text on its own, the burden is even more on the designer's shoulders to ensure the text looks good enough to be easily readable. You can greatly improve your type's readability simply by following some of these guidelines.

3 Designing with Type

Thus far we've looked at Flash's limitations and some basic typography principles which go a long way to making type in Flash all the better. But type is also part of your overall site design in just the same way as lines and color. Perhaps we can think of type as one of the paints with which we paint our Flash movies. It is, then, important to understand how your typographic design works with the rest of your movie's design. In this section, I will discuss a few guidelines for using type to design your site, guidelines which help the type play a major role in your movie's overall design and ensure that your typographic design is consistent with the rest of your movie's design.

3.1 Character Axis

The letters in fonts are designed according to at least one axis. The axis is defined by the angle of the pen's blade when the letter stroke is drawn. By the pen's 'blade' I mean the thin, wide tip of a fountain pen. By holding the blade at the same angle all the while the letter is drawn, one gets thin strokes and thick strokes, due to the thin and thick shape of the pen's tip.

A font has a vertical axis if the font designer kept the pen's flat tip vertical on the page when the letter was drawn. If the font designer kept the pen's flat tip at a slight angle to the page, the font has a diagonal axis. Additionally, a font can have more than one axis if different strokes of each letter are drawn with the pen held at different angles. These can further be broken down into a major and minor axis or axes.

The axes of a font are important because the axes of a font should line up with the axes of your movie's design. For example, if your movie is laid out in a very rectangular fashion (and thus it has horizontal and vertical axes), choosing a font with strong horizontal and vertical axes will ensure that your type fits nicely with your movie.

I often find it helpful to imagine (or even draw) the lines of my font axes and the lines of the axes from the rest of my movie's design. That often helps me see very clearly just how the structure of the font letters is working with the structure of the rest of the site. Sometimes the axes of the font can even provide important connecting 'lines' between parts of the movie's stage. And sometimes a diagonal font axis or two can provide an interesting diagonal aspect to an otherwise rectangular site layout.

So be sure to consider the major and minor axis of both your font(s) and your site, and use this to make your designs all the more interesting. If your site is laid out in squarish fashion, then a squarish font will probably fit well, since the axes of the font and the rest of the site are consistent. At the same time, perhaps using a different font axis will add another important axis to your overall site design. Be aware, however, that a font with a major axis that doesn't work with your overall site design will look bad and will not 'feel' right.

3.2 Stroke width

Closely related to the major and minor axis of a font is the stroke shape and width. Some fonts have thick strokes along their major axis while others have thin strokes. A thick stroke on one axis will emphasize that axis. A thin stroke on that axis will de-emphasize that axis. If you want a very strong vertical feel to your site, then design the layout with a strong vertical axis and choose a font with a strong vertical stroke on the major axis.

Further, a thick stroke provides a more obvious shape. A thin stroke is more like a line to the viewer, but a thick stroke is more like a rectangle. This shapely character of letter strokes can be used to your advantage. If you have a site full of rectangles, then perhaps a font with strong, rectanglularly shaped strokes might fit in well. On the other hand, using a font with thick strokes in a site otherwise containing only thin lines might provide an important bit of contrast. You can use this to emphasize (or de-emphasize) the type and make it stick out more clearly (or vice versa).

Remember that a font's stroke width helps to define the shape of the letters, and those shapes can be used in your overall design. Be aware of the stroke width as you design and try to put the stroke width to work in your movie's comprehensive design.

3.3 Contrast and text group shape

I've already mentioned contrast with respect to type's readability. But your type's contrast can also play an important role in the overall design of a site too. Consider a site which is nothing but a pure white space. Black text would strongly contrast with the white background and thus would jump out immediately to the end user. Or you might make all the text grey except the one bit you want emphasized, which might be black, and this would give the black type another level of importance. The darker text is in such cases going to serve to define the relevant spaces on the movie's stage. You can then use the text -- rather than lines -- as markers and boundaries for different areas on your site. Simply by using contrast, you can enable the type to do the work of the line.

Further, the outline of a text block forms a shape, and that shape can be utilized in your design too. Consider the white and black example again. If there is nothing in the white space except the black text, the text blocks will provide the only shapes on the movie's stage. These text blocks can then be arranged and used just as any shape: for marking boundaries between sections, for delimiting a certain bit as a single unit, and so forth. By using strong contrast, you empower your text to function as a shape and thus it can play a major structural role in your overall design.

3.4 Design with type from the start, don't fit it in later

All of this is to say that type can be just as much a design tool as lines, shapes, or color. Type is one of the paints with which you paint Flash movies, and thus you can use it as such. Use type to mark off the layout of your movie's interface, use it to form shapes, use it to fill out shapes and lines, use it to connect different sections in your web site, use it to provide an important axis to your site, use it to contrast or balance your overall site design, and so on. There's no end to what you can do once you start to think of type as one of your Flash movie building blocks.

Consequently, you can think about type from the earliest stages of brainstorming. If type plays such an important role in the design of your movies, then one needn't design the site first and then 'decide' on the type (e.g. font, size, and so forth) later. That makes the type superfluous to the whole site, and that will in turn come across to the viewer. If the type design feels superfluous or just 'added on' later, then the type itself will feel superfluous, and the viewer probably won't spend much time reading the type, if they read it all. Rather than fit the type in later, start with the type as early as you start with color and layout. The type is, after all, just as much a part of the layout as the color.

With that, this first part comes to a close. We have discussed a number of practical principles and guidelines for typographic design in the Flash medium. By keeping these principles in mind as one designs, they can make more appropriate typographic decisions. By applying these principles to the type in our movies, we can better harness type as one of the central building blocks of our work. A big part of what the site 'says' to the viewer, after all, is usually said simply with type.

But we needn't stop here. One can continue to push these principles into our use of typography, especially if we use actionscript. In part two, I will look at a few ways that actionscript can give us more control over the type in our movies. This in turn empowers us to employ these principles all the more, in ways impossible on the printed page. Here Flash opens itself up as an innovative medium for typography.

Part 2. Typography in Flash: Actionscript

Resources

Robert Binghurst, The Elements of Typographic Design
This beautifully designed and well written text is the bible of basic typographic design. Whether you only use type when writing essays for university classes or use type in a professional design studio, this text will change the way you think about how you put any letters on the page.

Counter Space
http://counterspace.motivo.com/
This Flash site provides a very comfortable and semi-interactive introduction to the basic concepts of typography.

Val Casey on Typography
http://www.valcasey.com/webdesign/typ.html
Val Casey's site is an excellent summary of design principles, keeping it simple, beautiful, and to the point. The section on typography is equally as informative, simple, and insightful.

Fontsite's Rules of Typography
http://www.fontsite.com/Pages/RulesOfType/ROT1-08.html
This set of rules, adopted from Sean Cavanaugh's Digital Type Design Guide, are general enough to apply to digital media in general. These rules work for HTML just as much as for Flash.

Adobe Type
http://adobe.com/type/
Adobe is a massive force behind digital type, so their site is a great place to start any search for fonts. The collection on this site is massive.

Microsoft Type
http://www.microsoft.com/typography/
Although Microsoft is set on making their typographic technology the typographic technology on the web, there is a lot of good information here, especially in the 'Resources' section.

Type Design for TV/Video
http://www.typographer.org/2004_03_01_digests.html
This article provides some basic guidelines for type design in video, many of which apply to Flash itself, as well as to using video in your Flash movies.


Copyright 2004 JT Paasch.