Using TrueType fonts in Flash

ericinho's picture

Since I am a known hater of the plague called micro tiny pixelfonts, using them is no option

So normal font aye, but often you see they tend to get blurry.

Apart from aligning the textsymbol to whole positions (so x=0 y=0) are there other tips to get font as crisp as possible?

For example, I noticed that the text frame is hardly ever a whole number of height. If you have a 16 points font, you always get a frame around it with a height of for example 18.3 or so. Altering the frame height also resizes the font, so that isn't right.

Any tips???

hrant's picture

> as crisp as possible?

Use fonts with good hinting.
Or do it by hand.

hhp

ericinho's picture

hinting?

mitchell's picture

Having the the text box on x:0 y:0 is really only the rule for those pixel fonts that you dislike so much. In my experience, the most crisp anti-aliasing is just as likely to be found at .25 or .5 in either/both the x and y coordinates. It depends on the font. Then you often have to adjust the tracking and (if the text is multiple lines) leading to get the characters to continue to stay crisp.

A quick example:
flash anti-aliasing of DINMittelschrift @ 10pt
as you can see the first example is starts pretty fuzzy but some of the middle lines become fairly crisp. So I bumped the y to a .5 for the next example which made the first line crisp but the middle lines get out of whack. So I tried a few different settings for the leading (line-spacing) and 2.1 seemed to keep it crisp throughout. This is a common process for me when using anti-aliased text in flash. As you can see it can make quite a difference. Hope that helps.

Mitchell

typotect's picture

So you want the crispness of a pixel font but
without using a pixel font. Doesn't make a whole
lot of sense to me but...

Any web safe fonts (with decent hinting) should
display fine.

spiral's picture

well, there _are_ some decent-sized pixel fonts out there, check especially minifonts.com and fontsforflash.com

mitchell's picture

Yes, I would say that with any size font in flash you could find it's optimal anti-aliasing using the steps I described above. Doing so is just usually not as crucial with the larger point sizes.

I haven't heard anything about the odd & even point sizes for different fonts, but I could imagine finding that true with certain faces.

One thing that reminds me of, is I have found that trying a range of non-integer point sizes (x.7 for example) will sometimes provide the best anti-aliasing.

All these things are often worth experimenting with if you want to get past flash's rather poor anti-aliasing.

ericinho's picture

still not sure what hinting is, but Mitchell's post was a great help!!!

Thanks all!

imagox's picture

Wow... such precision- I'm impressed. So HOW exactly do you change the settings as you did in the boxes above? Is this a function of Flash itself, where you started with 10 point type and then adjusted something when you assembled the flash movie file?

imagox's picture

I had no idea that doing what you describe would make such a difference, but obviously it does. Thanks so much for the wonderful tip. Do you know where I might obtain the font used in the example?

Also, what do the X and Y coordinates describe?

Again, many thanks!

antiuser's picture

I'm not quite sure if this is in fact what you asked, but X and Y represent the positioning of the text block within the Flash movie (x axis, horizontal and y axis, vertical).

hrant's picture

Yeah, what Stephen said.

hhp

mitchell's picture

I hope Joe's mistake doesn't mean I sound (post) like that zealot Hrant. ;)

I'm glad you all are finding this useful. I've always thought that it would be a good idea to store the settings I use for different fonts once I've found the optimal combination of x and y, leading, and tracking for each point size. That way I wouldn't have to repeat the tedious process every time, but not suprising to me I've never recorded it for any font.

However, if everytime someone found some optimal settings for a font they posted them somewhere on typophile

hrant's picture

> x = n.0 and y = n.5

Actually,
y = m.5
you heretic! ;-)

hhp

mitchell's picture

Joe, you've hit upon an issue in flash that bugs me quite often. No tracking control for dynamic text fields. None.

Well, there is this component which simulates tracking by inserting tab stops between the characters.

Issues:
Not much subtlety in it's tracking.
Kills line breaks so only good for single line fields.
Must use MX

The link Hrant posted is very interesting, and it shows tracking being applied to text on an arc. So surely there is some solution there. I don't see any downloads available though.

mitchell

anonymous's picture

Karl, ofcourse it makes sense.

anonymous's picture

Mitchel, does the technique you describe also work with bigger fonts like Trade Gothic 15 pts for example?

Oh, and i heard that with many fonts they work better in odd sizes and other in even sizes (12, 14 etc).

anonymous's picture

thanks, you have been of great help!
I will try and experiment with it.

Joe Pemberton's picture

Hrant [moderator's correction, Mitchell]: this is genius.
I never knew such anti-aliasing precision could be
achieved in Flash. I guess I never tried that hard.

Bernard:
What [Mitchell] illustrated is built into Flash (albeit, in a
strange place, but I'll save my Flash UI rants for another
thread.)

_ In Flash, select your text block.

_ In the Properties palette, click the Format button.

_ The default Line Spacing is 0. In Hrants example, he
set the first one to 2, the second one to 2 and the third
one to 2.1. It's that .1 that is making all the difference.

Stephen Coles's picture

Oops. You mean Mitchell, Joe. Hehe. Let's not give
Hrant any credit he doesn't deserve.

Joe Pemberton's picture

Ok, Mitchell. Let's see how good you are this time. =)

I've run into this same problem using dynamic text in Flash
with a bitmap typeface. The problem is I can't set the
letterspacing/tracking for dynamic text fields. At least the
option isn't available in the properties palette.

Are you familiar with dynamic text in Flash? Do you know if
there's a way to correct this bug?

Syndicate content Syndicate content